/* ==================================================================
   DRAREK — composants partagés : métal gravé, étiquettes mono,
   boutons à arêtes vives, braises, champs.
   Cette direction n'a PAS de séparateur runique décoratif : les runes
   vivent dans l'anneau du dé et en filigrane du monde, nulle part ailleurs.
   ================================================================== */

/* --- Bronze coulé : le traitement de titre signature. --- */
.metal{
  background:linear-gradient(174deg,
    var(--bronze-haut) 0%, var(--bronze) 42%, var(--bronze-bas) 72%, var(--bronze-vif) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.metal--relief{ filter:drop-shadow(0 3px 0 rgba(0,0,0,.6));  }  /* H1, H2 de L'Épreuve */
.metal--sec{    filter:drop-shadow(0 3px 0 rgba(0,0,0,.55)); }  /* titres de section */

/* --- Étiquette mono : le surtitre de cette direction. --- */
.eti{
  display:block;
  font-family:var(--mono); font-weight:700; font-size:11px;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--bronze); margin-bottom:14px;
}
.eti--braise{ color:var(--braise); margin-bottom:0; }
.eti--serre{ font-size:10.5px; letter-spacing:.28em; color:var(--cendre); margin-bottom:0; }

/* ---------------- Boutons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--titre); font-weight:700; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase;
  padding:17px 32px; border-radius:var(--rayon);
  border:1px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease,
             background .18s ease, color .18s ease, border-color .18s ease;
}
/* Version compacte : barre d'action de L'Épreuve. */
.btn--p{ padding:13px 26px; font-size:12px; }

/* Les boutons pleins portent un reflet balayable : le dégradé fait 220% de
   large et sa position glisse au survol, comme une lumière sur du métal poli. */
.btn--bronze,
.btn--sang{
  background-size:220% 100%;
  background-position:78% 0;
  transition:transform .2s ease, background-position .7s cubic-bezier(.2,.7,.3,1);
}
.btn--bronze:hover,
.btn--sang:hover{ transform:translateY(-2px); background-position:20% 0; }

.btn--bronze{
  color:var(--sur-bronze);
  background-image:linear-gradient(110deg,
    var(--bronze-bas) 0%, var(--bronze-milieu) 22%, var(--bronze-eclat) 34%,
    var(--bronze-milieu) 46%, var(--bronze-bas) 70%);
  box-shadow:inset 0 1px 0 rgba(255,246,228,.7), 0 10px 26px rgba(0,0,0,.55);
}

/* Bouton braise : le secondaire de cette direction (plus d'« gravé » bronze). */
.btn--braise{
  color:var(--braise);
  border-color:rgba(226,144,63,.45);
  background:transparent;
}
.btn--braise:hover{ background:rgba(226,144,63,.12); transform:translateY(-2px); }
/* Variante pleine, utilisée dans la barre d'action du dé. */
.btn--braise-plein{
  border-color:rgba(226,144,63,.5);
  background:rgba(226,144,63,.07);
}
.btn--braise-plein:hover{ background:rgba(226,144,63,.18); }

.btn--sang{
  color:var(--sur-sang);
  background-image:linear-gradient(110deg,
    var(--sang-bas) 0%, var(--sang) 26%, var(--sang-eclat) 38%,
    var(--sang) 50%, var(--sang-bas) 74%);
  box-shadow:0 10px 26px rgba(0,0,0,.5);
  padding:16px 28px;
}

.btn[disabled]{ opacity:.34; pointer-events:none; }

/* ---------------- Braises ----------------
   Vive : un charbon qui respire. Morte : un trou mat.
   --lueur est multiplié par le réglage emberGlow (0.4–1.8). --- */
.braise{
  --lueur:1;
  width:14px; height:14px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 35% 30%,
    var(--braise-haut), var(--braise-chaude) 60%, var(--braise-bas));
  box-shadow:0 0 calc(12px * var(--lueur)) rgba(226,144,63, calc(.8 * var(--lueur))),
             inset 0 0 3px rgba(255,240,210,.7);
  transition:background .3s ease, box-shadow .3s ease;
}
.braise--morte{
  background:var(--braise-morte);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
  animation:none !important;
}
/* Pastille de place, dans les colonnes de table : plus petite, sans respiration. */
.braise--place{ width:11px; height:11px; box-shadow:0 0 10px rgba(226,144,63,.7); }
.braise--place.braise--morte{ box-shadow:none; }

/* ---------------- Champ de saisie ---------------- */
.champ{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.champ input{
  flex:1; min-width:180px;
  background:rgba(6,11,8,.7);
  border:1px solid rgba(166,139,110,.32);
  color:var(--os);
  padding:14px 16px;
  font-family:var(--corps); font-size:16px; border-radius:var(--rayon);
}
.champ input:focus{ border-color:var(--braise); outline:none; }
.champ .btn{ padding:14px 26px; }