/* ════════════════════════════════════════════════════════════════
   DUALITY — styles.css
   ────────────────────────────────────────────────────────────────
   Structure :
     1. Variables (tokens couleur, tailles, bordures)
     2. Thème HOLO — variables & overrides (fond blanc, palette solid)
     3. Reset & base
     4. Layout (header, plateau, captures, légende)
     5. Plateau (cases, pièces, VOID, sélection, cibles)
     6. Mode Face-à-Face (FAF)
     7. Responsive mobile (≤ 768px)
     8. Composants UI (popups, victoire, confirm, splash, IA…)
     9. Holo lisibilité complète (opacités → couleurs solides)
    10. Print
    11. Mémoire
    12. Composants supplémentaires (confirm-overlay v2, badges IA…)
    13. Styles extraits des attributs inline
    14. Classes utilitaires
   ════════════════════════════════════════════════════════════════ */

/* ══ 1. VARIABLES ══════════════════════════════════════════════ */
  :root {
    /* ── DARK MODE (défaut) ── */
    --bg:         #0e1018;
    --bg2:        #141820;
    --cell-light: #6a789c;
    --cell-dark:  #323a55;
    --gate-l:     #2e6e5a;
    --gate-d:     #1e4a38;
    --void:       #0a0a14;
    --void-glow:  #6600ff;
    --border:     #0e1018;
    --border2:    #2a3a50;
    --anima:      #ff44cc;
    --machina:    #00ccff;
    --gold:       #2dd8a0;
    --disciple:   #fd0;
    --master:     #d72;
    --oracle:     #d00;
    --text:       #8aaabf;
    --text2:      #c8dde8;
    --target:     rgba(255,68,204,.15);
    --target-dot: #ff44cc;
    --target-atk: #ffaa00;
    --target-gate:#2dd8a0;
    --selected-outline: #2dd8a0;
    --success:    #4caf50;
    --danger:     #ff4444;
    --holo-btn-active: #b3d7d3;
    --holo-icon:       #8491A4;
    /* ── Variables partagées (valeurs dark mode) ── */
    --lightgold:  rgba(255,255,255,.05); /* fond sombre pour textarea en dark */
  }

  .holo {
    /* ── Palette "jour holographique gris-bleu" ── */
    --bg:         #b8c8d8;
    --bg2:        rgba(255,255,255,.18);
    --cell-light: rgba(120,137,155,.85);
    --cell-dark:  rgba(60,75,92,.85);
    --gate-l:     rgba(24,160,108,.70);
    --gate-d:     rgba(12,100,65,.70);
    --void:       rgba(45,50,60,.55);
    --void-glow:  #5533aa;
    --border:     rgba(255,255,255,.22);
    --border2:    rgba(90,110,140,.50);
    --anima:      #ff44cc;
    --machina:    #00ccff;
    --gold:       #2dd8a0;
    --lightgold:  #dfeae6;   /* fond clair pour textarea en holo */
    /* Texte holo : couleurs solides (évite les opacités sur fond blanc) */
    --text:       #434f5f;   /* équivalent solid de rgba(20,35,55,.80) sur blanc */
    --text2:      #232c42;   /* équivalent solid de rgba(10,20,45,.90) sur blanc */
    /* Palette hiérarchique de texte holo — aucune opacité, cross-device safe */
    --holo-text-primary:  #1a2d45;  /* fort contraste, titres/corps */
    --holo-text-mid:      #364f66;  /* secondaire, descriptions */
    --holo-text-soft:     #5a6f80;  /* tertiaire, sous-titres, meta */
    --holo-text-muted:    #7d8f9e;  /* très discret, numéros, dates */
    /* Texte sombre partagé pour close buttons / tooltips */
    --holo-close:         #5a6f80;  /* remplace rgba(10,25,50,.45) */
    --holo-tooltip-text:  #1e3248;  /* remplace rgba(10,25,50,.80) */
    --target:     rgba(255,68,204,.15);
    --target-dot: #ff44cc;
    --target-atk: #ffaa00;
    --target-gate:#2dd8a0;
    --selected-outline: #2dd8a0;
  }

