/* ---------- Inventaire / équipement (accessible à tout moment) ---------- */
  /* ---------- Livre de l'aventurier (codex) ---------- */
/* SOUS LE MENU DU HAUT, JAMAIS DESSOUS (2026-09-04, demande Pixel : « la
     fenêtre passe sous le menu du haut et le bouton du bas n'est pas
     accessible »). Ces fenêtres partaient de inset:0, donc du HAUT DE L'ÉCRAN :
     leur carte occupait toute la hauteur et son en-tête disparaissait derrière
     la barre de menu (z-index:70), poussant le bas du contenu hors d'atteinte.
     On les ancre au bas de l'en-tête via `--hdr-h`, sa hauteur MESURÉE
     (syncHeaderHeightVar, js/44), l'en-tête passant à deux rangées sur écran
     étroit. Ancrées en haut ET en bas, elles n'ont plus besoin de height:100dvh
     (voir css/14, d'où elles sont retirées). */
  #book{ position:fixed; top:var(--hdr-h, 80px); left:0; right:0; bottom:0; display:none; align-items:center; justify-content:center;
         background:rgba(8,6,12,.85); z-index:30 }
  #book.show{ display:flex }
  .book-card{ background:var(--panel); border:1px solid var(--accent-dim); border-radius:14px;
    width:min(920px, 96vw); max-height:92vh; display:flex; flex-direction:column;
    box-shadow:0 16px 50px rgba(0,0,0,.65); animation:pop .3s ease-out; overflow:hidden }
  .book-head{ display:flex; align-items:center; justify-content:space-between;
    padding:14px 20px 8px; }
  .book-head h2{ color:var(--accent); font-size:1.25rem; letter-spacing:.06em; margin:0 }
  #bookClose{ background:#2a2436; border:1px solid var(--panel-edge); color:var(--ink);
    width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:1rem;
    display:flex; align-items:center; justify-content:center; line-height:1; padding:0; flex:none }
  #bookClose:hover{ border-color:var(--target) }
  .book-tabs{ display:flex; gap:6px; flex-wrap:wrap; padding:0 20px 8px }
  .book-tab{ font:inherit; font-size:.8rem; font-weight:bold; cursor:pointer; color:var(--ink-dim);
    background:#2a2436; border:1px solid var(--panel-edge); border-radius:999px; padding:5px 12px }
  .book-tab:hover{ border-color:var(--target); color:var(--ink) }
  .book-tab.active{ background:var(--accent-dim,#5c4a78); color:#fff; border-color:var(--accent,#e0a83c) }
  .book-controls{ display:flex; gap:10px; align-items:center; flex-wrap:wrap;
    padding:6px 20px 10px; border-bottom:1px solid var(--panel-edge); font-size:.76rem; color:var(--ink-dim) }
  .book-controls input, .book-controls select{ font:inherit; font-size:.78rem; color:var(--ink);
    background:#231d2c; border:1px solid var(--panel-edge); border-radius:6px; padding:4px 8px }
  .book-controls input{ flex:1; min-width:150px }
  .book-controls label{ display:flex; align-items:center; gap:5px }
  .book-count{ margin-left:auto; color:var(--ink-dim) }
  .book-rank{ margin:2px 20px 0; padding:9px 14px; border-radius:8px;
    background:linear-gradient(90deg,#2a2036,#231d2c); border:1px solid var(--accent-dim,#5c4a78);
    display:flex; align-items:center; gap:12px; flex-wrap:wrap }
  .book-rank .br-title{ font-size:1.02rem; font-weight:bold; color:#e0c060 }
  .book-rank .br-sub{ color:var(--ink-dim); font-size:.78rem }
  .book-rank .br-bar{ flex:1; min-width:120px; height:8px; border-radius:5px;
    background:#171320; overflow:hidden; border:1px solid #3a3048 }
  .book-rank .br-fill{ height:100%; background:linear-gradient(90deg,#8f6fd0,#e0c060); border-radius:5px }
  .book-rank .br-score{ color:#e0c060; font-weight:bold }
  .book-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    gap:10px; padding:14px 20px; overflow-y:auto; align-content:start }
  /* Chaque case a une hauteur FIXE ; le contenu qui déborde est masqué, et la
     case s'agrandit en OVERLAY au survol pour tout rendre lisible sans décaler. */
  .book-cell{ position:relative; height:126px }
  .bc-inner{ position:absolute; inset:0; background:#221c2e; border:1px solid var(--panel-edge);
    border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:4px; overflow:hidden;
    transition:box-shadow .12s, border-color .12s }
  .book-cell:hover{ z-index:20 }
  .book-cell:hover .bc-inner{ bottom:auto; height:auto; min-height:100%; overflow:visible;
    box-shadow:0 10px 28px rgba(0,0,0,.7); border-color:var(--target); background:#2a2338 }
  .book-cell.unknown .bc-inner{ background:repeating-linear-gradient(135deg,#141019 0 8px,#0f0b14 8px 16px);
    border-color:#241d2e; align-items:center; justify-content:center; color:#4a4358; font-size:1.6rem; font-weight:bold }
  /* INDICE DE SUCCÈS AU RANG MAXIMAL (voir renderBook, js/52) : la case reste
     un « ??? » au repos, et livre le BUT du succès au survol. Le title= natif
     dit la même chose — il reste le seul repli là où il n'y a pas de souris. */
  .book-cell .bc-hint{ display:none }
  .book-cell.unknown.has-hint{ cursor:help }
  .book-cell.unknown.has-hint:hover .bc-inner{ font-size:.72rem; font-weight:normal;
    color:var(--ink-dim); text-align:center; padding:8px; line-height:1.3;
    align-items:center; background:#221c2e; border-color:var(--target) }
  .book-cell.unknown.has-hint:hover .bc-inner{ font-size:0 }        /* masque le « ??? » */
  .book-cell.unknown.has-hint:hover .bc-hint{ display:block; font-size:.72rem }
  .book-cell .bc-hint b{ display:block; margin-bottom:3px; color:var(--accent, #e0b050);
    font-size:.78rem; letter-spacing:.02em }
  .book-cell .bc-top{ display:flex; align-items:center; gap:7px }
  .book-cell .bc-ico{ font-size:1.5rem; line-height:1; width:1.6em; text-align:center }
  .book-cell .bc-ico img{ width:1.5em; height:1.5em; vertical-align:middle; image-rendering:pixelated }
  .book-cell .bc-name{ font-weight:bold; font-size:.82rem; color:var(--ink); line-height:1.15 }
  .book-cell .bc-badges{ display:flex; gap:4px; flex-wrap:wrap; margin-top:1px }
  .bc-badge{ font-size:.58rem; font-weight:bold; text-transform:uppercase; letter-spacing:.03em;
    padding:1px 6px; border-radius:999px; border:1px solid currentColor }
  .book-cell .bc-desc{ font-size:.68rem; color:var(--ink-dim); line-height:1.3 }
  .book-cell .bc-stats{ font-size:.68rem; color:#9fe0a0; line-height:1.3 }
  .book-empty{ grid-column:1/-1; text-align:center; color:var(--ink-dim); padding:24px; font-size:.85rem }
  /* succès verrouillé (visible mais grisé) dans l'onglet Succès */
  .book-cell.locked .bc-inner{ opacity:.55; filter:grayscale(.5) }
  .book-cell.locked .bc-name::after{ content:" 🔒"; font-size:.7em }
  .bc-ach-when{ font-size:.6rem; color:#7fd08f; margin-top:2px }
  /* ---------- Sélecteur visuel admin (/spawn et /item) ---------- */
  /* même overlay que #book, mais z-index AU-DESSUS de #consolePanel (130,
     voir css/07) : la fenêtre doit rester visible par-dessus la console
     depuis laquelle elle a été ouverte. */
  #cheatPicker{ position:fixed; top:var(--hdr-h, 80px); left:0; right:0; bottom:0; display:none; align-items:center; justify-content:center;
                background:rgba(8,6,12,.85); z-index:135 }
  #cheatPicker.show{ display:flex }
  #cheatPicker .book-card{ width:min(760px, 94vw) }
  #cheatPicker .book-grid{ grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)) }
  /* cases CLIQUABLES (contrairement au livre, purement informatif). Le picker
     /spawn et /item ont trop d'entrées pour se permettre de déplier une
     description : ils restent compacts (icône + nom tronqué, sans survol). */
  #cheatPickerGrid:not(.cp-easy) .book-cell{ height:64px; cursor:pointer }
  #cheatPickerGrid:not(.cp-easy) .bc-inner{ flex-direction:row; align-items:center; justify-content:center;
    text-align:center; height:100%; overflow:hidden }
  #cheatPickerGrid:not(.cp-easy) .book-cell:hover .bc-inner{ min-height:0; height:100%; overflow:hidden }
  #cheatPickerGrid:not(.cp-easy) .bc-top{ flex-direction:column; gap:3px; width:100% }
  #cheatPickerGrid:not(.cp-easy) .bc-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100% }
  /* /easylist (cp-easy) : cases cliquables mais lisibles — icône+nom en ligne,
     description repliée dessous ; le survol déplie la case en overlay pour
     lire la description complète, exactement comme le livre de l'aventurier
     (règles générales .book-cell/.bc-inner plus haut, réutilisées telles
     quelles : on ne fait que les REACTIVER ici en écartant l'override ci-dessus). */
  #cheatPickerGrid.cp-easy{ grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)) }
  #cheatPickerGrid.cp-easy .book-cell{ height:80px; cursor:pointer }
  #cheatPickerGrid.cp-easy .bc-desc{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
  #cheatPickerGrid.cp-easy .book-cell:hover .bc-desc{ -webkit-line-clamp:unset; overflow:visible }
  /* /spawn : UN SEUL compteur −/+/nombre, dans l'en-tête du panneau (partagé
     par toutes les cases — voir #cheatPickerQty, index.html), pas un par case. */
  .bc-qty{ display:none; align-items:center; gap:5px; cursor:default; margin-left:auto; margin-right:10px }
  .bc-qty-label{ font-size:.72rem; color:var(--ink-dim) }
  .bc-qty-btn{ width:1.7em; height:1.7em; line-height:1; border:1px solid var(--panel-edge); border-radius:4px;
    background:#2c2438; color:var(--ink); font-size:.9rem; cursor:pointer; padding:0 }
  .bc-qty-btn:hover{ background:#3a3048 }
  .bc-qty-val{ width:3em; text-align:center; background:#181420; border:1px solid var(--panel-edge); border-radius:4px;
    color:var(--ink); font-size:.8rem; padding:3px 0 }

  /* ---------- Livre de sort (ordre de la barre de capacités) ---------- */
  #spellbook{ position:fixed; top:var(--hdr-h, 80px); left:0; right:0; bottom:0; display:none; align-items:center; justify-content:center;
              background:rgba(8,6,12,.85); z-index:30 }
  #spellbook.show{ display:flex }
  .sb-card{ width:min(420px, 92vw); max-height:86vh }
  .sb-sub{ padding:0 20px 10px; color:var(--ink-dim); font-size:.78rem; line-height:1.35 }
  .sb-list{ display:flex; flex-direction:column; gap:6px; padding:4px 20px 14px; overflow-y:auto }
  .sb-row{ display:flex; align-items:center; gap:10px; background:#221c2e;
           border:1px solid var(--panel-edge); border-radius:8px; padding:6px 10px }
  .sb-row .sb-key{ color:var(--ink-dim); font-size:.72rem; width:18px; text-align:center; flex:none }
  .sb-row .sb-ic{ font-size:1.1rem; width:22px; text-align:center; flex:none }
  .sb-row .sb-ic img{ width:1.1em; height:1.1em; vertical-align:middle; image-rendering:pixelated }
  .sb-row .sb-nm{ flex:1; font-size:.85rem; color:var(--ink) }
  .sb-row .sb-mv{ display:flex; gap:3px; flex:none }
  .sb-row .sb-mv button{ background:#2a2436; border:1px solid var(--panel-edge); color:var(--ink);
    width:24px; height:24px; border-radius:6px; cursor:pointer; font-size:.8rem; line-height:1; padding:0 }
  .sb-row .sb-mv button:hover:not(:disabled){ border-color:var(--target) }
  .sb-row .sb-mv button:disabled{ opacity:.3; cursor:default }
  .sb-foot{ padding:8px 20px 16px; display:flex; justify-content:flex-end;
            border-top:1px solid var(--panel-edge) }
  #sbReset{ background:#2a2436; border:1px solid var(--panel-edge); color:var(--ink);
    border-radius:8px; padding:6px 14px; cursor:pointer; font-size:.8rem }
  #sbReset:hover{ border-color:var(--target) }