/* Console d'aménagement — la palette de meubles et son bandeau d'aide.
 *
 * Feuille à part, comme celle de la console de calage, et pour la même raison :
 * elle servira aussi l'étage de tour-arène, qui ne vivra pas dans hub.html.
 * Recopier le bloc garantirait qu'ils divergent.
 *
 * Elle se range à DROITE. La console de calage occupe déjà le coin haut gauche
 * et la mini-map le bas : les trois doivent pouvoir être ouvertes ensemble
 * pendant qu'on bâtit, sans se recouvrir.
 */
#amenagement-panneau {
  position: fixed; top: 12px; right: 12px; z-index: 58;
  width: 260px; max-height: calc(100vh - 24px);
  display: flex; flex-direction: column;
  border: 1px solid var(--line, rgba(126, 221, 238, .25)); border-radius: 10px;
  background: rgba(5, 18, 26, .93); color: #dff1f8;
  font: 11px/1.45 Inter, Bahnschrift, "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .55); backdrop-filter: blur(4px);
}
#amenagement-panneau header {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-bottom: 1px solid rgba(126, 221, 238, .18);
}
#amenagement-panneau header b { font-size: 10px; letter-spacing: .14em; color: var(--cyan, #6ce8ff); }
#amenagement-panneau header span { flex: 1; font-size: 10px; color: var(--muted, #82a2ad); }
#amenagement-panneau header button {
  border: 0; background: none; color: #7fa8b8; font-size: 15px; line-height: 1; padding: 0 2px;
}
#amenagement-panneau header button:hover { color: #eaf7fb; }

/* La barre d'outils. Elle ne défile pas avec la palette : la main et le niveau
   courant sont l'état de l'éditeur, pas des entrées de catalogue, et les perdre
   de vue en descendant dans la liste fait poser au mauvais étage. */
.amenagement-outils {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-bottom: 1px solid rgba(126, 221, 238, .18);
}
.amenagement-outils > [data-outil] {
  flex: 1; padding: 5px 8px; text-align: left;
  border: 1px solid rgba(126, 221, 238, .2); border-radius: 6px;
  background: rgba(11, 31, 39, .9); color: #9dc6d4;
  font: 600 10px/1.3 inherit; letter-spacing: .06em;
}
.amenagement-outils > [data-outil]:hover { border-color: #2f7d95; }
.amenagement-outils > [data-outil].actif { background: #12414f; border-color: #4bb6d4; color: #eaf9ff; }
.amenagement-niveau { display: flex; align-items: center; gap: 4px; }
.amenagement-niveau b {
  min-width: 62px; text-align: center; font-size: 9.5px; letter-spacing: .1em;
  color: var(--gold, #ffc875);
}
.amenagement-niveau button {
  width: 20px; height: 20px; line-height: 1; padding: 0;
  border: 1px solid rgba(126, 221, 238, .25); border-radius: 5px;
  background: rgba(11, 31, 39, .9); color: #cfe9f2; font-size: 12px;
}
.amenagement-niveau button:hover:not(:disabled) { border-color: #4bb6d4; color: #eaf9ff; }
.amenagement-niveau button:disabled { opacity: .3; }

/* La palette défile, le bandeau d'aide reste : la liste fait vingt-deux entrées
   sur le catalogue de défi et l'on doit garder les gestes sous les yeux en la
   parcourant. */
#amenagement-panneau [data-role="palette"] { overflow-y: auto; padding: 8px 10px 10px; }
.amenagement-categorie {
  display: block; margin: 9px 0 5px; font-size: 9px; letter-spacing: .12em;
  color: var(--muted, #82a2ad);
}
.amenagement-categorie:first-child { margin-top: 0; }
.amenagement-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.amenagement-grille button {
  display: flex; flex-direction: column; gap: 2px; padding: 6px 7px;
  border: 1px solid rgba(126, 221, 238, .2); border-radius: 6px;
  background: rgba(11, 31, 39, .9); color: #9dc6d4; text-align: left;
}
.amenagement-grille button b { font-size: 10px; font-weight: 600; color: #dff1f8; line-height: 1.25; }
.amenagement-grille button em { font-style: normal; font-size: 9px; color: var(--muted, #82a2ad); }
.amenagement-grille button:hover { border-color: #2f7d95; }
.amenagement-grille button.actif { background: #12414f; border-color: #4bb6d4; }
.amenagement-grille button.actif b { color: #eaf9ff; }

#amenagement-panneau footer {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 10px; border-top: 1px solid rgba(126, 221, 238, .18);
  font-size: 9.5px; color: var(--muted, #82a2ad);
}
#amenagement-panneau kbd {
  padding: 0 3px; border: 1px solid rgba(126, 221, 238, .3); border-radius: 3px;
  background: rgba(11, 31, 39, .9); font: inherit; color: #cfe9f2;
}
#amenagement-panneau [data-role="valeur"] { color: var(--gold, #ffc875); }