/* ══ 2. THÈME HOLO ════════════════════════════════════════════ */
  /* ── Background HOLO : gris perle plus clair ── */
  body.holo {
    background:
      radial-gradient(ellipse 130% 110% at 50% 50%,
        #ffffff 0%,
        #f8fafb 30%,
        #edf2f6 60%,
        #e0e8ee 100%
      ) !important;
    background-attachment: fixed !important;
    /* Même système de couleurs cibles qu'en mode Dark */
    --target:     rgba(255,68,204,.15);
    --target-dot: #ff44cc;
    --target-atk: #ff44cc;
    --target-gate:#2dd8a0;
  }

  /* ── Plateau HOLO : surface vitrée plus sombre ── */
  body.holo .board-wrap {
    background: rgba(140,155,170,.40) !important;
    border: 1px solid rgba(255,255,255,.45) !important;
    box-shadow:
      0 8px 32px rgba(0,20,40,.22),
      0 2px 8px  rgba(0,20,40,.14),
      inset 0 1px 0 rgba(255,255,255,.65),
      inset 0 -1px 0 rgba(255,255,255,.20) !important;
    backdrop-filter: blur(12px) saturate(1.2);
    border-radius: 10px !important;
  }


  /* Ronds HOLO : couleurs via variables --cell-light/dark, --gate-l/d définies dans .holo {} */
  /* Fond de grille transparent, gap nul — aucun séparateur */
  body.holo .board { background: transparent !important; gap: 0 !important; }
  body.holo .cell:not(.c-empty) { outline: none; }

  /* ── Titre DUALITY HOLO : identique au mode dark ── */
  body.holo h1 {
    /* Dégradé identique au mode dark : magenta → cyan */
    background: linear-gradient(135deg, var(--anima), var(--machina));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 10px rgba(0,204,255,.20));
  }
  body.holo .slogan { color: var(--holo-text-soft); }

  /* ── Bouton HOLO actif ── */
  body.holo .btn-holo.active {
    background: rgba(45,216,160,.12) !important;
    border-color: var(--gold) !important;
    color: var(--gold) !important;
    box-shadow: 0 0 8px rgba(45,216,160,.25), inset 0 1px 0 rgba(255,255,255,.6) !important;
  }

  /* ── Légende HOLO : sans bordure ── */
  body.holo .legend-item {
    color: var(--holo-text-primary) !important;
    background: transparent;
    border-color: transparent !important;
    box-shadow: none;
  }
  body.holo .legend-item:hover {
    background: transparent !important;
    border-color: transparent !important;
    color: #0a0f1e !important;
  }
  body.holo .legend-role { color: var(--holo-text-soft) !important; opacity: 1 !important; }

  /* ── Boutons HOLO : verre dépoli — sauf boutons icônes header ── */
  body.holo .btn:not(.btn-icon-sq) {
    background: rgba(255,255,255,.8) !important;
    border: 1px solid rgba(255,255,255,.75) !important;
    color: var(--holo-text-soft) !important;
    box-shadow:
      0 2px 8px rgba(0,30,60,.10),
      inset 0 1px 0 rgba(255,255,255,.85);
    backdrop-filter: blur(8px);
  }
  body.holo .btn:not(.btn-icon-sq):hover:not(:disabled) {
    background: rgba(255,255,255,.80) !important;
    border-color: var(--gold) !important;
    color: var(--gold) !important;
    box-shadow: 0 0 10px rgba(45,216,160,.30), inset 0 1px 0 rgba(255,255,255,.9) !important;
  }
  body.holo .btn:not(.btn-icon-sq).active {
    background: var(--holo-btn-active) !important;
    border-color: var(--gold) !important;
    color: var(--holo-text-primary) !important;
    box-shadow: 0 0 8px rgba(45,216,160,.25), inset 0 1px 0 rgba(255,255,255,.6) !important;
  }
  body.holo .btn:disabled { opacity: .5 !important; }

  /* Boutons icônes header en HOLO : mêmes que DARK (transparent, rollover gold) */
  body.holo .btn-icon-sq {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: var(--holo-icon) !important; /* icônes bug/save/play en gris-bleu holo */
  }
  body.holo .btn-icon-sq:hover:not(:disabled) {
    border-color: transparent !important;
    color: var(--gold) !important;
    background: transparent !important;
  }
  /* Burger menu en gris foncé en holo */
  body.holo .btn-icon-sq.btn-settings { color: var(--holo-text-mid) !important; }
  body.holo .btn-icon-sq.btn-settings:hover { color: var(--gold) !important; }
  /* Le span ☰ du burger hérite la couleur du parent au hover */
  body.holo .btn-icon-sq.btn-settings span:first-child { color: inherit !important; }

  /* ── Labels ANIMA / MACHINA : mêmes couleurs qu'en mode dark ── */
  body.holo .clan-a {
    color: var(--anima) !important;
    text-shadow: 0 0 8px rgba(255,68,204,.35) !important;
  }
  body.holo .clan-b {
    color: var(--machina) !important;
    text-shadow: 0 0 8px rgba(0,204,255,.35) !important;
  }
  body.holo .btn-flip .arrow-a { color: var(--anima) !important; text-shadow: 0 0 8px rgba(255,68,204,.4) !important; }
  body.holo .btn-flip .arrow-b { color: var(--machina) !important; text-shadow: 0 0 8px rgba(0,204,255,.4) !important; }

  /* ── Status bar ── */
  body.holo #status { color: var(--holo-text-mid) !important; }

  /* ── Zones de capture HOLO ── */
  body.holo .capture-cell {
    background: transparent !important;
    border: 1px solid rgba(80,100,130,.28) !important;
  }
  body.holo .capture-col-left.team-a  .capture-cell,
  body.holo .capture-col-right.team-a .capture-cell { border-color: rgba(0,80,180,.32) !important; }
  body.holo .capture-col-left.team-b  .capture-cell,
  body.holo .capture-col-right.team-b .capture-cell { border-color: rgba(180,0,100,.32) !important; }

  /* Légende : pas d'ombre */
  body.holo .legend-item .piece { filter: none; }
  /* Couleur adoucie sur les éléments SVG de légende */
  body.holo .legend-item svg *  { fill: rgba(30,50,80,.55) !important; stroke: rgba(30,50,80,.55) !important; }
  /* Exception : yeux du Ghost et centre de l'Agent restent blancs */
  body.holo .legend-item svg [fill="#fff"] { fill: #fff !important; }
  /* Textes label et rôle */
  body.holo .legend-item span        { color: var(--holo-text-primary) !important; }
  body.holo .legend-item .legend-role{ color: var(--holo-text-soft) !important; }

  /* Tooltips HOLO (header, replay, victory) : fond blanc, texte sombre solide */
  body.holo .header-tooltip,
  body.holo .rp-tooltip,
  body.holo .victory-btn-tip {
    background: #f4f6f8 !important;
    border-color: rgba(80,100,130,.30) !important;
    color: var(--holo-tooltip-text) !important;
  }
  /* Bordures de camp holo supprimées */

  /* ── Gate HOLO : géré via ::before dans les règles générales ── */

  /* ── Panneau replay HOLO : fond blanc opaque pour ne pas voir la légende en dessous ── */
  body.holo #replayControls { background: rgba(255,255,255,.90); }

  /* ── Textes dans les popups HOLO : couleur pleine, bien lisibles ── */
  body.holo .popup li,
  body.holo .popup p,
  body.holo .popup-desc,
  body.holo .popup-section-text,
  body.holo .popup-power,
  body.holo .popup-subtitle,
  body.holo .confirm-text,
  body.holo .victory-resume,
  body.holo .bug-box p,
  body.holo .bug-box label,
  body.holo .bug-note {
    color: var(--holo-text-primary) !important;
    opacity: 1 !important;
  }

  /* ── Pop-ups HOLO : boîtes fond blanc opaque ── */
  /* NOTE : les overlays (.popup-overlay, .confirm-overlay, .victory-overlay)
     ne sont PAS inclus ici — ils gardent leur fond semi-transparent ci-dessous. */
  body.holo .popup,
  body.holo .confirm-box,
  body.holo .victory-box,
  body.holo .bug-box,
  body.holo .popup-title,
  body.holo .popup-section-label,
  body.holo .popup-subtitle,
  body.holo .popup-desc,
  body.holo .popup-section-text,
  body.holo .popup-power,
  body.holo .confirm-text,
  body.holo .confirm-title,
  body.holo .bug-box p,
  body.holo .bug-box label,
  body.holo .bug-note {
    background: #ffffff !important;
    backdrop-filter: none !important;
  }
  /* Boîtes popup/confirm/victory : fond blanc pur, bordure visible */
  body.holo .popup       { background: #ffffff !important; border-color: rgba(80,100,130,.25) !important; }
  body.holo .confirm-box { background: #ffffff !important; border-color: rgba(80,100,130,.25) !important; }
  body.holo .victory-box { background: #ffffff !important; border-color: rgba(80,100,130,.25) !important; }
  /* Overlays : fond assombri semi-transparent (backdrop de navigation) */
  body.holo .popup-overlay,
  body.holo .confirm-overlay,
  body.holo .victory-overlay {
    background: rgba(100,120,140,.50) !important;
    backdrop-filter: blur(4px) !important;
  }
  body.holo .popup-close { color: var(--holo-close) !important; }
  body.holo .popup-close:hover { color: var(--gold) !important; }
  body.holo .popup-header { border-bottom-color: rgba(80,100,130,.28) !important; }

  /* ── Victoire HOLO ── */
  body.holo .victory-reason { color: var(--holo-text-soft) !important; }
  body.holo .victory-resume { color: var(--holo-text-mid) !important; }
  body.holo .btn-victory {
    border-color: var(--gold) !important;
    color: var(--gold) !important;
  }
  body.holo .btn-victory:hover {
    background: var(--gold) !important;
    color: #fff !important;
  }

  /* ── Confirm HOLO ── */
  body.holo .confirm-btn {
    background: rgba(255,255,255,.32) !important;
    border: 1px solid rgba(80,100,130,.30) !important;
    color: var(--holo-text-soft) !important;
  }
  body.holo .confirm-btn.confirm-ok {
    border-color: var(--gold) !important;
    color: var(--gold) !important;
  }
  body.holo .confirm-btn.confirm-ok:hover {
    background: var(--gold) !important;
    color: #fff !important;
  }
  /* Boutons .btn à l'intérieur des popups holo : bordure visible sur fond blanc */
  body.holo .popup .btn:not(.btn-icon-sq) {
    border-color: rgba(80,100,130,.30) !important;
  }
  body.holo .popup .btn:not(.btn-icon-sq):hover:not(:disabled) {
    border-color: var(--gold) !important;
  }
  body.holo .popup .btn:not(.btn-icon-sq).active {
    border-color: var(--gold) !important;
  }

/* ══ 3. RESET & BASE ══════════════════════════════════════════ */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  /* ── Tailles de case (dépendent du viewport — séparées du bloc couleur) ──
     Le plateau fait 10 colonnes + 2 colonnes capture + séparateurs + padding.
     Formule vw : cell = (100vw - 80px) / 12.4, max 46px.
     C'est le plateau qui dicte sa taille — header et légende s'adaptent. ── */
  :root {
    --cell: clamp(26px, calc((100vw - 80px) / 12.4), 46px);
    --piece-size: calc(var(--cell) * .74);
    --cap-cell: calc(var(--cell) * .85);
    --cap-col-w: var(--cell);
  }

  body {
    background: var(--bg);
    background-image:
      radial-gradient(ellipse 130% 110% at 50% 50%,
        rgba(90,120,165,1)  0%,
        rgba(60,82,115,.90) 30%,
        rgba(30,40,62,.55)  60%,
        rgba(14,16,24,0)    85%
      );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: 'Rajdhani', sans-serif;
    gap: clamp(6px, 1.5vw, 14px);
    padding: clamp(8px, 2vw, 24px);
    /* overflow-x retiré du body — il peut confiner les position:fixed sur certains navigateurs */
  }

/* ══ 4. LAYOUT ════════════════════════════════════════════════ */
  /* ── Header avec boutons positionnés aux bords ── */
  .header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* S'adapte à la largeur du plateau plutôt que d'imposer une largeur fixe */
    width: 100%;
    max-width: calc(var(--cell) * 12 + 80px); /* 12 col (plateau+captures) + marges latérales */
    padding: 6px 16px;
  }
  /* Groupe gauche : boutons undo/redo */
  .header-left-group {
    display: flex; align-items: center; gap: 4px;
    flex: 1;
  }
  .header-center {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    flex: 2; min-width: 0; text-align: center;
  }
  .header-center h1 {
    white-space: nowrap; overflow: visible;
  }
  .btn-corner {
    position: relative;
    transform: none;
  }
  /* Groupe boutons droits header : flex avec gap 4px */
  .header-right-group {
    display: flex; align-items: center; gap: 4px;
    flex: 1; justify-content: flex-end;
  }

  /* Bouton icône carré — taille identique pour Bug, Save et Menu */
  .btn-icon-sq {
    position: relative;
    width: clamp(30px, 5vw, 36px) !important;
    height: clamp(30px, 5vw, 36px) !important;
    padding: 0 !important;
    border-color: transparent !important;
    background: transparent !important;
    font-size: 1.15rem;
    color: var(--text); /* couleur bleue #8aaabf pour tous les icônes */
    flex-shrink: 0;
  }
  /* Burger menu en blanc (plus visible) */
  .btn-icon-sq.btn-settings { font-size: 1.35rem; color: var(--text2) !important; }
  /* Save, Bug, Play, WatchIaMove : blanc au repos */
  #btnSave, #btnBug, #btnReplayLast, #btnWatchIaMove { color: rgba(255,255,255,.70); }
  /* Hover : couleur or/vert, sans bordure — sauf replay inactif */
  .btn-icon-sq:hover:not(:disabled):not(.replay-inactive) {
    color: var(--gold) !important;
    border-color: transparent !important;
    background: transparent !important;
  }
  /* Bouton impression dans les popups Règles et Guide : sans bordure, aligné à droite */
  .btn-print {
    background: transparent !important;
    border: none !important;
    color: var(--text2);
    cursor: pointer;
    padding: 4px;
    margin-left: auto;
    display: flex; align-items: center;
    flex-shrink: 0;
    transition: color .15s;
  }
  .btn-print:hover { color: var(--gold); }
  /* Les SVG dans les boutons header : taille augmentée */
  .btn-icon-sq svg { width: 1.35em !important; height: 1.35em !important; }

  /* ── Bouton Replay actif (mode replay en cours) ── */
  .btn-icon-sq.replay-active svg {
    color: var(--gold) !important;
    fill: var(--gold) !important;
  }
  .btn-icon-sq.replay-active {
    color: var(--gold) !important;
    opacity: 1 !important;
  }
  /* Bouton replay inactif : grisé, survol autorisé pour le tooltip */
  .btn-icon-sq.replay-inactive {
    opacity: .4 !important;
    cursor: default !important;
  }
  /* ── Barre de contrôle replay : clignotement jusqu'au premier clic ── */
  @keyframes replayBarBlink {
    0%,100% { border-top-color: var(--border2); }
    50%      { border-top-color: var(--gold); }
  }
  #replayControls { border-top: 2px solid var(--border2); }
  #replayControls.blink { animation: replayBarBlink 1.2s ease-in-out infinite; }

  /* Tooltips header — desktop only, non tactile */
  .header-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg2);
    border: 1px solid var(--border2);
    border-radius: 4px;
    padding: 5px 10px;
    font-family: 'Orbitron', monospace;
    font-size: .62rem;
    letter-spacing: .12em;
    color: var(--text2);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s;
    z-index: 9999;
  }
  /* Affichage au hover ET quand la classe .show est posée.
     :disabled inclus explicitement : pointer-events réactivés pour permettre le hover. */
  .btn-corner:disabled { pointer-events: auto; cursor: default; }
  @media (hover: hover) and (pointer: fine) {
    .btn-corner:hover .header-tooltip,
    .btn-corner.tooltip-show .header-tooltip,
    .btn-icon-sq:hover .header-tooltip { opacity: 1; transform: translateY(0); }
  }

  /* Panneau replay fixé en bas */
  #replayControls {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--bg2);
    user-select: none;
    z-index: 150; align-items: center; justify-content: center;
    gap: 12px; padding: 8px 14px; flex-wrap: wrap;
  }
  /* Groupe nav flèches : espace réduit entre les 3 boutons */
  .rp-nav-group { display: flex; align-items: center; gap: 2px; }
  #replayControls.open { display: flex; }
  /* Supprime l'outline bleu natif du navigateur sur tous les boutons */
  button { outline: none; }
  button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  #replayControls .btn-rp {
    font-family: 'Orbitron', monospace;
    font-size: .65rem; letter-spacing: .12em;
    padding: 8px 14px; border-radius: 4px;
    border: 1px solid var(--border2); color: var(--text);
    background: transparent; cursor: pointer;
    transition: all .15s; white-space: nowrap;
  }
  #replayControls .btn-rp:hover { border-color: var(--gold); color: var(--gold); }
  #replayControls .btn-rp:disabled { opacity: .3; cursor: default; }
  #replayControls .btn-rp-stop {
    margin-left: 8px; border-color: rgba(255,100,100,.4); color: rgba(255,100,100,.6);
  }
  #replayControls .btn-rp-stop:hover { border-color: var(--danger); color: var(--danger); }
  #replayControls .btn-rp-play { min-width: 38px; }

  /* Vitesses de lecture */
  .rp-speeds { display: flex; gap: 4px; align-items: center; }
  .rp-speed {
    font-family: 'Orbitron', monospace !important;
    font-size: .48rem !important; padding: 6px 9px !important;
    opacity: .5;
  }
  .rp-speed.active { opacity: 1; border-color: var(--gold) !important; color: var(--gold) !important; }

  /* Wrapper bouton+tooltip pour replay */
  .rp-btn-wrap { position: relative; display: inline-flex; }
  .rp-tooltip {
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.9); border: 1px solid var(--border2);
    color: var(--text2); font-family: 'Rajdhani', sans-serif;
    font-size: .8rem; letter-spacing: .08em;
    padding: 4px 10px; border-radius: 3px;
    white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity .15s;
    z-index: 9999;
  }
  .rp-btn-wrap:hover .rp-tooltip { opacity: 1; }

  #replayControls .rp-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: .88rem; color: var(--text2); letter-spacing: .08em;
    min-width: 70px; text-align: center;
  }

  /* Popups sauvegarde / chargement replay */
  #saveOverlay, #replayLoadOverlay {
    display: none; position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1000; align-items: center; justify-content: center;
  }
  .save-btn-row {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  }
  .save-btn-row .btn-rp {
    font-family: 'Orbitron', monospace; font-size: .65rem; letter-spacing: .12em;
    padding: 10px 18px; border-radius: 4px;
    border: 1px solid var(--border2); color: var(--text);
    background: transparent; cursor: pointer; transition: all .15s; white-space: nowrap;
  }
  .save-btn-row .btn-rp:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
  .save-btn-row .btn-rp:disabled { opacity: .3; cursor: default; }
  /* Masque uniquement le contenu (pièce) d'une case source pendant l'animation.
     Le fond de couleur (::before) reste visible — la case ne change pas d'aspect. */
  .cell.piece-animating > * { visibility: hidden; }
  #saveTextarea { min-height: 180px; }

  /* Bouton ENVOYER bug : couleur gold distinctive, taille identique aux boutons victory */
  #btnBugSend {
    border-color: var(--gold) !important;
    color: var(--gold) !important;
    font-family: 'Orbitron', monospace;
    font-size: .65rem; letter-spacing: .12em;
    padding: 14px 28px;
    border-radius: 4px;
    background: transparent; cursor: pointer;
    transition: all .15s; white-space: nowrap;
  }
  #btnBugSend svg { width: 1.4em !important; height: 1.4em !important; }
  #btnBugSend:hover { background: var(--gold) !important; color: var(--bg) !important; }

  /* Popup signalement bug */
  /* bugOverlay utilise maintenant .popup-overlay standard — on garde juste les surcharges internes */
  .bug-box {
    display: flex; flex-direction: column; gap: 14px;
  }
  .bug-field label { font-family:'Rajdhani',sans-serif; font-size:.88rem; color:var(--text2); letter-spacing:.08em; display:block; margin-bottom:5px; }
  .bug-field textarea, .bug-field input[type=text], .bug-field input[type=email] {
    width:100%; box-sizing:border-box; background:var(--lightgold); border:1px solid var(--border2);
    color:var(--text); font-family:'Rajdhani',sans-serif; font-size:1rem;
    border-radius:4px; padding:8px 10px;
  }
  .bug-field textarea { height:80px; resize:none; }
  .bug-radio-row { display:flex; gap:8px; flex-wrap:wrap; }
  .bug-box .radio-opt {
    font-family:'Rajdhani',sans-serif; font-size:.96rem; letter-spacing:.03em;
    text-transform: none;
    padding:6px 12px; border:1px solid var(--border2); border-radius:4px;
    cursor:pointer; color: rgba(255,255,255,.90); transition:all .15s; user-select:none;
  }
  .bug-box .radio-opt.active { border-color:var(--gold); color:var(--gold); }
  .bug-field textarea::placeholder,
  .bug-field input::placeholder { color: rgba(255,255,255,.40); }
  /* Holo : placeholder sombre sur fond clair — les deux sélecteurs ont le préfixe body.holo */
  body.holo .bug-field textarea::placeholder,
  body.holo .bug-field input::placeholder { color: rgba(0,0,0,.50); }
  .bug-sub { display:none; margin-top:6px; }
  .bug-sub.open { display:block; }
  .bug-two-col { display:flex; gap:10px; }
  .bug-two-col .bug-field { flex:1; }
  .bug-note { font-family:'Rajdhani',sans-serif; font-size:.95rem; line-height:1.5; color:var(--text2); opacity:.65; }
  #bugSentMsg { display:none; color:var(--success); font-family:'Orbitron',monospace; font-size:.68rem; letter-spacing:.15em; text-align:center; }
  .bug-box .btn-rp:hover { border-color: var(--gold) !important; color: var(--gold) !important; }
  h1 {
    font-family: 'Orbitron', monospace;
    font-weight: 900;
    font-size: clamp(1rem, 3.5vw, 2rem);
    letter-spacing: .3em;
    /* Dégradé magenta → cyan identique au splash */
    background: linear-gradient(135deg, var(--anima), var(--machina));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 14px rgba(0,204,255,.25));
    text-transform: uppercase;
    text-align: center;
  }
  .slogan {
    font-size: clamp(.6rem, 3vw, 1rem);
    letter-spacing: .1rem;
    color: var(--text);
    text-transform: uppercase;
    text-align: center;
  }

  /* ── Clan labels avec status centré ── */
  .clan-labels {
    display: flex; justify-content: space-between; align-items: center;
    /* Suit exactement la largeur du plateau (10 colonnes + 2 captures + marges) */
    width: calc(var(--cell) * 12 + 40px);
    max-width: 100%;
    font-family: 'Orbitron', monospace;
    font-size: clamp(.5rem, 1.5vw, .72rem); letter-spacing: .2em;
  }
  #status {
    font-family: 'Orbitron', monospace;
    font-size: clamp(.52rem, 1.5vw, .72rem);
    letter-spacing: .06em;
    color: var(--text2);
    flex: 1;
    text-align: center;
  }

  /* ── Boutons ── */
  .btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 4px;
    color: rgba(255,255,255,.65);
    font-family: 'Orbitron', monospace;
    font-size: clamp(.7rem, 2vw, 1rem);
    padding: clamp(2px, 1.5vw, 6px);
    cursor: pointer;
    transition: all .18s;
    letter-spacing: .03em;
    line-height: 1;
    height: clamp(26px, 4vw, 32px);
    display: flex; align-items: center; justify-content: center;
  }
  .btn:hover:not(:disabled) {
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 0 7px var(--gold);
  }
  /* Boutons icônes header : pas de halo au hover */
  .btn-icon-sq:hover:not(:disabled) { box-shadow: none !important; }
  .btn:disabled { opacity: .40; cursor: default; }

  /* Boutons DARK / HOLO */
  .btn-dark, .btn-holo {
    font-size: .70rem;
    letter-spacing: .1em;
    padding: 4px 10px;
  }
  .btn-dark.active, .btn-holo.active {
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 0 8px var(--gold);
    opacity: 1;
  }
  .btn-reset { font-size: 1.15rem; }
  .btn-help {
    font-size: .85rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 50%;
    width: 32px; height: 32px;
  }
  .btn-settings {
    font-size: 1.35rem;
    border-color: transparent !important;
    color: rgba(255,255,255,.70);
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
  }
  /* Remonte légèrement le glyphe ☰ sans toucher aux dimensions du bouton */
  .btn-settings > :first-child { transform: translateY(-2px); display: inline-block; line-height: .75; }

  /* ── Drawer paramètres ── */
  .drawer-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 699;
  }
  .drawer-overlay.open { display: block; }

  .drawer {
    position: fixed;
    top: 0; right: 0;
    width: 300px; height: 100vh;
    background: var(--bg2);
    border-left: 1px solid var(--border2);
    box-shadow: -8px 0 32px rgba(0,0,0,.7);
    z-index: 700;
    display: flex; flex-direction: column;
    transform: translateX(320px);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
  }
  .drawer.open { transform: translateX(0); }

  .drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 20px 14px;
    border-bottom: 1px solid var(--border2);
    flex-shrink: 0;
  }
  .drawer-title {
    font-family: 'Orbitron', monospace;
    font-size: .72rem; letter-spacing: .3em;
    color: var(--gold);
  }
  .drawer-close {
    background: none; border: none;
    color: var(--text); font-size: 1rem;
    cursor: pointer; line-height: 1;
    transition: color .15s;
  }
  .drawer-close:hover { color: var(--gold); }

  /* Drapeaux de langue dans le header du drawer */
  .drawer-lang-flags {
    display: flex; gap: 6px; margin-left: auto; margin-right: 10px;
  }
  .drawer-flag {
    background: none; border: none; cursor: pointer;
    font-size: 1.05rem; line-height: 1; padding: 2px;
    filter: grayscale(1);
    transition: filter .15s;
    border-radius: 3px;
  }
  .drawer-flag:hover,
  .drawer-flag.active { filter: none; }

  .drawer-body {
    display: flex; flex-direction: column;
    padding: 16px 16px 40px; gap: 24px;
    flex: 1;
    overflow-y: auto;
    /* Espace bas : compense la barre de navigation du navigateur sur iOS */
    padding-bottom: max(40px, env(safe-area-inset-bottom, 40px) + 24px);
  }
  .drawer-section { display: flex; flex-direction: column; gap: 10px; }
  .drawer-section-label {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600; font-size: .88rem;
    letter-spacing: .2em; color: var(--text);
    text-transform: uppercase;
  }
  .drawer-row { display: flex; gap: 8px; }
  .drawer-col { display: flex; flex-direction: column; gap: 6px; }

  .drawer-btn {
    font-size: .66rem !important;
    letter-spacing: .1em;
    justify-content: flex-start !important;
    padding: 8px !important;
    height: auto !important;
    width: 100%;
    text-align: left;
    margin-top: 4px;
  }
  .drawer-btn:disabled { opacity: .4!important; cursor: default; }
  .drawer-toggle {
    border-color: var(--gold) !important;
    color: var(--gold) !important;
  }
  .drawer-toggle.off {
    border-color: rgba(255,255,255,.22) !important;
    color: rgba(255,255,255,.45) !important;
  }

  /* HOLO overrides */
  body.holo .drawer {
    background: rgba(255,255,255,0.6) !important;
    border-left-color: rgba(255,255,255,1) !important;
    box-shadow: -8px 0 32px rgba(0,30,60,.18) !important;
    backdrop-filter: blur(20px) !important;
  }
  body.holo .drawer-title { color: var(--gold) !important; font-weight:900}
  body.holo .drawer-close { color: var(--holo-close) !important; }
  body.holo .drawer-close:hover { color: var(--gold) !important; }
  body.holo .drawer-section-label { color: #000f28 !important; opacity: 1 !important; }
  body.holo .drawer-overlay { background: rgba(130,150,170,.35) !important; }

  /* HOLO : radio-opt clan/niveau — forcer couleurs Cyan/Magenta */
  body.holo .radio-opt.opt-anima.active   { color: var(--anima)   !important; opacity: 1 !important; }
  body.holo .radio-opt.opt-machina.active { color: var(--machina) !important; opacity: 1 !important; }
  body.holo .radio-opt.opt-disc.active    { color: var(--disciple) !important; opacity: 1 !important; }
  body.holo .radio-opt.opt-master.active  { color: var(--master) !important; opacity: 1 !important; }
  body.holo .radio-opt.opt-oracle.active  { color: var(--oracle) !important; opacity: 1 !important; }
  body.holo .radio-opt {opacity: 1 !important; }
  body.holo .radio-opt.active { font-weight: bold; text-shadow:1px 1px 1px rgba(0, 0, 0, 0.3)}
  body.holo .radio-row-label { color: #000f28 !important; }

  /* Mobile : drawer depuis le haut à droite */
  @media (max-width: 600px) {
    .slogan { display: none; } /* trop étroit — masqué sur mobile */
    .drawer {
      top: 0; right: 0; left: auto; bottom: auto;
      width: 95%; max-width: 300px; height: 100dvh;
      border-left: 1px solid var(--border2);
      border-bottom: none;
      border-top: none; border-right: none;
      border-radius: 0;
      box-shadow: -8px 0 32px rgba(0,0,0,.7);
      transform: translateX(110%);
      transition: transform .28s cubic-bezier(.4,0,.2,1);
    }
    .drawer.open { transform: translateX(0); }
  }

/* ══ 5. PLATEAU ═══════════════════════════════════════════════ */
  /* ── Layout plateau unifié ── */
  .game-area { display: block; }
  .board-wrap {
    position: relative;
    padding: clamp(14px, 2vw, 22px) clamp(4px, 1vw, 12px);
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg2);
    box-shadow: 0 0 30px rgba(0,0,0,.8), 0 0 1px var(--border2) inset;
  }
  .board-unified {
    display: flex;
    align-items: center;
    gap: 0;
  }
  .capture-col-left, .capture-col-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--cell) * .15);
    width: var(--cap-col-w);
  }
  .cap-sep {
    width: clamp(10px, 2vw, 24px);
    align-self: stretch;
    flex-shrink: 0;
  }
  .capture-cell {
    width: var(--cap-cell); height: var(--cap-cell);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  /* Colonnes capture : couleur inversée par rapport à l'équipe affichée */
  .capture-col-left.team-a  .capture-cell,
  .capture-col-right.team-a .capture-cell { border-color: rgba(0,204,255,.22); }
  .capture-col-left.team-b  .capture-cell,
  .capture-col-right.team-b .capture-cell { border-color: rgba(255,68,204,.22); }
  .capture-cell svg { width: calc(var(--cap-cell) * .75); height: calc(var(--cap-cell) * .75); opacity: .6; }

  /* Bordures de camp supprimées */
  .board {
    display: grid;
    grid-template-columns: repeat(10, var(--cell));
    grid-template-rows:    repeat(12, var(--cell));
    gap: 1px;
    /* Fond transparent : les cases rondes flottent sur le board-wrap */
    background: transparent;
  }

  /* ── Cases : fond transparent, le rond est un pseudo-élément ── */
  .cell {
    display: flex; align-items: center; justify-content: center;
    position: relative; cursor: default;
    background: transparent !important;
    transition: none;
  }

  /* Pseudo-élément circulaire : le "rond" visible */
  .cell::before {
    content: '';
    position: absolute;
    /* 82% de la taille de la case pour laisser un espace entre les ronds */
    width:  82%; height: 82%;
    border-radius: 50%;
    transition: background .2s, box-shadow .2s;
    pointer-events: none;
    z-index: 0;
  }

  /* Couleurs des ronds */
  .c-light::before  { background: var(--cell-light); }
  .c-dark::before   { background: var(--cell-dark); }
  .c-gate-l::before { background: var(--gate-l); }
  .c-gate-d::before { background: var(--gate-d); }
  /* Cases VOID : on masque le rond individuel, le grand cercle SVG le remplace */
  .c-void::before { display: none !important; }
  /* Cases vides de la croix : pas de rond */
  .c-empty {
    background: transparent !important;
    border: none !important;
    pointer-events: none;
    box-shadow: none !important;
    margin: -1px;
    z-index: 1;
  }
  .c-empty::before { display: none; }

  /* Les pièces et indicateurs passent au-dessus du rond */
  .cell .piece, .cell .piece-b { position: relative; z-index: 2; }

  /* ── Bordures de camp (modifiées par JS lors du flip plateau) ── */
  :root {
    --border-top: #00ccff;   /* MACHINA en haut par défaut */
    --border-bot: #ff44cc;   /* ANIMA en bas par défaut */
  }

  /* Sélection : halo sur le rond */
  .selected::before {
    box-shadow: 0 0 0 2px var(--selected-outline), 0 0 10px var(--selected-outline) !important;
  }

  /* Cibles */
  .target        { cursor: pointer; }
  .target::before { box-shadow: 0 0 0 2px var(--target-dot) inset, 0 0 8px var(--target-dot) !important; }

  .target::after, .target-atk::after, .target-gate::after {
    content: ''; position: absolute;
    width: 8px; height: 8px; border-radius: 50%;
    pointer-events: none;
    z-index: 3;
  }
  .target::after      { background: var(--target-dot);  box-shadow: 0 0 6px var(--target-dot); }
  .target-atk         { cursor: pointer; }
  .target-atk::before { box-shadow: 0 0 0 2px var(--target-atk) inset, 0 0 8px var(--target-atk) !important; }
  .target-atk::after  { background: var(--target-atk);  box-shadow: 0 0 6px var(--target-atk); }
  .target-gate        { cursor: pointer; }
  .target-gate::before{ box-shadow: 0 0 0 2px var(--target-gate) inset, 0 0 8px var(--target-gate) !important; }
  .target-gate::after { background: var(--target-gate); box-shadow: 0 0 6px var(--target-gate); }

  /* Pièces */
  .piece { width: var(--piece-size); height: var(--piece-size); pointer-events: none;
		filter:
      		drop-shadow(0 3px 7px rgba(0,0,0,.58))
      		drop-shadow(0 1px 3px rgba(0,0,0,.40));
}

  /* Animation boop : petit zoom aller-retour au clic */
  @keyframes boop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.32); }
    65%  { transform: scale(0.88); }
    100% { transform: scale(1); }
  }
  .boop .piece { animation: boop .28s cubic-bezier(.36,.07,.19,.97) both; }
  .used .piece { opacity: .35; filter: grayscale(.5); }

  /* Ghost en VOID : semi-transparent, centré sur les 2 cases du VOID */
  .ghost-void .piece, .ghost-void .piece-b {
    opacity: .55;
    transform: translateX(calc(var(--cell) * .5));
  }
  /* Ghost VOID ligne du haut : pousser vers le bas pour centrer dans le grand cercle */
  .ghost-void-top .piece, .ghost-void-top .piece-b {
    opacity: .55;
    transform: translate(calc(var(--cell) * .5), calc(var(--cell) * .5));
  }
  /* Ghost VOID ligne du bas : pousser vers le haut pour centrer dans le grand cercle */
  .ghost-void-bot .piece, .ghost-void-bot .piece-b {
    opacity: .55;
    transform: translate(calc(var(--cell) * .5), calc(var(--cell) * -.5));
  }

  /* Ghost en attente de résurrection : pulsation */
  @keyframes ghostPulse {
    0%   { opacity: .55; }
    50%  { opacity: 1;   }
    100% { opacity: .55; }
  }
  .ghost-resurr .piece {
    animation: ghostPulse .7s ease-in-out infinite;
  }

  /* ── Grand cercle VOID unique ── */
  /* Conteneur positionné par-dessus le plateau */
  #voidOverlay {
    position: absolute;
    pointer-events: none;
    z-index: 5;
  }

  /* Le grand cercle SVG VOID */
  #voidCircle {
    position: absolute;
    pointer-events: none;
  }

  /* Les pièces dans le VOID passent au-dessus du grand cercle */
  .c-void { position: relative; z-index: 6; background: transparent !important; }
  .c-void .piece { position: relative; z-index: 7; }

  /* ── Décalage visuel des pièces dans le VOID vers le centre du grand cercle ── */
  /* Cases gauches → pousser vers la droite (centre X), sans décalage vertical */
  .c-void[data-r="5"][data-c="4"] .piece { transform: translate(70%, 0%); }
  .c-void[data-r="6"][data-c="4"] .piece { transform: translate(70%, 0%); }
  /* Cases droites → pousser vers la gauche (centre X), sans décalage vertical */
  .c-void[data-r="5"][data-c="5"] .piece { transform: translate(-70%, 0%); }
  .c-void[data-r="6"][data-c="5"] .piece { transform: translate(-70%, 0%); }

  /* En mode FAF, piece-b est rotate(180deg) — l'axe X est inversé
     On surcharge avec les valeurs X opposées pour retrouver le bon centrage */
  .c-void[data-r="5"][data-c="4"] .piece-b .piece { transform: translate(-70%, 0%); }
  .c-void[data-r="6"][data-c="4"] .piece-b .piece { transform: translate(-70%, 0%); }
  .c-void[data-r="5"][data-c="5"] .piece-b .piece { transform: translate(70%, 0%); }
  .c-void[data-r="6"][data-c="5"] .piece-b .piece { transform: translate(70%, 0%); }

  /* ── Légende ── */
  .legend {
    display: flex; gap: clamp(6px, 2vw, 14px); flex-wrap: wrap; justify-content: center;
  }
  .legend-item {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    font-family: 'Orbitron', monospace;
    font-size: clamp(.45rem, 1.2vw, .58rem); letter-spacing: .1em; color: var(--text2);
    text-transform: uppercase;
    cursor: pointer;
    padding: clamp(4px, 1vw, 8px) clamp(4px, 1vw, 7px);
    border: 1px solid transparent;
    border-radius: 4px;
    transition: color .2s;
  }
  .legend-item:hover { border-color: transparent; color: #fff; }
  .legend-item svg { width: clamp(22px, 3.5vw, 32px); height: clamp(22px, 3.5vw, 32px); }
  .legend-role {
    font-family: 'Rajdhani', sans-serif;
    font-size: .75rem;
    color: var(--text2);
    opacity: .75;
    letter-spacing: .04em;
  }

/* ══ 6. MODE FACE-À-FACE ══════════════════════════════════════ */
  body.faf {
    padding: 0; gap: 0;
    justify-content: center; align-items: center;
    overflow: hidden; height: 100vh;
    --faf-strip-h: clamp(36px, 5.5vh, 48px);
    --faf-pad:     clamp(4px, .8vw, 8px);
    --cell: min(
      calc((100vh - var(--faf-strip-h)*2 - var(--faf-pad)*2 - 16px) / 12.2),
      calc((100vw - var(--faf-pad)*2 - 4px) / 10.2)
    );
    --piece-size: calc(var(--cell) * .74);
    --cap-cell:   calc(var(--cell) * .85);
    --cap-col-w:  var(--cell);
  }
  body.faf .header,
  body.faf .clan-labels,
  body.faf .legend,
  body.faf .capture-col-left,
  body.faf .capture-col-right,
  body.faf .cap-sep { display: none !important; }

  body.faf .faf-layout {
    display: flex; flex-direction: column;
    align-items: center;
    width: 100vw; height: 100vh;
    gap: 6px;
  }
  body:not(.faf) .faf-layout { display: contents; }

  /* ── Bandes joueurs ── */
  .faf-strip {
    display: none; width: 100%; flex-shrink: 0;
    height: var(--faf-strip-h, 42px);
    /* Grid 3 colonnes égales : flèches | nom équipe | menu */
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    padding: 0 8px;
  }
  body.faf .faf-strip { display: grid; }
  /* Colonne gauche : alignée à gauche */
  .faf-left  { display: flex; gap: 5px; justify-content: flex-start; }
  /* Colonne droite : alignée à droite */
  .faf-right { display: flex; gap: 5px; justify-content: flex-end; }
  .faf-strip-top {
    background: rgba(0,30,45,.75);
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    transform: rotate(180deg);
    transition: border-color .3s;
  }
  .faf-strip-bottom {
    background: rgba(40,0,30,.75);
    border-top: 1px solid transparent;
    transition: border-color .3s;
  }
  body.holo .faf-strip-top    { background: #ffffff; }
  body.holo .faf-strip-bottom { background: #ffffff; }
  /* HOLO : couleurs clan dans les bandes FaF — héritent maintenant de --anima/--machina */
  body.holo .faf-player-a { color: var(--anima);   text-shadow: 0 0 10px rgba(255,68,204,.45); }
  body.holo .faf-player-b { color: var(--machina); text-shadow: 0 0 10px rgba(0,204,255,.45); }

  /* Bande active : bordure fine + clignotement du NOM uniquement */
  @keyframes fafPulse {
    0%, 65% { opacity: 1; }
    85%, 100% { opacity: .35; }
  }
  /* La strip-top est rotate(180°) : border-top DOM = bord côté plateau visuellement */
  .faf-strip-top.faf-active {
    border-top: 1px solid rgba(0,204,255,.55);
    border-bottom: 1px solid transparent;
  }
  .faf-strip-bottom.faf-active {
    border-top: 1px solid rgba(255,68,204,.55);
  }
  /* Seul le nom clignote */
  .faf-strip-top.faf-active .faf-player,
  .faf-strip-bottom.faf-active .faf-player {
    animation: fafPulse 2.6s ease-in-out infinite;
  }

  .faf-player {
    font-family: 'Orbitron', monospace;
    font-size: clamp(.52rem, 1.8vw, .82rem);
    letter-spacing: .25em; font-weight: 700;
    flex: 1; text-align: center;
  }
  .faf-player-a { color: var(--anima);   text-shadow: 0 0 12px var(--anima); }
  .faf-player-b { color: var(--machina); text-shadow: 0 0 12px var(--machina); }

  /* Groupes de boutons dans les bandes */
  .faf-btn-group { display: flex; gap: 8px; flex-shrink: 0; margin-left:16px }

  /* Tooltip dans les bandes FAF — même visuel que .header-tooltip */
  .faf-tooltip {
    position: absolute;
    bottom: calc(100% + 6px); /* ANIMA : au-dessus du bouton vers le plateau */
    right: 0;
    background: var(--bg2);
    border: 1px solid var(--border2);
    border-radius: 4px;
    padding: 5px 10px;
    font-family: 'Orbitron', monospace;
    font-size: .62rem;
    letter-spacing: .12em;
    color: var(--text2);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .15s, transform .15s;
    z-index: 9999;
  }
  /* MACHINA (bande top rotate 180°) : tooltip vers le plateau, texte lu par MACHINA.
     Le strip est rotate(180deg) : bottom layout = dessous écran = vers le plateau.
     Pas de contre-rotation sur le texte : il reste retourné, lisible par MACHINA (côté opposé). */
  .faf-tooltip-b {
    top: auto;
    bottom: calc(100% + 6px);
    transform: translateY(-4px);
  }
  @media (hover: hover) and (pointer: fine) {
    .faf-btn:hover .faf-tooltip   { opacity: 1; transform: translateY(0); }
    .faf-btn:hover .faf-tooltip-b { opacity: 1; transform: translateY(0); }
  }
  /* HOLO : fond clair comme les autres tooltips */
  body.holo .faf-tooltip {
    background: #f4f6f8 !important;
    border-color: rgba(80,100,130,.30) !important;
    color: var(--holo-tooltip-text) !important;
  }

  .faf-btn {
    position: relative; /* ancrage pour .faf-tooltip */
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-family: 'Orbitron', monospace;
    font-size: clamp(.7rem, 2vw, 1.15rem);
    width: clamp(24px, 4vw, 28px);
    height: clamp(24px, 4vw, 28px);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; line-height: 1;
    transition: opacity .18s, background .18s;
    opacity: .9;
  }
  .faf-btn:hover:not(:disabled) { opacity: 1; }
  /* Bouton désactivé : hover autorisé pour afficher le tooltip (pointer-events réactivé) */
  .faf-btn:disabled { opacity: .4; cursor: default; pointer-events: auto; }
  .faf-btn-a { color: var(--anima); }
  .faf-btn-b { color: var(--machina); }
  /* Bouton ☰ dans les bandes FAF : sans bordure, picto plus grand */
  #btnSettingsA, #btnSettingsB {
    font-size: clamp(.95rem, 2.8vw, 1.35rem);
  }
  /* Burger ANIMA (bande bas) : centrage visuel */
  #btnSettingsA { padding-top: 1px; padding-bottom: 0; }
  /* Burger MACHINA (bande top, rotate 180°) : compensation du retournement */
  #btnSettingsB { padding-bottom: 1px; padding-top: 0; }
  /* Boutons replay/save dans les bandes FAF : sans bordure */
  .faf-btn-replay, .faf-btn-save,
  #btnSettingsA, #btnSettingsB {
    border-color: transparent !important;
    background: transparent !important;
  }
  .faf-btn-replay:hover:not(:disabled), .faf-btn-save:hover:not(:disabled),
  #btnSettingsA:hover:not(:disabled),
  #btnSettingsB:hover:not(:disabled) {
    background: transparent !important;
  }
  /* Hover garde la couleur d'équipe (dark et holo) */
  .faf-btn-a:hover:not(:disabled) { color: var(--anima)   !important; }
  .faf-btn-b:hover:not(:disabled) { color: var(--machina) !important; }

  /* Flèches undo/redo : courbe vers le haut (scaleY -1) */
  .arrow-undo, .arrow-redo {
    display: inline-block;
    line-height: 1;
  }
  /* Bande MACHINA rotate(180°) */
  body.ia #btnUndo, body.ia #btnRedo { display: none !important; }
  /* Bouton replay coup IA : forcer display en mode IA (le CSS défaut est none) */
  body.ia #btnWatchIaMove { display: inline-flex !important; }
  /* Bouton "revoir coup IA" : visible en mode IA uniquement (géré via style="display" en JS) */
  #btnWatchIaMove {
    display: none;          /* caché hors mode IA */
    opacity: .32;           /* grisé par défaut */
    cursor: default;        /* non clicable tant qu'aucun coup IA — hover gardé pour le tooltip */
    transition: opacity .3s;
    /* Bordure comme les boutons undo/redo + taille explicite */
    border: 1px solid rgba(255,255,255,.22) !important;
    width: clamp(30px, 5vw, 36px) !important;
    height: clamp(30px, 5vw, 36px) !important;
  }
  #btnWatchIaMove.ia-watch-ready {
    opacity: 1;
    cursor: pointer;
  }

  /* Affiche undo/redo dans les bandes FAF */
  body.faf #btnUndoA, body.faf #btnRedoA,
  body.faf #btnUndoB, body.faf #btnRedoB { display: flex !important; }

  /* Board-wrap FAF */
  body.faf .board-wrap {
    padding: var(--faf-pad);
    margin: 10px 0; /* espace entre les bandes joueurs et le plateau */
    flex: 1;
    display: flex; align-items: center; justify-content: center;
  }

  /* Pieces MACHINA pivotees a 180deg en mode FAF */
  body.faf .cell .piece-b { transform: rotate(180deg); display: inline-flex; }
  .used .piece-b { opacity: .35; filter: grayscale(.5); }
  /* Ghost VOID en FAF : après rotate(180°) les axes X et Y sont inversés —
     on inverse les décalages pour que le GHOST se centre correctement */
  body.faf .ghost-void .piece-b     { opacity: .55; transform: rotate(180deg) translateX(calc(var(--cell) * -.5)); }
  body.faf .ghost-void-top .piece-b { opacity: .55; transform: rotate(180deg) translate(calc(var(--cell) * -.5), calc(var(--cell) * -.5)); }
  body.faf .ghost-void-bot .piece-b { opacity: .55; transform: rotate(180deg) translate(calc(var(--cell) * -.5), calc(var(--cell) * .5)); }
  .ghost-resurr .piece-b { animation: ghostPulse .7s ease-in-out infinite; }

  /* Drawer MACHINA : s'ouvre depuis la gauche, contenu retourne a 180deg */
  body.faf .drawer-machina {
    left: -320px; right: auto;
    transform: none; /* annule le transform du .drawer de base — positionnement via left */
    border-left: none;
    border-right: 1px solid var(--border2);
    box-shadow: 8px 0 32px rgba(0,0,0,.7);
    transition: left .28s cubic-bezier(.4,0,.2,1);
  }
  body.faf .drawer-machina.open { left: 0; right: auto; }
  body.faf .drawer-machina .drawer-inner {
    transform: rotate(180deg);
    display: flex; flex-direction: column; height: 100%;
  }
  body.holo.faf .drawer-machina {
    border-right-color: rgba(255,255,255,.6) !important;
    box-shadow: 8px 0 32px rgba(0,30,60,.18) !important;
  }

/* ══ 7. RESPONSIVE MOBILE (≤ 768px) ══════════════════════════ */
  @media (max-width: 768px) {
    /* overflow:hidden sur html (pas body) — évite de casser position:fixed sur iOS */
    html { overflow: hidden; height: 100dvh; }
    body {
      padding: 0;
      gap: 0;
      align-items: stretch;
      justify-content: flex-start;
      height: 100dvh;
      min-height: unset;
      /* overflow:hidden retiré du body — il confinait les position:fixed (save, replay…) */
    }
    :root {
      /* Contrainte largeur : 12.4 colonnes dans 100vw
         Contrainte hauteur : 12 lignes + captures dans l'espace restant
         ~140px réservés pour header + clan-labels + légende */
      --cell: min(
        calc(100vw / 10.2),
        calc((100dvh - 140px) / 13.5)
      );
    }

    /* Header : dans le flux flex, pas sticky */
    .header {
      position: relative;
      background: var(--bg2);
      border-bottom: 1px solid var(--border2);
      width: 100%; max-width: 100%;
      padding: 4px 8px;
      box-sizing: border-box;
      flex-shrink: 0;
    }
    /* Boutons header plus compacts en mobile */
    .header-right-group { gap: 2px; }
    .header-left-group  { gap: 2px; }
    .btn-icon-sq {
      width: 28px !important;
      height: 28px !important;
    }

    /* Clan-labels : dans le flux, taille fixe */
    .clan-labels {
      width: 100%; max-width: 100%;
      padding: 6px 12px; box-sizing: border-box;
      font-size: .65rem;
      flex-shrink: 0;
    }

    /* Zone centrale de jeu : prend EXACTEMENT l'espace restant */
    .board-wrap {
      flex: 1;
      min-height: 0;
      width: 100%;
      box-sizing: border-box;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
      padding: 4px;
      margin: 0;
      border-left: none; border-right: none;
      border-radius: 0;
    }

    /* Captures : sous le plateau en rangée horizontale */
    .board-unified { flex-direction: column; gap: 8px; }
    .capture-col-left, .capture-col-right {
      flex-direction: row; width: auto; gap: calc(var(--cell) * .15);
    }
    .cap-sep { display: none; }

    /* Légende : dans le flux flex, pas sticky */
    .legend {
      position: static;
      background: var(--bg2);
      border-top: 1px solid var(--border2);
      width: 100%; box-sizing: border-box;
      padding: 3px 4px;
      gap: 2px;
      margin: 0;
      flex-shrink: 0;
    }
    .legend-item { padding: 3px 4px; }

    /* Masques en mode FAF — gardé tel quel */
    body.faf .header,
    body.faf .legend { position: static; background: transparent; border: none; }

    /* FAF mobile : hauteur fixe 100dvh, plateau compressé entre les deux bandes */
    body.faf {
      height: 100dvh;
      overflow: hidden;
      justify-content: space-between;
    }
    body.faf .faf-strip { flex-shrink: 0; }
    body.faf .board-wrap {
      flex: 1;
      overflow: hidden;
      min-height: 0;
    }

    /* Légende : sous-titre masqué pour gagner de la place */
    .legend-role { display: none; }
    /* Status agrandi */
    #status { font-size: .65rem; }
    /* Boutons DARK/HOLO : taille réduite mais visibles */
    .btn-dark, .btn-holo {
      font-size: .52rem !important;
      padding: 3px 6px !important;
      height: 24px !important;
    }
  }

