/* ============================================================
   Animation d'ouverture de coffre — feuille de style
   Pilotée par 2 attributs sur .coffre-stage :
     data-tier="1..9"  (votre $coffre->niv_rarete)
     data-dore="0|1"   (votre $coffre->bonus_or > 0)
   ============================================================ */

.coffre-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 60vh; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%, #1c1e22, #0a0a0b);
}
/* variante quand la scène vit dans une modale plein écran */
.coffre-stage--modal { min-height: 0; height: 100%; width: 100%; }

/* ---------- vos couleurs ($COULEURS_RARETES) ----------
   --rar-bg : TOUJOURS un dégradé (même pour les couleurs pleines) afin de pouvoir
              l'utiliser avec background-image + background-clip:text.
   --rar    : couleur pleine dérivée (halo, rayons, anneaux, bordures).
   La classe est réutilisable : posez-la sur la scène ET sur le contenu de la modale
   de butin, sinon les variables ne sont pas héritées. */
.coffre-rar { --rar:#e0e0e0; --rar-bg:linear-gradient(90deg,#e0e0e0,#e0e0e0); }
.coffre-rar[data-tier="1"] { --rar:#e0e0e0; --rar-bg:linear-gradient(90deg,#e0e0e0,#e0e0e0); }
.coffre-rar[data-tier="2"] { --rar:#00ff00; --rar-bg:linear-gradient(90deg,#00ff00,#00ff00); }
.coffre-rar[data-tier="3"] { --rar:#4763ff; --rar-bg:linear-gradient(90deg,#0000ff,#0000ff); }
.coffre-rar[data-tier="4"] { --rar:#a24fa2; --rar-bg:linear-gradient(90deg,#800080,#800080); }
.coffre-rar[data-tier="5"] { --rar:#cafdff; --rar-bg:linear-gradient(90deg,#cafdff 0%,#ffd700 100%); }
.coffre-rar[data-tier="6"] { --rar:#ffd700; --rar-bg:linear-gradient(90deg,#ffd700,#ffd700); }
.coffre-rar[data-tier="7"] { --rar:#ff0000; --rar-bg:linear-gradient(90deg,#ff0000,#ff0000); }
.coffre-rar[data-tier="8"] { --rar:#00c3ff; --rar-bg:linear-gradient(90deg,#00c3ff 0%,#800080 100%); }
.coffre-rar[data-tier="9"] { --rar:#ff4dd2;
  --rar-bg:linear-gradient(90deg,#ff2d55 0%,#ff8a00 16%,#ffe600 33%,#3ddc4a 50%,#00c3ff 66%,#7b5cff 83%,#e05cff 100%); }

/* ---------- le coffre ----------
   .coffre-fx porte les animations CSS (secousse, teinte),
   .coffre reçoit le transform:scale() du JS. Ne jamais mélanger les deux. */
.coffre-fx { position: relative; }
.coffre {
  position: relative; width: 230px; height: 190px;
  filter: drop-shadow(0 18px 30px #000000aa);
  transition: transform .16s cubic-bezier(.2,1.6,.4,1);
}
.coffre-lid, .coffre-body {
  border: 3px solid #2b2b2e; box-sizing: border-box;
  background-image: var(--rar-bg);
  transition: background-image .45s ease, border-color .3s ease, box-shadow .3s ease;
}
.coffre-lid {
  position: absolute; inset: 0 0 auto 0; height: 86px; border-radius: 96px 96px 8px 8px;
  transform-origin: 50% 100%;
  transition: transform .5s cubic-bezier(.2,1.3,.3,1), background-image .45s ease, border-color .3s ease;
}
.coffre-body { position: absolute; top: 86px; left: 0; width: 100%; height: 104px; border-radius: 8px; overflow: hidden; }
.coffre-band { position: absolute; left: 50%; top: 0; translate: -50% 0; width: 22px; height: 100%;
  background: #ffffffcc; transition: background .3s ease; }
.coffre-belt { position: absolute; left: 0; top: 26px; width: 100%; height: 16px;
  background: #2b2b2e; transition: background .3s ease; }
.coffre-lock { position: absolute; left: 50%; top: 92px; translate: -50% 0; width: 34px; height: 44px;
  border-radius: 5px; background: #2b2b2e; color: #f6f4ee; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s ease, color .3s ease, box-shadow .3s ease; }
.coffre[data-open="1"] .coffre-lid { transform: rotate(-112deg); }

/* ---------- coffre doré (bonus_or) : couche indépendante de la rareté ---------- */
.coffre-stage[data-dore="1"] .coffre-lid,
.coffre-stage[data-dore="1"] .coffre-body { border-color: #ffd700;
  box-shadow: 0 0 0 2px #ffd70055, 0 0 22px #ffd70066; }
.coffre-stage[data-dore="1"] .coffre-band { background: #fff8d0; }
.coffre-stage[data-dore="1"] .coffre-belt,
.coffre-stage[data-dore="1"] .coffre-lock { background: linear-gradient(180deg,#ffe680,#ffd700 45%,#b8860b); }
.coffre-stage[data-dore="1"] .coffre-lock { color: #6b4a05; box-shadow: 0 0 14px #ffd70099; }
.coffre-dore { display: none; position: absolute; inset: 0; overflow: hidden;
  border-radius: 96px 96px 8px 8px; pointer-events: none; }
.coffre-stage[data-dore="1"] .coffre-dore { display: block; }
.coffre-dore span { position: absolute; top: 0; left: 0; width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, #fff8d0cc, transparent);
  animation: coffre-shine 1.8s ease-in-out infinite; }

/* ---------- halo (dès Insolite, 2) ---------- */
.coffre-glow { position: absolute; width: 340px; aspect-ratio: 1; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, var(--rar), transparent 68%); filter: blur(14px); transition: opacity .5s; }
.coffre-stage:not([data-tier="1"]) .coffre-glow { opacity: .85; }

/* ---------- rayons rotatifs (dès Rare, 3) : 36 rayons sur 360° ---------- */
.coffre-rays { position: absolute; width: 150%; aspect-ratio: 1; display: none; opacity: .5;
  background: repeating-conic-gradient(from 0deg, transparent 0deg, var(--rar) 1.8deg, var(--rar) 4.2deg, transparent 6deg, transparent 10deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 22%, #000 60%, transparent);
  mask-image: radial-gradient(closest-side, transparent 22%, #000 60%, transparent);
  animation: coffre-spin 22s linear infinite; }

/* ---------- affichage cumulatif des couches par palier ---------- */
.coffre-layer, .coffre-vortex, .coffre-rainbow { display: none; position: absolute; inset: 0; pointer-events: none; }
.coffre-stage:is([data-tier="3"],[data-tier="4"],[data-tier="5"],[data-tier="6"],[data-tier="7"],[data-tier="8"],[data-tier="9"])
  .coffre-rays { display: block; }
.coffre-stage:is([data-tier="4"],[data-tier="5"],[data-tier="6"],[data-tier="7"],[data-tier="8"],[data-tier="9"])
  .coffre-layer[data-fx="sparks"] { display: block; }                       /* Épique  */
.coffre-stage:is([data-tier="5"],[data-tier="6"],[data-tier="7"],[data-tier="8"],[data-tier="9"])
  .coffre-layer[data-fx="rings"] { display: block; }                        /* Héroïque */
.coffre-stage:is([data-tier="6"],[data-tier="7"],[data-tier="8"],[data-tier="9"])
  .coffre-layer[data-fx="gold"] { display: block; }                         /* Légendaire : pluie d'or */
.coffre-stage:is([data-tier="7"],[data-tier="8"],[data-tier="9"])
  .coffre-layer[data-fx="ruby"] { display: block; }                         /* Mythique : pluie de rubis */
.coffre-stage:is([data-tier="8"],[data-tier="9"]) .coffre-layer[data-fx="diamond"],
.coffre-stage:is([data-tier="8"],[data-tier="9"]) .coffre-vortex { display: block; }   /* Céleste */
.coffre-stage[data-tier="9"] .coffre-rainbow { display: block; }            /* Absolu  */

.coffre-stage:is([data-tier="7"],[data-tier="8"],[data-tier="9"]) .coffre-fx { animation: coffre-shake .38s linear infinite; }
.coffre-stage[data-tier="9"] .coffre-fx { animation: coffre-hue 2.4s linear infinite, coffre-shake .38s linear infinite; }

.coffre-vortex, .coffre-rainbow { width: 180vmax; height: 180vmax; inset: auto; }
.coffre-vortex { filter: blur(26px); animation: coffre-spin 9s linear infinite;
  background: conic-gradient(from 0deg, transparent 0deg, #00c3ff33 40deg, transparent 80deg, #80008044 140deg, transparent 190deg, #00c3ff44 250deg, transparent 300deg); }
.coffre-rainbow { opacity: .45; mix-blend-mode: screen; filter: blur(60px); animation: coffre-spin 6s linear infinite;
  background: conic-gradient(from 0deg, #ff2d55, #ff8a00, #ffe600, #3ddc4a, #00c3ff, #7b5cff, #e05cff, #ff2d55); }

.coffre-drop  { position: absolute; top: 0; opacity: 0; animation: coffre-fall linear infinite; }
.coffre-ring  { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 340px; aspect-ratio: 1;
  border-radius: 50%; border: 2px solid color-mix(in oklab, var(--rar) 70%, transparent);
  animation: coffre-ring 1.1s ease-out infinite; }
.coffre-spark { position: absolute; bottom: 24%; opacity: 0; color: var(--rar);
  text-shadow: 0 0 10px var(--rar); animation: coffre-float linear infinite; }

/* ---------- titre de rareté : le dégradé passe dans le texte ----------
   L'élément doit être dans un conteneur .coffre-rar[data-tier].
   N'appliquez JAMAIS un `background:` inline dessus : le raccourci réinitialise
   background-clip et le texte devient un bloc de couleur. Utilisez `background-image:`. */
.coffre-rarete { letter-spacing: .14em; text-transform: uppercase; font-size: clamp(24px, 4.2vh, 38px);
  background-image: var(--rar-bg); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px color-mix(in oklab, var(--rar) 55%, transparent)); }

@keyframes coffre-spin  { to { transform: rotate(360deg); } }
@keyframes coffre-hue   { to { filter: hue-rotate(360deg); } }
@keyframes coffre-shine { 0% { transform: translateX(-140%) skewX(-18deg); } 100% { transform: translateX(240%) skewX(-18deg); } }
@keyframes coffre-fall  { 0% { transform: translateY(-12vh) rotate(0); opacity: 0; } 8% { opacity: 1; }
  100% { transform: translateY(112vh) rotate(540deg); opacity: .9; } }
@keyframes coffre-float { 0% { transform: translateY(20px) scale(.5); opacity: 0; } 30% { opacity: 1; }
  100% { transform: translateY(-260px) scale(1.1); opacity: 0; } }
@keyframes coffre-ring  { 0% { transform: scale(.35); opacity: .85; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes coffre-shake { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-6px,3px); }
  50% { transform: translate(5px,-4px); } 75% { transform: translate(4px,3px); } }

@media (prefers-reduced-motion: reduce) { .coffre-stage * { animation: none !important; } }