/* ---------- Barre de capacités ---------- */
  /* Contrôle des créatures alliées : au-dessus de la barre de sorts, masqué
     tant qu'aucun allié n'est présent */
  #petControl{
    position:absolute; left:50%; bottom:122px; transform:translateX(-50%);
    display:none; align-items:center; gap:5px;
    padding:5px 9px; border-radius:999px;
    background:rgba(20,16,24,.9); border:1px solid var(--panel-edge);
    box-shadow:0 4px 14px rgba(0,0,0,.5); z-index:6; white-space:nowrap;
  }
  #petControl.show{ display:flex; }
  #petControl .pc-lbl{ font-size:.72rem; font-weight:bold; color:var(--ink-dim);
    letter-spacing:.04em; margin-right:2px; }
  .pc-btn{
    font:inherit; font-size:.72rem; font-weight:bold; cursor:pointer;
    padding:3px 9px; border-radius:999px; white-space:nowrap;
    background:#2a2436; border:1px solid var(--panel-edge); color:var(--ink-dim);
    transition:background .12s, border-color .12s, color .12s;
  }
  .pc-btn:hover{ border-color:var(--target); color:var(--ink); }
  .pc-btn.active{ background:var(--accent-dim,#5c4a78); color:#fff; border-color:var(--accent,#e0a83c); }
  body.uiHidden #petControl{ display:none !important; }
  /* Rappel "fin de tour" (js/41) : plus haut que #petControl (122px) et
     #formPicker (02-zone-jeu-tir.css, 138px) pour ne jamais les chevaucher
     si plusieurs de ces pastilles sont visibles en même temps — la pile
     entière a été relevée de 26px (2026-09-03) pour laisser sa place à
     #hpBarBottom, juste au-dessus de la barre de capacités. */
  /* PLUS GROS, EN OR — 2026-09-03, retour Pixel : « plus gros au-dessus de la
     barre de vie du bas, en orange comme le bouton fin de tour du haut ».
     Même couleur que #btnEndTurn (css/01 : var(--accent) / texte sombre) —
     c'est la même action, elle doit se reconnaître au premier coup d'œil. */
  #endTurnReminder{
    position:absolute; left:50%; bottom:158px; transform:translateX(-50%);
    display:none;
    padding:10px 22px; border-radius:999px;
    font:inherit; font-size:.94rem; font-weight:700; letter-spacing:.02em;
    white-space:nowrap; cursor:pointer; z-index:6;
    background:var(--accent); border:1px solid var(--accent); color:#1a1208;
    box-shadow:0 4px 16px rgba(224,168,60,.35), 0 4px 14px rgba(0,0,0,.5);
    animation:endTurnReminderIn .18s ease-out;
  }
  #endTurnReminder.show{ display:block; }
  #endTurnReminder:hover{ background:#f0bc55; border-color:#f0bc55; }
  @keyframes endTurnReminderIn{
    from{ opacity:0; transform:translateX(-50%) translateY(6px); }
    to{ opacity:1; transform:translateX(-50%) translateY(0); }
  }
  body.uiHidden #endTurnReminder{ display:none !important; }
  /* BARRE DE VIE AU-DESSUS DE LA BARRE DE SORTS, PC (2026-09-03, demande
     Pixel : « mets une barre de vie au-dessus de la barre de sort en PC »).
     Un simple rappel compact (#vitals, en haut à gauche, reste la référence
     complète) posé là où le regard reste en combat. Desktop uniquement — le
     mobile a déjà sa propre barre de vie permanente sous l'en-tête (voir
     #vitals.mp-collapsed, 13-mobile.css), qui la masque ici pour ne pas
     doubler l'information. */
  /* LARGEUR ÉGALE À LA BARRE DE SORTS, DANS TOUS LES MODES (2026-09-03,
     retour Pixel : « cette barre fait la taille de la barre de sort en
     largeur ») — pilotée en JS (syncHpBarBottomWidth(), js/41), qui recopie
     #abilityBar.offsetWidth ici à chaque rendu de la barre et à chaque
     redimensionnement : #abilityBar grandit/rétrécit avec le nombre de sorts
     possédés (jusqu'à sa propre max-width), rien de fixe ne pourrait suivre. */
  #hpBarBottom{
    position:absolute; left:50%; bottom:90px; transform:translateX(-50%);
    display:flex; align-items:center; gap:8px;
    box-sizing:border-box;
    padding:5px 12px;
    background:rgba(20,16,24,.88);
    border:1px solid var(--panel-edge);
    border-radius:999px;
    z-index:6; user-select:none;
  }
  #hpBarBottomNum{ flex:none; color:var(--ink); font-size:.82rem; font-weight:700; min-width:1.6em; text-align:right }
  #hpBarBottomTrack{
    flex:1; min-width:0; height:10px; border-radius:999px;
    background:#241d2e; overflow:hidden;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
  }
  #hpBarBottomFill{
    display:block; height:100%; border-radius:999px;
    background:#5fce6a; transition:width .18s ease, background .18s ease;
  }
  #abilityBar{
    position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
    display:flex; gap:8px;
    flex-wrap:nowrap;                            /* déborde ? ascenseur horizontal */
    overflow-x:auto; overflow-y:hidden;
    max-width:calc(100vw - 24px);
    padding:8px;
    background:rgba(20,16,24,.88);
    border:1px solid var(--panel-edge);
    border-radius:10px;
    user-select:none;
    scrollbar-width:thin;                        /* Firefox */
    scrollbar-color:#5c4a78 #1a1520;
  }
  #abilityBar::-webkit-scrollbar{ height:8px; }
  #abilityBar::-webkit-scrollbar-track{ background:#1a1520; border-radius:4px; }
  #abilityBar::-webkit-scrollbar-thumb{ background:#5c4a78; border-radius:4px; }
  #abilityBar::-webkit-scrollbar-thumb:hover{ background:#7a63a0; }
  #abilityBar > *{ flex-shrink:0; }              /* les slots gardent leur taille */
  .slot{
    position:relative;
    width:58px; height:58px;
    border:2px solid var(--panel-edge);
    border-radius:8px;
    background:#231d2c;
    display:flex; align-items:center; justify-content:center;
    font-size:1.7rem;
    cursor:pointer;
    transition:border-color .12s, background .12s, transform .05s;
  }
  .slot:hover{border-color:var(--accent-dim); background:#2b2336}
  .slot:active{transform:translateY(1px)}
  .slot.selected{
    border-color:var(--target);
    box-shadow:0 0 10px rgba(92,200,216,.45);
  }
  .slot.disabled{
    opacity:.45; cursor:not-allowed;
  }
  .slot .key{
    position:absolute; top:2px; left:5px;
    font-size:.62rem; color:var(--ink-dim);
  }
  .slot .cost{
    position:absolute; bottom:2px; right:5px;
    font-size:.68rem; font-weight:700; color:var(--accent);
    text-shadow:0 1px 2px #000;
  }
  .slot .cd{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(10,8,14,.72);
    border-radius:6px;
    font-size:1.3rem; font-weight:700; color:var(--ink);
  }
  .slot .qty{
    position:absolute; top:1px; right:2px;
    font-size:.72rem; font-weight:700; color:#1a141e;
    background:#ffd860; border-radius:8px; padding:0 5px; line-height:1.35;
    box-shadow:0 1px 2px rgba(0,0,0,.4);
  }
  /* les infobulles des slots passent par la boîte flottante #edTip
     (position:fixed) : l'ascenseur horizontal de la barre ne les rogne pas */
  .ed-tip-box .meta{color:var(--accent); display:block; margin:2px 0}
  .ed-tip-box{ max-width:220px }