/* ══ 8. COMPOSANTS UI ═════════════════════════════════════════ */
  /* ── Pop-up fiche pièce ── */
  .popup-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(3px);
    z-index: 100;
    align-items: center;
    justify-content: center;
  }
  .popup-overlay.open { display: flex; }
  #helpOverlay  { z-index: 600; }
  #aboutOverlay { z-index: 600; }
  .popup {
    position: relative;
    background: var(--bg2);
    border: 1px solid var(--border2);
    border-radius: 6px;
    padding: 32px 28px 24px;
    max-width: 380px; width: 90%;
    box-shadow: 0 0 40px rgba(0,0,0,.9);
    animation: popIn .15s ease;
  }
  @keyframes popIn { from{transform:scale(.93);opacity:0} to{transform:scale(1);opacity:1} }

  .popup-close {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,0.9);
    border: 1px solid var(--border2);
    color: var(--text); font-size: .85rem;
    cursor: pointer; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .15s, color .15s;
    position: absolute;
    top: -16px; right: -16px;
    z-index: 10;
  }
  body.holo .popup-close {
	  background: rgba(255,255,255,0.9);
}
  .popup-close:hover {
	  border-color: var(--gold); 
	  color: var(--gold); 
	  background: rgba(0,0,0,1) 
}
  body.holo .popup-close:hover {
	  background: rgba(255,255,255,1);
}
  /* Wrapper autour du popup : gère position du bouton close sans interférer avec le scroll */
  .popup-wrap {
    position: relative;
    display: flex; flex-direction: column;
    /* max(327px, calc(100vw - 48px)) laisse 24px de chaque côté → bouton ✕ à +8px de l'écran */
    width: min(92%, calc(100vw - 48px));
  }
  .popup-wrap .popup { max-width: 100%; width: 100%; }

  .popup-header {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border2);
  }
  /* Icône dans le header des popups — couleur verte vive (même que boutons actifs) */
  .popup-header-icon {
    color: var(--gold);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .popup-header-icon svg { width: 2rem; height: 2rem; }
  .popup-icon svg { width: 48px; height: 48px; }
  .popup-title {
    font-family: 'Orbitron', monospace;
    font-size: .92rem; font-weight: 700;
    color: var(--gold); letter-spacing: .2em;
  }
  .popup-subtitle {
    font-size: .82rem; color: var(--text);
    letter-spacing: .05em; margin-top: 3px;
    font-style: italic;
  }

  .popup-body { display: flex; flex-direction: column; gap: 16px; }
  .popup-desc {
    font-size: .95rem; color: var(--text2);
    line-height: 1.6;
  }
  .popup-section { display: flex; flex-direction: column; gap: 5px; }
  .popup-section-label {
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    font-size: .95rem; letter-spacing: .10em;
    color: var(--gold); text-transform: uppercase;
    margin-top: 4px;
  }
  /* Ligne titre + icône dans les règles */
  .help-label-row {
    display: flex; align-items: center;
    justify-content: space-between; gap: 8px;
  }
  .help-piece-icon { flex-shrink: 0; opacity: .75; display:flex; gap:4px; align-items:center; }
  .help-piece-icon svg { width: 36px; height: 36px; }
  /* Titre gris des items du guide */
  .guide-item-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1.05rem; letter-spacing: .06em;
    color: var(--text);
    margin-bottom: 5px;
    display: flex; align-items: center; gap: 6px;
    justify-content: flex-start;
  }
  .guide-item-title svg, .guide-item-title span { vertical-align: middle; }
  /* Label des items de sous-section dans le guide */
  .guide-item-label {
    font-size: .88rem;
    justify-content: flex-start;
    gap: 10px;
  }

  /* Icônes dans les titres du guide (popup-section-label) */
  #guideBody .popup-section-label svg {
    width: 1.5em !important;
    height: 1.5em !important;
    color: inherit; /* hérite --gold du parent */
  }
  /* Référence bouton inline dans le corps du guide — icône seule, sans couleur */
  .g-btn { display: inline; white-space: nowrap; }
  .g-btn svg { vertical-align: -0.15em; }
  .popup-section-text {
    font-size: 1rem; color: var(--text2); line-height: 1.6;
  }
  /* Séparateur de section dans les règles */
  .help-separator {
    display: flex; align-items: center; gap: 10px;
    margin: 20px 0 10px;
    font-family: 'Orbitron', monospace;
    font-size: .60rem; letter-spacing: .22em;
    color: var(--gold); opacity: .8;
  }
  .help-separator::before {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(to right, transparent, var(--gold));
  }
  .help-separator::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(to left, transparent, var(--gold));
  }
  .help-separator:first-child { margin-top: 0; }

  /* ── Classes extraites des styles inline JS ── */

  /* Copyright dans À propos (était copy.style.cssText) */
  .about-copyright {
    font-size: 1rem;
    color: var(--text2);
    margin-top: 8px;
  }

  /* Intro des règles (était intro.style.cssText) */
  .help-intro {
    margin-bottom: 4px;
    line-height: 1.7;
  }

  /* Liste "version actuelle" dans Nouveautés (était curList.style.cssText) */
  .news-current-list {
    margin: 0 0 4px 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .news-current-list li { opacity: .9; }

  /* Lien "Règles" dans la section finale du guide */
  .guide-rules-link {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .guide-rules-link:hover { opacity: .75; }

  /* Sous-titre de section dans le guide (était subEl.style.cssText) */
  .guide-section-sub {
    margin-top: -6px;
    margin-bottom: 10px;
    opacity: .65;
  }

  /* Label version dans l'historique Nouveautés (était style inline dans innerHTML) */
  .news-history-label {
    font-size: .72rem;
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .news-history-label-version {
    color: var(--machina);
    opacity: .7;
  }
  .news-history-text { opacity: .78; }

  /* Liens dans les popups À propos (était style inline) */
  .popup-link {
    color: var(--gold);
    text-decoration: none;
  }
  .popup-link:hover { text-decoration: underline; }
  /* ── Noms de pièces cliquables dans les règles ── */
  .piece-chip {
    display: inline-flex; align-items: center; gap: 4px;
    border-bottom: 1px solid rgba(45,216,160,.5);
    cursor: default;
    position: relative;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
  }
  .piece-chip-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%; transform: translateX(-50%);
    background: var(--bg2);
    border: 1px solid var(--border2);
    border-radius: 6px;
    padding: 6px;
    z-index: 800;
    pointer-events: none;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.5));
  }
  .piece-chip-tooltip svg { width: 32px; height: 32px; display: block; }
  /* Desktop : hover ; mobile : class .open toggled via JS */
  @media (hover: hover) {
    .piece-chip:hover .piece-chip-tooltip { display: block; }
  }
  .piece-chip.open .piece-chip-tooltip { display: block; }
  .help-lore {
    display: block; margin-top: 8px;
    font-style: italic;
    color: var(--text2); opacity: .6;
    font-size: .95rem; line-height: 1.55;
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: .01em;
  }
  .popup-power {
    background: rgba(255,255,255,.03);
    border-left: 2px solid var(--gold);
    padding: 8px 12px;
    border-radius: 0 4px 4px 0;
    font-size: 1rem; color: var(--text2); line-height: 1.55;
  }

  .clan-a { color: var(--anima); text-shadow: 0 0 8px var(--anima); }
  .clan-b { color: var(--machina); text-shadow: 0 0 8px var(--machina); }
  /* Clignotement du clan actif (mode IA et SOLO/DUO — pas FaF) */
  @keyframes turnBlink {
    0%, 65% { opacity: 1; }
    85%, 100% { opacity: .45; }
  }
  .clan-turn-active { animation: turnBlink 2.6s ease-in-out infinite; }

  /* Bouton interversion plateau */
  .btn-flip {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: filter .2s, transform .15s;
    line-height: 1;
    font-family: 'Orbitron', monospace;
    font-size: .9rem;
  }
  .btn-flip:hover { filter: brightness(1.5); transform: scale(1.1); }
  .btn-flip .arrow-a { color: var(--anima);   text-shadow: 0 0 8px var(--anima); }
  .btn-flip .arrow-b { color: var(--machina); text-shadow: 0 0 8px var(--machina); }

  /* ── Écran de victoire ── */
  .victory-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.85);
    backdrop-filter: blur(6px);
    z-index: 200;
    align-items: center;
    justify-content: center;
  }
  .victory-overlay.open { display: flex; }
  .victory-box {
    display: flex; flex-direction: column; align-items: center;
    gap: 14px;
    padding: 36px 36px 32px;
    border: 1px solid var(--border2);
    border-radius: 8px;
    background: var(--bg2);
    box-shadow: 0 0 60px rgba(0,0,0,.95);
    animation: popIn .2s ease;
    text-align: center;
    max-width: 420px; width: 90%;
    position: relative; /* ancre le bouton ✕ en position absolue */
  }
  /* L'overlay scrolle si le contenu dépasse la hauteur d'écran */
  .victory-overlay.open {
    overflow-y: auto;
    align-items: flex-start;
    padding: 32px 0;
  }
  .victory-clan {
    font-family: 'Orbitron', monospace;
    font-size: 2rem; font-weight: 900;
    letter-spacing: .15em;
    line-height: 1.1;
  }
  .victory-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: .75rem; letter-spacing: .35em;
    text-transform: uppercase; opacity: .65;
    margin-top: 4px;
  }
  .victory-divider {
    width: 60%; height: 1px;
    background: var(--border2);
    margin: 4px 0;
  }
  .victory-section-label {
    font-family: 'Orbitron', monospace;
    font-size: .75rem; letter-spacing: .25em;
    color: var(--text2); opacity: .5;
    text-transform: uppercase;
    width: 100%; text-align: center;
    border-top: 1px solid var(--border2);
    padding-top: 16px;
    margin-top: 4px;
  }
  .victory-resume {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem; color: var(--text2);
    letter-spacing: .04em; line-height: 1.75;
    text-align: center;
  }
  .victory-ia-phrase {
    font-family: 'Rajdhani', sans-serif;
    font-size: .95rem; color: var(--text2);
    font-style: italic; letter-spacing: .03em;
    text-align: center; opacity: .85;
    min-height: 1.4em;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .victory-ia-phrase:empty {
    display: none;
  }
  .btn-victory {
    font-family: 'Orbitron', monospace;
    font-size: .68rem; letter-spacing: .2em;
    padding: 12px 24px; border-radius: 4px;
    border: 1px solid var(--gold); color: var(--gold);
    background: transparent; cursor: pointer;
    transition: all .2s;
  }
  .btn-victory:hover { background: var(--gold); color: var(--bg); }
  /* Rangée de 4 boutons icônes */
  .victory-icon-row {
    display: flex; gap: 10px; justify-content: center;
    margin-top: 4px;
  }
  .victory-icon-wrap {
    position: relative; display: flex;
  }
  .btn-victory-icon {
    width: 40px; height: 40px;
    border: 1px solid var(--border2);
    background: transparent; cursor: pointer;
    border-radius: 4px; color: var(--text2);
    display: flex; align-items: center; justify-content: center;
    transition: all .2s;
  }
  .btn-victory-icon:hover { border-color: var(--gold); color: var(--gold); }
  .btn-victory-icon svg { width: 18px; height: 18px; }
  .btn-victory-icon.saved { border-color: var(--gold); color: var(--gold); opacity: .55; cursor: default; }

  /* Tooltip sur boutons icônes victoire */
  .victory-icon-tip {
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.92); border: 1px solid var(--border2);
    color: var(--text2); font-family: 'Rajdhani', sans-serif;
    font-size: .75rem; letter-spacing: .04em;
    padding: 4px 10px; border-radius: 3px;
    white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity .15s;
    text-align: center;
  }
  .victory-icon-wrap:hover > .victory-icon-tip { opacity: 1; }

  /* Message de feedback (mémorisé, déjà mémorisé, copié…) */
  .victory-feedback {
    font-family: 'Rajdhani', sans-serif;
    font-size: .85rem; color: var(--gold);
    letter-spacing: .08em; min-height: 1.2em;
    text-align: center;
  }

  /* Animation pièce capturée au coup fatal */
  @keyframes captureBlast {
    0%   { transform: scale(1);   opacity: 1; }
    40%  { transform: scale(2.2); opacity: .9; }
    100% { transform: scale(3.0); opacity: 0; }
  }
  /* L'animation s'applique sur le svg .piece à l'intérieur de la case — pas sur la case elle-même */
  .cell.capture-blast .piece,
  .cell.capture-blast .piece-b { animation: captureBlast 1.1s ease-out forwards; }

  /* ── Intro (premier visit) ── */

  /* Keyframes */
  @keyframes dualityGlitch {
    0%,  85%, 100% { text-shadow: none; transform: none; }
    86%  { text-shadow: 3px 0 var(--anima), -3px 0 var(--machina); transform: skewX(-4deg); }
    87%  { text-shadow: -3px 0 var(--anima),  3px 0 var(--machina); transform: skewX(3deg); }
    88%  { text-shadow: 2px 0 var(--machina), -2px 0 var(--anima); transform: none; }
    89%  { text-shadow: none; transform: translateX(-2px); }
    90%  { text-shadow: none; transform: none; }
  }
  @keyframes animaPulse {
    0%, 100% { border-color: rgba(255,68,204,.28); box-shadow: none; }
    50%       { border-color: rgba(255,68,204,.7);  box-shadow: 0 0 14px rgba(255,68,204,.18); }
  }
  @keyframes machinaPulse {
    0%, 100% { border-color: rgba(0,204,255,.28); box-shadow: none; }
    50%       { border-color: rgba(0,204,255,.7);  box-shadow: 0 0 14px rgba(0,204,255,.18); }
  }
  @keyframes slideInRight {
    from { opacity: 0; transform: translateX(28px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes scanline {
    from { background-position: 0 0; }
    to   { background-position: 0 100%; }
  }

  .intro-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.97);
    z-index: 450; align-items: center; justify-content: center;
  }
  .intro-overlay.open { display: flex; }
  /* Scanlines subtiles */
  .intro-overlay::before {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 1;
    background: repeating-linear-gradient(
      to bottom,
      transparent 0, transparent 2px,
      rgba(0,0,0,.06) 2px, rgba(0,0,0,.06) 3px
    );
  }

  .intro-box {
    display: flex; flex-direction: column;
    gap: 18px;
    padding: 26px 30px 22px;
    border: 1px solid var(--border2); border-radius: 10px;
    background: var(--bg2);
    box-shadow: 0 0 60px rgba(0,0,0,.95),
                0 0 40px rgba(0,204,255,.07),
                inset 0 1px 0 rgba(255,255,255,.04);
    animation: popIn .28s ease;
    max-width: 460px; width: 92%;
    text-align: center;
    box-sizing: border-box;
    position: relative; z-index: 2;
  }

  /* ── Barre supérieure ── */
  .intro-top-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
  }
  .intro-lang-bar { display: flex; gap: 8px; margin-bottom: 6px; }
  .intro-skip {
    font-family: 'Rajdhani', sans-serif;
    font-size: .75rem; letter-spacing: .1em;
    color: var(--text); opacity: .4;
    background: transparent; border: none;
    cursor: pointer; padding: 4px 6px;
    transition: opacity .15s;
    white-space: nowrap;
  }
  .intro-skip:hover { opacity: 1; }

  /* ── Carrousel de cartes ── */
  .intro-cards { position: relative; min-height: 240px; }
  .intro-card {
    display: none; flex-direction: column; align-items: center;
    gap: 12px;
  }
  .intro-card.active          { display: flex; }
  .intro-card.slide-in-right  { animation: slideInRight .32s ease both; }
  .intro-card.slide-in-left   { animation: slideInLeft  .32s ease both; }

  /* ── Carte 1 ── */
  .intro-logo {
    font-family: 'Orbitron', monospace;
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    font-weight: 900; letter-spacing: .18em;
    background: linear-gradient(135deg, var(--anima), var(--machina));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(0,204,255,.35));
    animation: dualityGlitch 5s ease-in-out infinite;
  }
  .intro-slogan {
    font-family: 'Rajdhani', sans-serif;
    font-size: .82rem; letter-spacing: .22em;
    color: var(--gold); margin-bottom: 12px; text-transform: uppercase;
  }
  .intro-card-tagline {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem; letter-spacing: .04em;
    color: var(--text); font-weight: 600;
    animation: fadeUp .3s ease .12s both;
  }
  .intro-card-body {
    font-family: 'Rajdhani', sans-serif;
    font-size: .95rem; line-height: 1.65;
    color: var(--text2); letter-spacing: .03em;
    margin: 0; white-space: pre-line;
    animation: fadeUp .3s ease .22s both;
  }
  .intro-card-objective {
    font-family: 'Rajdhani', sans-serif;
    font-size: .9rem; letter-spacing: .04em;
    color: var(--gold); font-weight: 600;
    animation: fadeUp .3s ease .38s both; margin-top:8px;
  }

  /* ── Carte 2 — Typewriter ── */
  .intro-typewriter {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem; line-height: 1.6;
    color: var(--text); text-align: center;
    letter-spacing: .03em;
    min-height: 3.6em;
    margin-bottom: 10px;
    animation: fadeUp .25s ease .1s both;
  }
  .intro-typewriter em { color: inherit; font-style: normal; font-weight: 700; }
  .intro-clans {
    display: flex; align-items: stretch; gap: 14px;
    width: 100%; justify-content: center;
  }
  .intro-clan {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; gap: 8px;
    padding: 14px 10px; border-radius: 6px;
    border: 1px solid var(--border2);
  }
  .intro-clan-name {
    font-family: 'Orbitron', monospace;
    font-size: .82rem; font-weight: 700; letter-spacing: .15em;
  }
  .intro-clan-name.c-anima   { color: var(--anima); }
  .intro-clan-name.c-machina { color: var(--machina); }
  .intro-clan-anima  { border-color: rgba(255,68,204,.28); background: rgba(255,68,204,.04); }
  .intro-clan-machina { border-color: rgba(0,204,255,.28); background: rgba(0,204,255,.04); }
  .intro-card[data-card="1"].active .intro-clan-anima {
    animation: animaPulse 2.8s ease-in-out infinite;
  }
  .intro-card[data-card="1"].active .intro-clan-machina {
    animation: machinaPulse 2.8s ease-in-out infinite .9s;
  }
  .intro-clan-desc {
    font-family: 'Rajdhani', sans-serif;
    font-size: .83rem; color: var(--text2); line-height: 1.4;
  }
  .intro-vs {
    font-family: 'Orbitron', monospace;
    font-size: .6rem; letter-spacing: .15em;
    color: var(--text); opacity: .35; flex-shrink: 0;
    align-self: center;
  }
  /* Stagger clans */
  .intro-card[data-card="1"].active .intro-clan-anima  { animation-name: animaPulse, fadeUp; animation-duration: 2.8s, .3s; animation-delay: 0s, .08s; animation-fill-mode: none, both; animation-iteration-count: infinite, 1; }
  .intro-card[data-card="1"].active .intro-vs           { animation: fadeUp .3s ease .16s both; }
  .intro-card[data-card="1"].active .intro-clan-machina { animation-name: machinaPulse, fadeUp; animation-duration: 2.8s, .3s; animation-delay: .9s, .12s; animation-fill-mode: none, both; animation-iteration-count: infinite, 1; }

  .intro-clan-meta {
    display: flex; flex-direction: column; gap: 4px;
    width: 100%; align-items: center;
  }
  .intro-card-rule {
    font-family: 'Rajdhani', sans-serif;
    font-size: .82rem; color: var(--text2); letter-spacing: .03em;
    animation: fadeUp .3s ease .22s both;
  }
  .intro-card-first {
    font-family: 'Rajdhani', sans-serif;
    font-size: .82rem; color: var(--anima); letter-spacing: .03em;
    font-weight: 600;
    animation: fadeUp .3s ease .3s both;
  }
  .intro-card-footnote {
    font-family: 'Orbitron', monospace;
    font-size: .68rem; letter-spacing: .18em;
    color: var(--gold); text-transform: uppercase;
    animation: fadeUp .3s ease .4s both;
  }

  /* ── Carte 3 ── */
  .intro-section-header {
    font-family: 'Orbitron', monospace;
    font-size: .82rem; letter-spacing: .18em;
    color: var(--text); text-transform: uppercase;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border2);
    width: 100%; text-align: left;
  }
  .intro-units-header { margin-top: 4px; }
  .intro-card[data-card="2"].active .intro-section-header:first-child { animation: fadeUp .25s ease 0s both; }
  .intro-card[data-card="2"].active .intro-units-header               { animation: fadeUp .25s ease .16s both; }

  .intro-matrix-desc {
    font-family: 'Rajdhani', sans-serif;
    font-size: .85rem; line-height: 1.55;
    color: var(--text2); letter-spacing: .02em;
    margin: 0; width: 100%; text-align: left;
    animation: fadeUp .28s ease .07s both;
  }

  /* Grille 2 colonnes */
  .intro-pieces-grid {
    display: flex; gap: 14px; width: 100%;
  }
  .intro-piece-col {
    flex: 1; display: flex; flex-direction: column; gap: 8px;
  }
  .intro-piece-row {
    display: flex; align-items: center; gap: 8px;
    text-align: left;
  }
  .intro-piece-icon {
    width: 24px; height: 24px; flex-shrink: 0;
    color: var(--text2); opacity: .8;
  }
  .intro-piece-icon svg { width: 24px; height: 24px; }
  .intro-piece-text {
    display: flex; flex-direction: column; gap: 1px;
  }
  .intro-piece-label {
    font-family: 'Orbitron', monospace;
    font-size: .55rem; letter-spacing: .1em;
    color: var(--text); text-transform: uppercase;
  }
  .intro-piece-role {
    font-family: 'Rajdhani', sans-serif;
    font-size: .75rem; color: var(--text2); line-height: 1.25;
  }
  /* Stagger : colonne gauche */
  .intro-card[data-card="2"].active .intro-piece-col:first-child .intro-piece-row:nth-child(1) { animation: fadeUp .25s ease .22s both; }
  .intro-card[data-card="2"].active .intro-piece-col:first-child .intro-piece-row:nth-child(2) { animation: fadeUp .25s ease .30s both; }
  .intro-card[data-card="2"].active .intro-piece-col:first-child .intro-piece-row:nth-child(3) { animation: fadeUp .25s ease .38s both; }
  /* Stagger : colonne droite (décalé de 0.04s par rapport à la gauche) */
  .intro-card[data-card="2"].active .intro-piece-col:last-child .intro-piece-row:nth-child(1)  { animation: fadeUp .25s ease .26s both; }
  .intro-card[data-card="2"].active .intro-piece-col:last-child .intro-piece-row:nth-child(2)  { animation: fadeUp .25s ease .34s both; }
  .intro-card[data-card="2"].active .intro-piece-col:last-child .intro-piece-row:nth-child(3)  { animation: fadeUp .25s ease .42s both; }

  .intro-card-end-tagline {
    font-family: 'Orbitron', monospace;
    font-size: .62rem; letter-spacing: .16em;
    color: var(--gold); text-transform: uppercase;
    margin-top: 2px;
    animation: fadeUp .3s ease .52s both;
  }

  /* ── Footer : dots + bouton ── */
  .intro-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 4px;
  }
  .intro-dots { display: flex; gap: 8px; align-items: center; }
  .intro-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--border2); transition: background .25s, transform .25s, box-shadow .25s;
    cursor: pointer;
  }
  .intro-dot.active {
    background: var(--gold); transform: scale(1.4);
    box-shadow: 0 0 6px rgba(45,216,160,.5);
  }
  .btn-intro-next {
    font-family: 'Orbitron', monospace;
    font-size: .68rem; letter-spacing: .14em;
    padding: 10px 18px; border-radius: 5px;
    border: 1px solid var(--gold); color: var(--gold);
    background: transparent; cursor: pointer;
    transition: all .18s;
    animation: activeGlow 2s ease-in-out infinite;
  }
  .btn-intro-next:hover {
    background: rgba(45,216,160,.1);
    box-shadow: 0 0 18px rgba(45,216,160,.3);
  }

  /* Responsive mobile */
  @media (max-width: 480px) {
    .intro-box { padding: 18px 16px 16px; gap: 14px; }
    .intro-clans { gap: 10px; }
    .intro-clan { padding: 10px 8px; }
    .intro-pieces-list { gap: 6px; }
    .intro-card-objective { font-size: .82rem; }
  }

  /* ── Splash screen ── */
  .splash-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.96);
    z-index: 400; align-items: center; justify-content: center;
  }
  .splash-overlay.open { display: flex; }

  .splash-box {
    display: flex; flex-direction: column; align-items: center;
    gap: 16px;
    padding: 32px;
    border: 1px solid var(--border2); border-radius: 10px;
    background: var(--bg2);
    box-shadow: 0 0 60px rgba(0,0,0,.95), 0 0 30px rgba(0,204,255,.06);
    animation: popIn .22s ease;
    max-width: 420px;
    width: 92%; text-align: center;
  }

  .splash-logo {
    font-family: 'Orbitron', monospace;
    font-size: clamp(1.8rem, 6vw, 2.6rem);
    font-weight: 900; letter-spacing: .18em;
    background: linear-gradient(135deg, var(--anima), var(--machina));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(0,204,255,.3));
  }
  .splash-slogan {
    font-family: 'Rajdhani', sans-serif;
    font-size: .85rem; letter-spacing: .2em;
    color: var(--gold); margin: 0 0 16px 0;
  }
  /* curseur clignotant style terminal */
  .splash-cursor { display:inline-block; width:.55em; height:1em; background:var(--text); vertical-align:text-bottom; position:relative; bottom:2px; animation: cur-blink .7s step-end infinite; margin-left:1px; }
  @keyframes cur-blink { 0%,100%{opacity:1} 50%{opacity:0} }
  @keyframes cur-fade  { 0%{opacity:1} 100%{opacity:0} }
  /* glow ANIMA — fade-in couleur + pulsation lente */
  .intro-typewriter .c-anima {
    color: var(--anima); font-style: normal; font-weight:700;
    animation: glow-anima 3.5s ease-in-out infinite alternate;
  }
  @keyframes glow-anima {
    from { text-shadow: 0 0 4px color-mix(in srgb, var(--anima) 40%, transparent), 0 0 10px color-mix(in srgb, var(--anima) 25%, transparent); }
    to   { text-shadow: 0 0 10px var(--anima), 0 0 24px color-mix(in srgb, var(--anima) 60%, transparent), 0 0 40px color-mix(in srgb, var(--anima) 25%, transparent); }
  }
  /* glow MACHINA — même principe, léger décalage de phase */
  .intro-typewriter .c-machina {
    color: var(--machina); font-style: normal; font-weight:700;
    animation: glow-machina 3.5s ease-in-out infinite alternate 1s;
  }
  @keyframes glow-machina {
    from { text-shadow: 0 0 4px color-mix(in srgb, var(--machina) 40%, transparent), 0 0 10px color-mix(in srgb, var(--machina) 25%, transparent); }
    to   { text-shadow: 0 0 10px var(--machina), 0 0 24px color-mix(in srgb, var(--machina) 60%, transparent), 0 0 40px color-mix(in srgb, var(--machina) 25%, transparent); }
  }
  /* fade-in smooth de la couleur au moment de la révélation */
  .intro-typewriter .c-anima, .intro-typewriter .c-machina {
    transition: color 1.4s ease, text-shadow 1.4s ease;
  }
  /* état initial avant apparition : invisible */
  .intro-typewriter .c-anima.hidden, .intro-typewriter .c-machina.hidden { color: var(--text); text-shadow:none; animation:none; }

  .splash-version {
    font-family: 'Orbitron', monospace;
    font-size: .52rem; letter-spacing: .2em;
    color: var(--text); opacity: .45;
    margin-top: 4px;
  }
  /* Barre de langue */
  .splash-lang-bar {display: flex; gap: 16px; justify-content: center; margin-top: 8px}
  .btn-splash-lang {
    font-family: 'Orbitron', monospace;
    font-size: .54rem; letter-spacing: .1em;
    padding: 6px 10px; border-radius: 3px;
    border: 1px solid var(--border2);
    background: transparent; color: var(--text);
    cursor: pointer; transition: all .15s;
    display: inline-flex; align-items: center; gap: 4px;
  }
  .btn-splash-lang.active {
    border-color: var(--gold); color: var(--gold);
  }
  .btn-splash-lang:not(.active):hover {
    border-color: var(--text); opacity: .8;
  }
  .btn-splash {
    font-family: 'Orbitron', monospace;
    font-size: .78rem; letter-spacing: .14em;
    padding: 10px 16px; border-radius: 5px;
    border: 1px solid var(--border2); background: transparent;
    color: var(--text2); cursor: pointer;
    transition: all .2s; text-align: left;
    display: flex; align-items: center; gap: 12px;
    width: 100%; box-sizing: border-box;
    margin: 8px 0 6px 0;
  }
  .btn-splash:hover { border-color: var(--text2); background: rgba(255,255,255,.04); }
  .btn-splash.splash-primary {
    border-color: var(--machina); color: var(--machina);
    box-shadow: 0 0 14px rgba(0,204,255,.12);
  }
  .btn-splash.splash-primary:hover {
    background: rgba(0,204,255,.08);
    box-shadow: 0 0 22px rgba(0,204,255,.22);
  }
  @keyframes activeGlow {
    0%, 100% { box-shadow: 0 0 6px rgba(255,195,0,.2); }
    50%       { box-shadow: 0 0 14px rgba(255,195,0,.55); }
  }
  .btn-splash.splash-active {
    border-color: var(--gold); color: var(--gold);
    animation: activeGlow 2s ease-in-out infinite;
  }
  .drawer-mode.active {
    border-color: var(--gold) !important;
    color: var(--gold) !important;
    animation: activeGlow 2s ease-in-out infinite;
  }
  .splash-btn-icon { font-size: 1rem; flex-shrink: 0; }
  .splash-btn-label { display: flex; flex-direction: column; gap: 2px; }
  .splash-btn-sub {
    font-family: 'Rajdhani', sans-serif;
    font-size: .75rem; letter-spacing: .05em;
    opacity: .6; font-weight: 400;
  }
  .splash-divider {
    width: 100%; height: 0;
    background: none; margin: 6px 0;
  }

  /* Barre de 3 boutons icône en bas du splash */
  .splash-footer-bar {
    display: flex; justify-content: center; gap: 0;
    width: 100%; margin-top: 18px;
  }
  .btn-splash-icon {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; gap: 5px;
    font-family: 'Orbitron', monospace;
    font-size: .55rem; letter-spacing: .1em;
    color: var(--text2); opacity: .75;
    background: none; border: none; cursor: pointer;
    padding: 8px;
    transition: opacity .18s, color .18s;
  }
  .btn-splash-icon:hover { opacity: 1; color: var(--gold); }
  .btn-splash-icon .sfi-icon {
    font-size: 1.15rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    height: 1.2rem;
  }
  /* SVG pictos dans la barre footer — héritent la couleur courante */
  .btn-splash-icon svg { width: 1.15rem; height: 1.15rem; }
  .btn-splash-icon:hover svg { filter: drop-shadow(0 0 4px var(--gold)); }

  /* ── Mode IA ── */
  .ia-level-row { display:flex; }
  .ia-level { font-size:.54rem !important; flex:1; justify-content:center !important; }
  .ia-level.active { border-color:var(--gold) !important; color:var(--gold) !important; }

  /* ── Sous-options : radio léger sans bordure ── */

  .radio-row {
    display: flex; gap: 16px;
    padding: 4px 0;
    margin: 0;
    align-items: center;
  }
  /* Étiquette préfixe dans une radio-row (ex: "Je joue :", "Niveau :") */
  .radio-row-label {
    font-family: 'Orbitron', monospace;
    font-size: .52rem; letter-spacing: .12em;
    color: var(--text2);
    text-transform: uppercase;
    white-space: nowrap;
    min-width: 44px;
  }
  .radio-opt {
    display: flex; align-items: center; gap: 4px;
    font-family: 'Orbitron', monospace;
    font-size: .6rem;
    color: var(--text);
    cursor: pointer; background: none; border: none;
    padding: 0; transition: color .18s;
    text-transform: uppercase;
    opacity: .6;
  }
  .radio-opt::before {
    content: '○';
    font-size: .8rem; line-height: 1;
  }
  .radio-opt.active {
    opacity: 1;
	  font-weight: 900;
  }
  .radio-opt.active::before { content: '●'; }

  /* Couleurs actives spécifiques — surcharge color ET opacity */
  .radio-opt.opt-anima.active   { color: var(--anima);   opacity: 1; }
  .radio-opt.opt-machina.active { color: var(--machina); opacity: 1; }
  .radio-opt.opt-disc.active    { color: var(--disciple); opacity: 1; }
  .radio-opt.opt-master.active  { color: var(--master); opacity: 1; }
  .radio-opt.opt-oracle.active  { color: var(--oracle); opacity: 1; }
  /* Niveaux IA : sans puce, letter-spacing réduit */
  .radio-opt.opt-level::before,
  .radio-opt.opt-level.active::before { content: none; }
  /* ANIMA / MACHINA : sans puce */
  .radio-opt.opt-anima::before,
  .radio-opt.opt-anima.active::before,
  .radio-opt.opt-machina::before,
  .radio-opt.opt-machina.active::before { content: none; }
  /* Inactifs : couleur neutre, pas la couleur du clan */
  .radio-opt.opt-anima,
  .radio-opt.opt-machina { color: var(--text); }

  /* Indicateur IA : pulsation pendant que l'IA calcule */
  @keyframes iaPulse {
    0%,100% { opacity:.5; }
    50%      { opacity:1; }
  }
  #iaThinking {
    /* Position absolue : hors du flux, superposé sur #status sans le déplacer */
    position: absolute;
    left: 0; right: 0;
    top: 100%; /* juste sous la ligne status */
    margin-top: 2px;
    display: none;
    font-family:'Orbitron',monospace;
    font-size:.58rem; letter-spacing:.2em;
    color:var(--machina);
    text-shadow: 0 0 8px var(--machina);
    animation: iaPulse .8s ease-in-out infinite;
    text-align:center;
    pointer-events: none;
    white-space: nowrap;
  }
  body.holo #iaThinking { color: var(--machina); text-shadow: 0 0 8px rgba(0,204,255,.4); }

