/* ==================================================================
   DRAREK — L'Épreuve : bandeau pleine largeur, le dé est LA scène.
   L'effet clé du bloc : la lueur de forge monte du bas de la section.
   ================================================================== */

.epreuve{
  position:relative; overflow:hidden;
  padding:var(--pad-sec) clamp(16px,4.5vw,56px);
  background:
    radial-gradient(900px 620px at 50% 105%, rgba(194,89,31,.3) 0%, transparent 68%),
    linear-gradient(180deg, var(--nuit), var(--bandeau-epreuve) 40%, var(--nuit));
}
.epreuve__i{
  position:relative;
  max-width:var(--max-epreuve); margin:0 auto;
  text-align:center;
}

.epreuve__titre{
  font-weight:900; font-size:clamp(32px,6vw,64px);
  line-height:1; letter-spacing:.02em; margin:12px 0 0;
}
.epreuve__regle{
  max-width:56ch; margin:18px auto 0;
  font-size:17px; line-height:1.7; color:rgba(226,218,203,.74);
  text-wrap:pretty;
}
.epreuve__regle b{ color:var(--braise); font-weight:700; }

/* ---------------- Scène du dé : quatre calques ---------------- */
.scene{
  position:relative;
  margin:clamp(30px,5vw,52px) auto 0;
  width:min(360px,84vw); aspect-ratio:1;
  display:grid; place-items:center;
}

/* 1. Le halo de forge respire derrière le dé. */
.scene__halo{
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(226,144,63,.22) 0%, transparent 62%);
  animation:fg-breathe 6s ease-in-out infinite;
}

/* Étincelles de forge : elles montent du bas du bandeau et s'éteignent.
   Le calque est posé par mouvement.js — rien en reduced-motion. */
.etincelles{
  position:absolute; left:8%; right:8%; bottom:6%; top:0;
  pointer-events:none; overflow:hidden;
}
.etincelle{
  position:absolute; bottom:0; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #FFE0B0, var(--braise-chaude) 65%, transparent);
}

/* 2. Anneau runique. Chaque rune est un « bras » ancré au centre :
      height:50% + transform-origin:bottom center ⇒ le rayon vaut toujours
      la moitié du conteneur, donc c'est responsive sans calcul en px. */
.anneau{
  position:absolute; inset:4%;
  animation:fg-spin 130s linear infinite;
}
.anneau__rune{
  position:absolute; left:50%; top:0; height:50%;
  transform-origin:bottom center;
  font-family:var(--rune); font-size:16px; line-height:1;
  color:rgba(226,144,63,.42);
}

/* 3. Cercle fin. */
.scene__cercle{
  position:absolute; width:70%; height:70%;
  border-radius:50%; border:1px solid rgba(166,139,110,.22);
}

/* 4. Disque frappé : la pièce qu'on lance. */
.disque{
  position:relative; width:58%; height:58%; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 32% 24%,
    var(--disque-haut) 0%, var(--disque-milieu) 56%, var(--disque-bas) 100%);
  border:4px solid var(--bronze-bas);
  box-shadow:inset 0 4px 14px rgba(0,0,0,.85), 0 18px 44px rgba(0,0,0,.65);
  /* Le dé est un raccourci cliquable ; le bouton reste le chemin clavier. */
  cursor:pointer;
  transition:transform .25s ease, border-color .3s ease;
}
.disque:hover{ transform:scale(1.035); border-color:#8A7355; }
.disque::before{
  content:""; position:absolute; inset:9px; border-radius:50%;
  border:1px solid rgba(240,221,187,.13);
}
.disque__face{
  font-family:var(--mono); font-weight:700;
  font-size:clamp(44px,12vw,72px); color:var(--bronze-haut);
  text-shadow:0 3px 5px rgba(0,0,0,.9), 0 0 30px rgba(226,144,63,.35);
}

/* ---------------- Lecture, sous le dé, centrée ----------------
   Les min-height sont obligatoires : sinon la page saute au premier jet. */
.lecture__calc{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  color:var(--cendre); min-height:19px; margin-top:22px;
}
.lecture__verdict{
  font-family:var(--titre); font-weight:900;
  font-size:clamp(28px,6.4vw,56px); line-height:1.04; letter-spacing:.02em;
  margin:8px 0 6px; min-height:56px; color:var(--os);
}
.lecture__fl{
  font-style:italic; font-size:17px; color:rgba(226,218,203,.72);
  min-height:28px; max-width:44ch; margin:0 auto; text-wrap:pretty;
}

/* ---------------- Barre d'action ---------------- */
.epreuve__actions{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:14px 22px; margin-top:clamp(24px,3.4vw,38px);
}
.braises{ display:flex; align-items:center; gap:11px; }
.braises__l{
  font-family:var(--mono); font-weight:700; font-size:10.5px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--cendre);
}
.braises__jauge{ display:flex; align-items:center; gap:10px; }
.epreuve__boutons{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }