/* === Les outils, le cadre commun ======================================
   Les outils, une page chacun : raid, craft, arbre technologique. Panneaux sombres, liserés dorés, coins francs.
   Ici : le panneau, son introduction, sa note, et l’icône d’un objet dans sa case (la silhouette sur fond sombre,
   la ressource en coin). Ce qui sert à plusieurs outils tient ici.
   Vient du découpage de tools.css (21 oct. 2026), qui faisait 9 464 lignes à lui seul. Les douze tranches se
   chargent dans l’ordre d’avant, aucun style n’a changé d’effet. === */

.tools-panel {
  margin-top: 12px;
  padding: 24px 26px;
  border: 1px solid var(--line-gold);
  border-top: 3px solid var(--gold);
  background: var(--panel-gradient);
}
.tools-intro {
  margin: 0 0 16px;
  color: var(--text);
}
.tools-intro {
  max-width: 78ch;
  margin-bottom: 22px;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--line-gold);
  color: var(--text-soft);
  line-height: 1.55;
}
.tools-note {
  margin: 12px 0 0;
}
.tools-panel img,
.tools-panel .is-empty {
  flex: none;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

@media (max-width: 760px) {
  .tools-panel {
    padding: 18px;
  }
}

/* === Le Raid (raid-view.js) =======================================================
   Deux outils choisis par des cartes au-dessus du cadre ; dans le cadre, des étapes numérotées (catégories en grandes
   cartes, puis la cible, puis la réponse). Une couleur par moyen de casser : rouge Rust les explosifs, acier la mêlée,
   vert-de-gris les armes à feu. Le miel ne marque que les étapes et l'action « Ajouter au raid ». */

.tools-page {
  /* L’état « choisi » des boutons : fond brun éclairci, liseré brun, texte crème (ni aplat ni bordure claire) */
  --picked-bg: #342a20;
  --picked-edge: #6b5844;
  --c-explosives: #c8503c;
  --c-melee: #8fa3b0;
  --c-guns: #7fa37a;
  --c-siege: #b08d5e;
  --c-players: #c9b48a;
  --surface-1: #15120e;
  --surface-2: #1d1914;
  --surface-3: #262019;
  --edge: #2f2820;
  --edge-strong: #4d4234;
}

/* --- Une icône du jeu dans une case d'inventaire. Un bloc : sa silhouette (teinte crème) et, en coin, la ressource de
   son matériau --- */
.rd-slot {
  --size: 36px;
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border: 1px solid rgba(var(--sheen-rgb), 0.06);
  background: radial-gradient(circle at 50% 35%, rgba(var(--sheen-rgb), 0.07), rgba(var(--shadow-rgb), 0.35) 75%);
}
.rd-slot.is-m { --size: 58px; }
.rd-slot.is-l { --size: 48px; }
.rd-slot.is-xl { --size: 84px; }
.rd-slot > img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}
.rd-slot img.is-tinted {
  filter: brightness(0) invert(0.72) sepia(0.35);
}
.rd-slot__grade {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  place-items: center;
  width: 44%;
  height: 44%;
  border: 1px solid var(--edge-strong);
  background: #15120e;
}
.rd-slot__grade img {
  width: 86%;
  height: 86%;
  object-fit: contain;
}
.rd-slot.is-s .rd-slot__grade {
  width: 56%;
  height: 56%;
}
/* La paille coûte du bois, comme le bois : son icône pâlie les distingue */
.rd-slot__grade.is-twigs img,
.rd-grades .is-twigs img {
  filter: grayscale(0.8) brightness(0.8);
}
.rd-empty {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--fs-small);
}
.rd-badge {
  margin-left: 6px;
  padding: 0 5px;
  border: 1px solid var(--edge-strong);
  color: var(--text-soft);
  font: 700 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.rd-sulfur {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--parchment);
  font: 800 0.95rem "Roboto Condensed", sans-serif;
  white-space: nowrap;
}
.rd-sulfur img,
.rd-res img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}


/* Le cadre d'un outil, d'après le prototype du 6 oct. 2026 : un peu transparent sur le décor, son liseré
   doré, son ombre portée. (Écrit dans raid-fiche.css jusqu'au 24 oct., ce qui obligeait les six pages à
   charger la feuille de la Fiche de cible.) */
.tools-page {
  --g-twigs: #e2c25a;
  --g-wood: #a06a42;
  --g-stone: #cfccc4;
  --g-metal: #cf5a36;
  --g-toptier: #686e75;
}
.tools-page .tools-panel {
  border: 1px solid rgba(var(--gold-rgb), 0.22);
  border-top: 0;
  background: linear-gradient(180deg, rgba(28, 23, 18, 0.94), rgba(17, 14, 11, 0.95));
  box-shadow: 0 24px 60px rgba(var(--shadow-rgb), 0.55);
}