/* ══ 9. HOLO LISIBILITÉ ═══════════════════════════════════════
   En mode holo (fond blanc), les opacités sur du texte empilent
   mal sur fond clair et varient selon les appareils.
   Tous les éléments textuels utilisent ici des couleurs solides
   issues de la palette --holo-text-* définie dans .holo {}.

   Hiérarchie visuelle par couleur (pas par opacité) :
     --holo-text-primary  #1a2d45  → corps / titres principaux
     --holo-text-mid      #364f66  → descriptions / statuts
     --holo-text-soft     #5a6f80  → sous-titres / méta
     --holo-text-muted    #7d8f9e  → discret / dates / numéros
   ══════════════════════════════════════════════════════════════ */

  /* ── Header ── */
  body.holo .slogan { color: var(--holo-text-soft); }

  /* ── Légende ── */
  body.holo .legend-role { color: var(--holo-text-soft) !important; opacity: 1 !important; }

  /* ── Section Règles / Guide ── */
  body.holo .piece-sub            { color: var(--holo-text-soft);  opacity: 1; }
  body.holo .help-piece-icon      { opacity: 1; }
  /* SVG pièces dans la section Rules : couleur sombre lisible, pas de filtre */
  body.holo #helpBody .help-piece-icon svg *  { fill: var(--holo-text-mid) !important; stroke: var(--holo-text-mid) !important; }
  /* Exception : yeux Ghost et centre Agent restent blancs */
  body.holo #helpBody .help-piece-icon svg [fill="#fff"] { fill: #fff !important; }
  body.holo .help-lore            { color: var(--holo-text-soft);  opacity: 1; }
  body.holo .help-separator       { opacity: 1; }
  body.holo .guide-section-sub    { color: var(--holo-text-soft);  opacity: 1; }
  body.holo .guide-item-title     { color: var(--holo-text-primary) !important; opacity: 1; }
  body.holo .popup-subtitle       { color: var(--holo-text-soft) !important;   opacity: 1 !important; }
  body.holo .popup-section-text   { opacity: 1; }
  /* Tooltip de nom de pièce */
  body.holo .piece-chip-tooltip   { background: #f0f4f7 !important; border-color: rgba(80,100,130,.25) !important; }

  /* ── Victoire ── */
  body.holo .victory-title              { color: var(--holo-text-soft);    opacity: 1; }
  body.holo .victory-resume-label       { color: var(--holo-text-muted);   opacity: 1; }
  body.holo .victory-ia-phrase          { color: var(--holo-text-mid);     opacity: 1; border-bottom-color: rgba(0,0,0,.10); }
  body.holo .btn-victory.btn-victory-cancel { color: var(--holo-text-soft); opacity: 1; }
  body.holo .btn-victory-close          { color: var(--holo-text-soft);    opacity: 1; }

  /* ── Splash ── */
  body.holo .splash-version   { color: var(--holo-text-muted); opacity: 1; }
  body.holo .splash-btn-sub   { color: var(--holo-text-soft);  opacity: 1; }
  body.holo .btn-splash-icon  { color: var(--holo-text-mid);   opacity: 1; }
  body.holo .btn-splash-icon svg { filter: none; }

  /* ── Système Mémoire ── */
  body.holo .mem-section-label { opacity: 1; }   /* couleur gold déjà via var(--gold) */
  body.holo .mem-empty         { color: var(--holo-text-muted); opacity: 1; }
  body.holo .mem-item-num      { color: var(--holo-text-muted); opacity: 1; }
  body.holo .mem-date          { color: var(--holo-text-muted); opacity: 1; }
  body.holo .mem-stat          { opacity: 1; }

  /* ── Nouveautés ── */
  body.holo .news-current-list li        { opacity: 1; }
  body.holo .news-history-label-version  { color: #2e8fd4; opacity: 1; } /* bleu machina solide */
  body.holo .news-history-text           { color: var(--holo-text-mid); opacity: 1; }

  /* ── Rapport de bug ── */
  body.holo .bug-note { color: var(--holo-text-soft) !important; opacity: 1 !important; }

  /* ── Replay ── */
  /* Vitesse inactive : couleur atténuée, pas d'opacité */
  body.holo .rp-speed        { color: var(--holo-text-soft); opacity: 1; }
  body.holo .rp-speed.active { color: var(--gold) !important; opacity: 1 !important; }

  /* ── Pièces capturées ── */
  /* En holo, les SVG capturés sont légèrement voilés mais restent lisibles */
  body.holo .capture-cell svg { opacity: .85; }

  /* ── Boutons confirm subtils ── */
  body.holo .confirm-btn--subtle { color: var(--holo-text-soft); opacity: 1; }

  /* ── Classes utilitaires ── */
  body.holo .muted            { color: var(--holo-text-soft); opacity: 1; }
  body.holo .ready-interrupt  { color: var(--holo-text-soft); opacity: 1; }

/* ══ 10. PRINT ════════════════════════════════════════════════ */
@page { margin: 2cm; }

@media print {

  /* Masquer tout */
  body > * { display: none !important; }

  /* Afficher uniquement l'overlay ouvert */
  #helpOverlay.open,
  #guideOverlay.open,
  #aboutOverlay.open {
    display: block !important;
    position: static !important;
    background: white !important;
    backdrop-filter: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Overlays fermés — masqués explicitement */
  #helpOverlay:not(.open),
  #guideOverlay:not(.open),
  #aboutOverlay:not(.open) {
    display: none !important;
  }

  /* popup-wrap : retirer le relative + 92% */
  .popup-wrap {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Boutons masqués sans laisser d'espace */
  .popup-close,
  .btn-print { display: none !important; }

  /* Boîte popup : lever toutes les contraintes */
  #helpPopup,
  #guidePopup,
  #aboutPopup {
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: none !important;
    background: white !important;
    color: black !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Corps scrollable — spécificité doublée pour écraser .popup-body { display:flex } */
  #helpBody.popup-body,
  #guideBody.popup-body,
  #aboutBody.popup-body {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Texte lisible sur fond blanc */
  .popup-title,
  .popup-subtitle,
  .popup-section-label,
  .popup-section-text,
  .popup-desc { color: black !important; }

  .popup-header { border-bottom-color: #ccc !important; }
}
/* ══ 11. SYSTÈME MÉMOIRE ═════════════════════════════════════ */
.mem-section-label {
  font-family: 'Orbitron', monospace;
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); opacity: .8; margin-top: 4px;
}
.mem-empty {
  font-family: 'Rajdhani', sans-serif;
  font-size: .78rem; color: var(--text); opacity: .45;
  text-align: center; padding: 14px 0;
}
.mem-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.mem-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border2);
  border-radius: 6px; padding: 8px 12px;
}
.mem-item-num {
  font-family: 'Orbitron', monospace; font-size: .52rem; letter-spacing: .1em;
  color: var(--text2); opacity: .5; width: 24px; text-align: center; flex-shrink: 0;
}
.mem-item-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; overflow: hidden; }
.mem-badge {
  font-family: 'Orbitron', monospace; font-size: .56rem;
  letter-spacing: .12em; color: var(--text);
}
.mem-stat {
  font-family: 'Rajdhani', sans-serif; font-size: .75rem; color: var(--text); opacity: .9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mem-date { opacity: .6; }
.mem-actions { display: flex; gap: 5px; flex-shrink: 0; }
.mem-btn {
  background: rgba(255,255,255,.04); border: 1px solid var(--border2);
  color: var(--text); border-radius: 4px; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .7rem; transition: all .15s;
}
.mem-btn:hover          { border-color: var(--gold); color: var(--gold); }
.mem-btn.mem-btn-del:hover { border-color: var(--target-atk); color: var(--target-atk); }

/* ══ 12. CONFIRM OVERLAY & BADGES ════════════════════════════ */
.confirm-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.82); backdrop-filter: blur(5px);
  z-index: 9999; align-items: center; justify-content: center;
}
.confirm-overlay.open { display: flex; }
.confirm-box {
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 10px; padding: 28px 32px; width: min(400px, 92vw);
  display: flex; flex-direction: column; gap: 18px;
}
.confirm-title {
  font-family: 'Orbitron', monospace; font-size: .82rem;
  letter-spacing: .15em; color: var(--gold);
}
.confirm-text {
  font-family: 'Rajdhani', sans-serif; font-size: .92rem;
  color: var(--text2); line-height: 1.55;
}
.confirm-btns { display: flex; gap: 10px; justify-content: center; }
.confirm-btn {
  font-family: 'Orbitron', monospace; font-size: .58rem; letter-spacing: .12em;
  padding: 9px 18px; border-radius: 4px; cursor: pointer; transition: all .15s;
  background: transparent;
}
.confirm-btn-cancel { border: 1px solid var(--border2); color: var(--text); }
.confirm-btn-cancel:hover { border-color: var(--gold); color: var(--gold); }
.confirm-btn-ok { border: 1px solid var(--gold); color: var(--gold); background: rgba(45,216,160,.07); }
.confirm-btn-ok:hover { background: rgba(45,216,160,.18); }
.confirm-btn-danger { border: 1px solid var(--target-atk); color: var(--target-atk); }
.confirm-btn-danger:hover { background: rgba(255,80,80,.1); }

