/* ---------- HUD haut ---------- */
  header{
    display:flex; align-items:center; gap:12px;
    padding:8px 14px;
    /* AU-DESSUS DES BANDEAUX FLOTTANTS (2026-09-03, retour Pixel : « les barres
       de vie des boss ne doivent pas passer par-dessus le menu du haut »).
       L'en-tête était `static` sans z-index : la barre de boss (fixed, z-62)
       lui passait donc dessus dès qu'elle remontait trop haut. Le z-index seul
       ne suffit pas — il faut AUSSI que la barre se pose sous l'en-tête, d'où
       la variable --hdr-h posée en JS (syncHeaderHeightVar, js/44). */
    position:relative; z-index:70;
    background:linear-gradient(180deg, var(--panel), #141018);
    border-bottom:1px solid var(--panel-edge);
    user-select:none;
    flex-wrap:wrap;
  }
  /* .hdr-info (titre + compteurs) et .hdr-menu (boutons) : sur desktop, ils
     se comportent comme une seule rangée continue (même gap, .hdr-info prend
     toute la place dispo comme le faisait le .spacer avant) — la séparation
     ne change RIEN visuellement ici, elle ne sert que sur mobile
     (13-mobile.css) où chacun passe sur sa propre ligne. */
  .hdr-info{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; flex-wrap:wrap; }
  .hdr-menu{ display:flex; align-items:center; gap:12px; flex:none; }
  header h1{
    font-size:1rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--accent); font-weight:700;
  }
  .stat{
    display:flex; align-items:center; gap:6px;
    font-size:.85rem; color:var(--ink-dim);
  }
  .stat b{color:var(--ink); font-size:1rem}
  /* les points (PA/PM) restent dans l'encart : ils vont à la ligne, au plus 2
     lignes, puis « … » si ça déborde encore (clampé en JS via clampPipsTwoLines) */
  .pa-pips{
    display:flex; flex-wrap:wrap; gap:3px;
    flex:1 1 0; min-width:0; align-content:flex-start;
    max-height:28px; overflow:hidden;
  }
  .pip-more{ align-self:center; color:var(--ink-dim); font-weight:bold; font-size:13px; line-height:12px; margin-left:1px }
  .pip{
    width:12px; height:12px; border-radius:3px;
    background:var(--accent); box-shadow:0 0 4px rgba(224,168,60,.5);
    transition:background .2s, box-shadow .2s;
  }
  .pip.off{background:#3a3344; box-shadow:none}
  .pip.pm{background:#4d9de0; box-shadow:0 0 4px rgba(77,157,224,.55)}
  .pip.pm.off{background:#2a3444; box-shadow:none}
  #hpBar{
    width:120px; height:12px; border-radius:6px;
    background:#3a2028; border:1px solid #55303a; overflow:hidden;
  }
  #hpFill{
    height:100%; width:100%;
    background:linear-gradient(90deg,#a03848,#c85868);
    transition:width .25s;
  }
  .spacer{flex:1}
  button{
    font:inherit; cursor:pointer;
    background:var(--panel); color:var(--ink);
    border:1px solid var(--panel-edge);
    padding:8px 16px; border-radius:6px;
    letter-spacing:.05em;
    transition:background .15s, border-color .15s, transform .05s;
  }
  button:hover{background:#241d2e; border-color:var(--accent-dim)}
  button:active{transform:translateY(1px)}
  button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  #btnEndTurn{
    background:var(--accent); color:#1a1208; border-color:var(--accent);
    font-weight:700;
  }
  #btnEndTurn:hover{background:#f0bc55}

  /* ---------- Menu déroulant ---------- */
  #menuWrap{position:relative}
  #menuPanel{
    position:absolute; top:calc(100% + 6px); right:0;
    display:none; flex-direction:column; gap:2px;
    min-width:220px;
    max-width:calc(100vw - 16px);
    max-height:min(70vh, calc(100vh - 120px));   /* jamais plus grand que l'écran */
    overflow-y:auto;
    background:var(--panel);
    border:1px solid var(--panel-edge); border-radius:8px;
    padding:6px;
    z-index:20;
    box-shadow:0 10px 30px rgba(0,0,0,.55);
  }
  #menuPanel.show{display:flex}
  .mi{
    text-align:left;
    border:none; background:transparent;
    padding:8px 10px; border-radius:6px;
  }
  .mi:hover{background:#241d2e; border:none}
  .mi-label{
    padding:6px 10px;
    font-size:.75rem; color:var(--ink-dim);
    letter-spacing:.05em;
  }
  .mi-sep{border:none; border-top:1px solid var(--panel-edge); margin:3px 0}
  .mi-audio-row{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:4px 10px 8px; font-size:.78rem; color:var(--ink-dim);
  }
  .mi-audio-row input[type="range"]{ width:110px; accent-color:var(--accent) }