/* ── Badge niveau IA (icône droid à côté du nom de l'équipe) ── */
.ia-badge { width: 1.4em; height: 1.4em; vertical-align: -.2em; margin-left: .3em; }

/* ── Tooltip du niveau IA sur le badge clan ── */
.ia-badge-wrap { position: relative; display: inline-block; align-items: center; cursor: default; }
.ia-badge-wrap .ia-level-tip {
  position: absolute; bottom: 130%; right: 0;
  background: var(--bg2); color: var(--text2);
  font-family: 'Orbitron', monospace; font-size: .52rem; letter-spacing: .12em;
  padding: 3px 8px; border-radius: 3px; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .15s;
  border: 1px solid var(--border2); z-index: 200;
}
.ia-badge-wrap:hover .ia-level-tip { opacity: 1; }

/* ══ 13. STYLES EXTRAITS DES ATTRIBUTS INLINE ═══════════════ */

/* ── SVG sprite container (masqué, doit rester invisible) ── */
.svg-sprite { display: none; }

/* ── Icônes dans les boutons FAF et header ── */
.faf-btn svg       { width: 1.1em; height: 1.1em; vertical-align: middle; }
.btn-corner svg    { width: 1em; height: 1em; vertical-align: middle; }

/* ── Icônes du splash ── */
#splashPlayIA .splash-btn-icon svg { width: 1.4em;  height: 1.4em;  }
#splashSolo   .splash-btn-icon svg { width: 1.1em;  height: 1.1em;  }
#splashFaf    .splash-btn-icon svg { width: 1.15em; height: 1.15em; }
.sfi-icon svg                      { width: 1.15rem; height: 1.15rem; }

/* ── Icônes dans le drawer ── */
.drawer-btn svg  { width: 1em; height: 1em; vertical-align: middle; margin-right: 6px; }
.drawer-mode svg { margin-right: 4px; }
#btnModeIA svg   { width: 1.3em; height: 1.3em; }
#btnReset svg    { transform: rotate(-90deg); }

/* ── Icônes dans les boutons de victoire ── */
.btn-victory svg       { width: 1.4em; height: 1.4em; vertical-align: middle; margin-right: 6px; }
#btnVictoryReplay svg  { transform: rotate(-90deg); }

/* ── Icônes dans les popups / save-btn-row ── */
.save-btn-row .btn-rp svg { width: 1em; height: 1em; vertical-align: middle; margin-right: 4px; }
#btnBugSend svg           { width: 1.2em; height: 1.2em; vertical-align: middle; margin-right: 6px; }
.btn-print svg            { width: 1.2rem; height: 1.2rem; }

/* ── Icônes dans les confirms ── */
#btnContinueNo svg                       { width: 1em; height: 1em; vertical-align: middle; margin-right: 5px; }
#resetConfigOverlay .confirm-title svg   { width: 1em; height: 1em; vertical-align: middle; margin-right: 7px; margin-bottom: 2px; }
#btnResetConfigZip svg                   { width: 1em; height: 1em; vertical-align: middle; margin-right: 4px; }

/* ── Icônes replay controls ── */
.rp-nav-group .btn-rp svg { width: 1.1em; height: 1.1em; vertical-align: middle; }
.btn-rp-play svg          { width: 1.45em; height: 1.45em; vertical-align: middle; }
.btn-rp-stop svg          { width: 1em; height: 1em; vertical-align: middle; }
#rpIconPause              { width: 1.45em; height: 1.45em; vertical-align: middle; }

/* ── Tooltips alignés à gauche ── */
.tooltip-left { left: 0; right: auto; }

/* ── Tailles popup-wrap ── */
.popup-wrap--xs { max-width: 380px; }
.popup-wrap--sm { max-width: 480px; }
.popup-wrap--md { max-width: 520px; }
.popup-wrap--lg { max-width: 560px; }

/* ── Popup avec défilement vertical ── */
.popup--scroll                        { max-height: 85vh; overflow-y: auto; }
#replayLoadOverlay .popup--scroll     { max-height: 88vh; }

/* ── Éléments masqués par défaut (état géré par CSS, JS les montre via cssText ou display explicite) ── */
#saveOverlay        { display: none; }
#replayLoadOverlay  { display: none; }
#replayFileInput    { display: none; }
#popupPower         { display: none; }

/* ── Messages de retour inline (display:none géré inline car JS utilise style.display='') ── */
#saveCopiedMsg {
  color: var(--success);
  font-family: 'Orbitron', monospace; font-size: .58rem;
  letter-spacing: .15em; text-align: center;
}
#saveMemMsg {
  color: var(--gold);
  font-family: 'Orbitron', monospace; font-size: .58rem;
  letter-spacing: .15em; text-align: center;
}
#replayLoadErr {
  color: var(--target-atk);
  font-family: 'Rajdhani', sans-serif; font-size: .82rem;
  text-align: center;
}

/* ── Variantes confirm-btns ── */
.confirm-btns--col  { flex-direction: column; gap: 8px; }
.confirm-btn--full  { width: 100%; justify-content: center; display: flex; }

/* ── resetConfigZipRow : masqué + espacement (JS utilise style.display='') ── */
#resetConfigZipRow { margin-bottom: 4px; }

/* ── mem-section-label avec marge haute ── */
.mem-section-label--mt { margin-top: 6px; }

/* ══ 14. CLASSES UTILITAIRES ═════════════════════════════════
   Jamais en inline dans le JS — tout passe par ici.
   ══════════════════════════════════════════════════════════════ */

/* ── Icônes SVG inline ── */
.icon         { width: 1em; height: 1em; vertical-align: middle; }
.icon-lg      { width: 1.1em; height: 1.1em; vertical-align: middle; }
.icon-mr      { margin-right: 4px; }
.icon-level   { width: 1em; height: 1em; vertical-align: -.15em; margin-right: .25em; }
.icon-confirm { width: .9em; height: .9em; vertical-align: middle; margin-right: 5px; transform: rotate(-90deg); }

/* ── Couleurs équipes (data-team="A" = ANIMA, data-team="B" = MACHINA) ── */
[data-team="A"]  { color: var(--anima); }
[data-team="B"]  { color: var(--machina); }
.team-name       { font-weight: 700; }

/* ── Texte coloré clans dans les contenus (body text) ── */
.clan-anima   { color: var(--anima);   font-weight: 600; }
.clan-machina { color: var(--machina); font-weight: 600; }

/* ── Niveaux IA ── */
.level-disciple { color: var(--disciple); }
.level-maitre   { color: var(--master); }
.level-oracle   { color: var(--oracle); }
.level-bold     { font-weight: 700; }

/* ── Titre DUALITY (brand) ── */
.brand-duality {
  color: var(--gold);
  font-weight: 700;
  font-family: 'Orbitron', monospace;
  letter-spacing: .12em;
}

/* ── Sous-titres pièces dans Help / popup ── */
.piece-sub {
  font-size: .65em;
  letter-spacing: .08em;
  opacity: .6;
  font-weight: 400;
  margin-top: 1px;
}

/* ── Groupes d'icônes côte à côte ── */
.icon-group   { display: flex; gap: 2px; }
.icons-flex   { display: flex; gap: 6px; align-items: center; }
.icons-flex-sm { display: flex; gap: 4px; align-items: center; }

/* ── Animation FaF : pièce retournée (identique au rendu statique CSS .piece-b) ── */
.piece-faf-flip {
  display: inline-flex;
  transform: rotate(180deg);
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

/* ── Texte "En cours / interruption" atténué ── */
.ready-interrupt { opacity: .7; font-size: .9em; }
.muted           { opacity: .75; }

/* ══ TUTORIEL ══════════════════════════════════════════════════ */

/* Écran titre de scénario */
#tutoScenarioOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.9);
  z-index: 650;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
#tutoScenarioOverlay.open {
  opacity: 1;
  pointer-events: auto;
}
#tutoScenarioText {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1rem, 3.2vw, 1.7rem);
  color: #fff;
  text-align: center;
  letter-spacing: .12em;
  text-transform: uppercase;
  max-width: 78%;
  line-height: 1.6;
}

/* Atténuation du plateau hors éléments actifs */
body.tuto-active .board .cell:not(.tuto-glow):not(.tuto-allowed):not(.tuto-target-atk):not(.tuto-trajectory) {
  opacity: .38;
  transition: opacity .25s;
}
body.tuto-active .board .cell.tuto-glow,
body.tuto-active .board .cell.tuto-allowed,
body.tuto-active .board .cell.tuto-target-atk,
body.tuto-active .board .cell.tuto-trajectory {
  opacity: 1;
  z-index: 5;
  position: relative;
}

/* Halo pulsé sur la pièce/case à activer — cercle 2× la taille de la case */
.cell.tuto-glow {
  outline: none !important;
}
.cell.tuto-glow::after {
  content: '';
  position: absolute;
  width:  calc(var(--cell) * 2);
  height: calc(var(--cell) * 2);
  border-radius: 50%;
  border: 2px solid var(--gold);
  box-shadow: 0 0 8px 2px rgba(255,210,80,.35);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10;
  animation: tuto-pulse 1.8s ease-in-out infinite;
}
/* Compensation offset pièce VOID (translateX +0.5 cell) */
.ghost-void.tuto-glow::after {
  left: calc(50% + var(--cell) * .5);
}
/* Void ligne du haut : pièce décalée aussi vers le bas */
.ghost-void-top.tuto-glow::after {
  left: calc(50% + var(--cell) * .5);
  top:  calc(50% + var(--cell) * .5);
}
/* Void ligne du bas : pièce décalée vers le haut */
.ghost-void-bot.tuto-glow::after {
  left: calc(50% + var(--cell) * .5);
  top:  calc(50% - var(--cell) * .5);
}
@keyframes tuto-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0   0   rgba(255,210,80,.5); }
  50%       { opacity: .6; box-shadow: 0 0 14px 4px rgba(255,210,80,0); }
}

/* Case jouable — cercle magenta + point central (style identique au jeu) */
.cell.tuto-allowed { outline: none !important; }
.cell.tuto-allowed::before {
  content: '';
  position: absolute;
  width:  calc(var(--cell) * .28);
  height: calc(var(--cell) * .28);
  border-radius: 50%;
  background: rgba(220,80,180,.9);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 11;
}
.cell.tuto-allowed::after {
  content: '';
  position: absolute;
  width: 78%; height: 78%;
  border-radius: 50%;
  border: 2.5px solid rgba(220,80,180,.9);
  background: transparent;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10;
}

/* Secouer la pièce sur un clic invalide */
@keyframes tuto-shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-4px); }
  40%,80% { transform: translateX(4px); }
}
.cell.tuto-shake { animation: tuto-shake .42s ease both; }

/* Case cible attaque — cercle orange */
.cell.tuto-target-atk {
  outline: none !important;
}
.cell.tuto-target-atk::after {
  content: '';
  position: absolute;
  width: 80%; height: 80%;
  border-radius: 50%;
  border: 2px solid rgba(255,100,0,.9);
  background: rgba(255,100,0,.15);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10;
  animation: tuto-pulse-atk 1.8s ease-in-out infinite;
}
@keyframes tuto-pulse-atk {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0   0   rgba(255,100,0,.5); }
  50%       { opacity: .6; box-shadow: 0 0 14px 4px rgba(255,100,0,0); }
}

/* Case de trajectoire (chemin d'une pièce en déplacement) */
.cell.tuto-trajectory { outline: none !important; }
.cell.tuto-trajectory::after {
  content: '';
  position: absolute;
  width: 34%; height: 34%;
  border-radius: 50%;
  background: rgba(140,190,255,.55);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10;
}

/* Clone de pièce animée (positionnement géré en JS) */
.tuto-anim-piece {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .92;
}
.tuto-anim-piece svg,
.tuto-anim-piece .piece,
.tuto-anim-piece .piece-b {
  width:  100%;
  height: 100%;
}

/* Flash vert de validation après une action correcte */
.cell.tuto-success {
  animation: tuto-validate .65s ease both;
}
@keyframes tuto-validate {
  0%   { box-shadow: 0 0 0 0   rgba(45,216,160,.9); }
  40%  { box-shadow: 0 0 16px 4px rgba(45,216,160,.7); }
  100% { box-shadow: 0 0 0 0   rgba(45,216,160,0); }
}

/* ── Panneau tutoriel (barre basse fixe) ── */
#tutoOverlay {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 600;
  padding: 10px 16px 12px;
  background: rgba(10,12,20,.96);
  border-top: 1px solid rgba(45,216,160,.35);
  box-shadow: 0 -4px 24px rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
#tutoOverlay.open { display: flex; }

.holo #tutoOverlay {
  background: rgba(230,238,245,.95);
  border-top: 1px solid rgba(45,216,160,.45);
}

.tuto-msg {
  font-size: .88rem;
  color: var(--text2);
  line-height: 1.45;
  max-width: 520px;
  margin: 0;
}
.holo .tuto-msg { color: var(--holo-text-primary); }

/* Rangée de navigation : [← PRÉC]  [n / total]  [SUIV →]  [QUITTER] */
.tuto-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tuto-step-label {
  font-family: 'Orbitron', sans-serif;
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--gold);
  min-width: 3.2em;
  text-align: center;
}

/* Bouton inactif : visible mais estompé */
.tuto-btn[disabled], .tuto-btn.tuto-inactive {
  opacity: .28;
  pointer-events: none;
  cursor: default;
}

.tuto-btn {
  padding: 6px 18px;
  border-radius: 6px;
  font-family: 'Orbitron', sans-serif;
  font-size: .7rem;
  letter-spacing: .06em;
  cursor: pointer;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
  text-transform: uppercase;
  transition: background .15s, color .15s;
}
.tuto-btn:hover { background: rgba(45,216,160,.14); }

.tuto-btn-primary {
  background: var(--gold);
  color: #0a0f14;
}
.tuto-btn-primary:hover { background: #3aefb0; border-color: #3aefb0; }

.tuto-btn-ghost {
  border-color: rgba(200,220,232,.3);
  color: rgba(200,220,232,.55);
}
.tuto-btn-ghost:hover { background: rgba(200,220,232,.08); color: var(--text2); }

/* ── Écran de fin du tutoriel ── */
#tutoEndOverlay {
  display: none;
  position: fixed; inset: 0;
  z-index: 700;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
}
#tutoEndOverlay.open { display: flex; }

.tuto-end-box {
  background: var(--bg2);
  border: 1px solid rgba(45,216,160,.4);
  border-radius: 14px;
  padding: 36px 40px 30px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 0 40px rgba(45,216,160,.12), 0 8px 32px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 14px;
}
.holo .tuto-end-box { background: rgba(255,255,255,.88); }

.tuto-end-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.4rem;
  letter-spacing: .08em;
  color: var(--gold);
}

.tuto-end-msg {
  font-size: .95rem;
  color: var(--text2);
  line-height: 1.5;
}
.holo .tuto-end-msg { color: var(--holo-text-primary); }

.tuto-end-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* ── Boutons intro simplifiés ── */
.intro-action-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
  flex-wrap: wrap;
}

.btn-intro-play {
  padding: 10px 28px;
  border-radius: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: .82rem;
  letter-spacing: .06em;
  cursor: pointer;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #0a0f14;
  text-transform: uppercase;
  transition: background .15s;
}
.btn-intro-play:hover { background: #3aefb0; border-color: #3aefb0; }

.btn-intro-tuto {
  padding: 10px 28px;
  border-radius: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: .82rem;
  letter-spacing: .06em;
  cursor: pointer;
  border: 1px solid rgba(45,216,160,.45);
  background: transparent;
  color: var(--gold);
  text-transform: uppercase;
  transition: background .15s, color .15s;
}
.btn-intro-tuto:hover { background: rgba(45,216,160,.12); }

/* ── Overview plateau + pièces dans les règles ── */
.rules-overview {
  margin-bottom: 4px;
}
.rules-overview-matrix {
  font-size: .84rem;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 14px;
}
.holo .rules-overview-matrix { color: var(--holo-text-mid); }

.rules-pieces-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.rules-piece-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rules-piece-icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.rules-piece-icon svg { width: 22px; height: 22px; }

.rules-piece-label {
  font-family: 'Orbitron', sans-serif;
  font-size: .68rem;
  color: var(--text2);
  letter-spacing: .04em;
}
.holo .rules-piece-label { color: var(--holo-text-primary); }

.rules-piece-role {
  font-size: .74rem;
  color: var(--text);
  opacity: .8;
}
.holo .rules-piece-role { color: var(--holo-text-mid); opacity: 1; }