/* ═══════════════════════════════════════════════════════════
   FILET MOBILE GLOBAL — chargé sur toutes les pages publiques.
   Empêche tout défilement horizontal parasite (éléments fixes,
   tableaux, débordements) et rend les médias fluides. `clip`
   (et non `hidden`) préserve position:sticky.
   ═══════════════════════════════════════════════════════════ */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100vw}
img,video,iframe,embed,object{max-width:100%}

/* Widget header — bloc fixe haut-droite (sous KRUCOINS/pseudo) */
.dc-widget{
  position:fixed;top:84px;right:20px;z-index:800;
  display:flex;align-items:center;gap:11px;
  padding:9px 16px 9px 9px;border-radius:14px;cursor:pointer;overflow:hidden;
  font-family:'DM Sans',system-ui,sans-serif;text-align:left;color:#f2f0eb;
  background:linear-gradient(150deg,rgba(42,33,48,.96),rgba(17,14,23,.97));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 12px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .18s cubic-bezier(.2,1,.3,1),box-shadow .25s,border-color .25s;
}
.dc-widget:hover{transform:translateY(-2px) scale(1.015);box-shadow:0 16px 38px rgba(0,0,0,.6)}
.dc-widget:active{transform:translateY(0) scale(.99)}
.dc-widget::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.10) 50%,transparent 58%);
  transform:translateX(-130%);
}
.dc-widget--ready::after{animation:dc-shine 3.4s ease-in-out infinite}
@keyframes dc-shine{0%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
.dc-widget__ic{
  position:relative;
  width:52px;height:52px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  /* Plus de cadre rectangulaire autour : le SVG du coffre se suffit
   * à lui-même. On garde juste le conteneur pour le centrage et les
   * sparkles ::before/::after en absolute. */
  background:none;border:none;
  overflow:visible;
}
/* SVG du daily-claim (coffre violet) — agrandi pour être bien visible.
 * Animations en couches selon l'état :
 *   - base : float subtil up/down en permanence
 *   - ready : pulse-glow violet + shake "quelque chose veut sortir"
 *             + petits sparkles qui sautent autour
 */
.dc-widget__ic-img{
  width:42px;height:42px;object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
  transition:transform .25s cubic-bezier(.2,1,.3,1);
  animation:dc-float 3.6s ease-in-out infinite;
  transform-origin:50% 78%; /* pivot bas pour donner l'illusion d'un coffre posé */
}
.dc-widget:hover .dc-widget__ic-img{transform:scale(1.12) rotate(-5deg)}

@keyframes dc-float{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-2.5px)}
}

/* État READY : le coffre tremble par à-coups + glow + sparkles
 * Triple animation combinée : shake (saccades), glow, et float continu */
.dc-widget--ready .dc-widget__ic-img{
  animation:
    dc-chest-shake 3s ease-in-out infinite,
    dc-pulse-glow 2.4s ease-in-out infinite;
}
@keyframes dc-chest-shake{
  /* Saccades brèves toutes les 3s, comme si une pièce tape contre le couvercle */
  0%, 60%, 100%   {transform:translateY(0) rotate(0)}
  62% {transform:translateY(-3px) rotate(-6deg)}
  64% {transform:translateY(-1px) rotate(5deg)}
  66% {transform:translateY(-3px) rotate(-4deg)}
  68% {transform:translateY(0)    rotate(3deg)}
  70% {transform:translateY(-2px) rotate(-2deg)}
  72% {transform:translateY(0)    rotate(0)}
}
@keyframes dc-pulse-glow{
  0%,100%{filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)) drop-shadow(0 0 0 rgba(168,85,247,0))}
  50%    {filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(168,85,247,.85))}
}

/* Sparkles "qui sautent du coffre" — 2 petites étoiles pseudo-élément
 * qui apparaissent en haut puis s'évanouissent, comme des projections
 * depuis l'intérieur du coffre. Visible UNIQUEMENT en état ready. */
.dc-widget--ready .dc-widget__ic::before,
.dc-widget--ready .dc-widget__ic::after{
  content:'';position:absolute;
  width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle, #fcd34d 0%, #f59e0b 60%, transparent 70%);
  filter:blur(.3px);
  pointer-events:none;
  opacity:0;
}
.dc-widget--ready .dc-widget__ic::before{
  top:0;left:50%;
  animation:dc-spark-a 2.6s ease-out infinite;
}
.dc-widget--ready .dc-widget__ic::after{
  top:2px;right:8px;
  animation:dc-spark-b 2.6s ease-out infinite .9s;
}
@keyframes dc-spark-a{
  0%   {opacity:0;transform:translate(-50%,0)   scale(.4)}
  20%  {opacity:1;transform:translate(-50%,-10px) scale(1)}
  50%  {opacity:.7;transform:translate(-180%,-22px) scale(.9) rotate(60deg)}
  80%, 100% {opacity:0;transform:translate(-200%,-30px) scale(.4) rotate(120deg)}
}
@keyframes dc-spark-b{
  0%   {opacity:0;transform:translate(0,0)   scale(.4)}
  20%  {opacity:1;transform:translate(0,-8px) scale(1)}
  50%  {opacity:.7;transform:translate(8px,-20px) scale(.85) rotate(-50deg)}
  80%, 100% {opacity:0;transform:translate(14px,-28px) scale(.4) rotate(-120deg)}
}
.dc-widget__txt{display:flex;flex-direction:column;line-height:1.25;gap:1px}
.dc-widget__txt b{font-size:.84rem;color:#fff;font-weight:800;letter-spacing:.2px}
.dc-widget__txt small{font-size:.67rem;color:#9a98a4;font-variant-numeric:tabular-nums}
.dc-widget--ready{
  border-color:rgba(226,74,74,.5);
  box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 26px rgba(201,48,48,.3);
}
/* Pas de fond/bordure sur .dc-widget__ic — supprimé pour laisser
 * le SVG du coffre seul, sans cadre. Le glow du state ready vient
 * du pulse-glow CSS sur le SVG lui-même. */
.dc-widget--ready .dc-widget__txt small{color:#e8a5a5}
.dc-widget--done{opacity:.7}
.dc-widget--done .dc-widget__ic{filter:grayscale(.7);opacity:.85}
.dc-widget--guest{border-color:rgba(88,101,242,.45)}
@media(max-width:640px){
  /* Sur mobile : pastille ronde compacte (icône seule) pour ne PAS
     recouvrir les contrôles de jeu. Le tap ouvre toujours l'overlay.
     EMPILÉE AU-DESSUS du bouton ticket (rond 54px à bottom:16px/right:16px,
     z-index 940 > celui-ci) — avant les deux se superposaient pile et le
     coffre était incliquable. */
  .dc-widget{
    top:auto;right:16px;
    bottom:calc(80px + env(safe-area-inset-bottom,0px));
    padding:0;width:54px;height:54px;border-radius:50%;
    justify-content:center;gap:0;
  }
  .dc-widget__txt{display:none}
  .dc-widget__ic{margin:0}
  .dc-widget::after{display:none}
  /* Petit point d'état quand une caisse est dispo */
  .dc-widget--ready::before{
    content:'';position:absolute;top:5px;right:5px;
    width:11px;height:11px;border-radius:50%;
    background:#e24a4a;border:2px solid #0c0b14;
    box-shadow:0 0 0 2px rgba(226,74,74,.35);
  }
}

/* Écran "déjà ouverte" */
.dc-done{display:flex;flex-direction:column;align-items:center;gap:8px;margin:8px 0 18px}
.dc-done__cap{font-size:.72rem;color:#9a98a4;letter-spacing:.5px}

/* Caisse quotidienne — popup + reel style Hellcase */
.dc-overlay{
  position:fixed;inset:0;z-index:9000;display:none;
  align-items:flex-start;justify-content:center;
  /* PAS de backdrop-filter : c'était LE tueur de fps pendant le reel
   * (le GPU refloute tout l'écran à chaque frame). Fond opaque simple. */
  background:rgba(5,5,11,.93);
  padding:clamp(60px,10vh,140px) 20px 28px;
  overflow-y:auto;font-family:'DM Sans',system-ui,sans-serif;
}
.dc-overlay.show{display:flex;animation:dc-fade .25s ease-out}
@keyframes dc-fade{from{opacity:0}to{opacity:1}}
.dc-modal{
  position:relative;width:min(680px,96vw);margin:auto 0;
  background:linear-gradient(180deg,#181623,#110f18);
  border:1px solid rgba(255,255,255,.08);border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 60px rgba(201,48,48,.12);
  padding:26px 24px 28px;color:#f2f0eb;text-align:center;
  animation:dc-pop .3s cubic-bezier(.2,1.1,.3,1);
}
/* Menu des caisses */
.dc-back{
  position:absolute;top:12px;left:14px;border:none;cursor:pointer;
  background:rgba(255,255,255,.06);color:#b6b5bd;
  padding:6px 12px;border-radius:8px;font-size:.78rem;transition:.15s;
}
.dc-back:hover{background:rgba(255,255,255,.12);color:#fff}
.dc-cases{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px;
}
@media(max-width:520px){
  .dc-cases{grid-template-columns:1fr 1fr;gap:10px}
  .dc-case{padding:20px 10px 16px;border-radius:14px}
  .dc-case__ic{min-height:80px}
  .dc-case__ic-img{width:76px;height:76px}
  .dc-case__name{font-size:1.1rem;letter-spacing:1.2px}
  .dc-case__desc{font-size:.7rem;min-height:28px}
}
.dc-case{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:26px 14px 20px;border-radius:18px;cursor:pointer;
  background:
    radial-gradient(circle at 50% 0%, rgba(168,85,247,.10) 0%, transparent 55%),
    linear-gradient(180deg,#1f1b2e,#13111c);
  border:1px solid rgba(255,255,255,.07);
  color:#f2f0eb;
  box-shadow:0 4px 14px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
  transition:transform .22s cubic-bezier(.2,1,.3,1),border-color .25s,box-shadow .25s;
  /* Entrée stagger via animation-delay côté .nth-child */
  animation:dc-card-in .45s cubic-bezier(.2,1.1,.3,1) backwards;
}
/* Stagger : chaque card entre avec 70ms de décalage */
.dc-case:nth-child(1){animation-delay:.04s}
.dc-case:nth-child(2){animation-delay:.11s}
.dc-case:nth-child(3){animation-delay:.18s}
.dc-case:nth-child(4){animation-delay:.25s}
@keyframes dc-card-in{
  from{opacity:0;transform:translateY(16px) scale(.96)}
  to  {opacity:1;transform:translateY(0)    scale(1)}
}
/* Léger glow autour de la card quand active */
.dc-case::after{
  content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(168,85,247,.0),rgba(168,85,247,.0));
  opacity:0;transition:opacity .25s;
}
.dc-case:hover{
  transform:translateY(-5px) scale(1.015);
  border-color:rgba(168,85,247,.45);
  box-shadow:0 22px 44px rgba(0,0,0,.5),0 0 32px rgba(168,85,247,.25),inset 0 1px 0 rgba(255,255,255,.06);
}
.dc-case:hover::after{
  opacity:1;
  background:linear-gradient(180deg,rgba(168,85,247,.10) 0%,transparent 50%);
}
.dc-case--soon{opacity:.62;cursor:pointer}
.dc-case--soon:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 14px 30px rgba(0,0,0,.45)}

.dc-case__ic{
  font-size:2.6rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  min-height:96px;margin-bottom:4px;
}
/* SVG des 4 caisses (free/vip/booster/tag) — grosses + halo violet
 * Hover : lift + zoom + halo amplifié */
.dc-case__ic-img{
  width:92px;height:92px;object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(168,85,247,.3));
  transition:transform .3s cubic-bezier(.2,1,.3,1),filter .3s;
}
.dc-case:hover .dc-case__ic-img{
  transform:translateY(-6px) scale(1.10);
  filter:drop-shadow(0 12px 24px rgba(168,85,247,.55));
}
/* Caisses partenaires : logo de marque (wordmark large, pas carré). */
.dc-case__ic-img--logo{
  width:auto;height:auto;max-width:158px;max-height:58px;
}
/* Caisse FREE ouvrable → wiggle subtil toutes les 3s pour attirer l'œil */
.dc-case:not(.dc-case--lock):not(.dc-case--soon) .dc-case__ic[data-case-id="free"] .dc-case__ic-img{
  animation:dc-wiggle 3s ease-in-out infinite;
}
@keyframes dc-wiggle{
  0%,88%,100%{transform:rotate(0)}
  92%        {transform:rotate(-5deg)}
  96%        {transform:rotate(5deg)}
}
/* Caisses lock/soon → un peu désaturées (cohérent avec dc-case--soon) */
.dc-case--lock .dc-case__ic-img,
.dc-case--soon .dc-case__ic-img{filter:drop-shadow(0 4px 10px rgba(0,0,0,.4)) grayscale(.3) opacity(.85)}
.dc-case__name{font-family:'Bebas Neue','DM Sans',sans-serif;font-size:1.35rem;letter-spacing:1.6px;color:#fff;margin-top:2px}
.dc-case__desc{font-size:.74rem;color:#9a98a4;line-height:1.4;text-align:center;min-height:32px}
.dc-cstatus{margin-top:8px;font-size:.7rem;font-weight:700;letter-spacing:.5px;padding:5px 12px;border-radius:999px}
.dc-cstatus--ok{background:rgba(226,74,74,.16);color:#e8a5a5;border:1px solid rgba(226,74,74,.4)}
.dc-cstatus--done{background:rgba(255,255,255,.06);color:#9a98a4;border:1px solid rgba(255,255,255,.1)}
.dc-cstatus--soon{background:rgba(228,196,138,.12);color:#e4c48a;border:1px solid rgba(228,196,138,.35)}
.dc-cstatus--lock{background:rgba(244,127,255,.14);color:#f0a5ff;border:1px solid rgba(244,127,255,.42)}
.dc-case--lock{opacity:.92;border-color:rgba(244,127,255,.26)}
.dc-case--lock:hover{border-color:rgba(244,127,255,.55);box-shadow:0 14px 30px rgba(120,30,140,.3)}
.dc-lockhint{margin-top:10px;font-size:.74rem;line-height:1.5;color:#cbb6d8;background:rgba(244,127,255,.08);border:1px solid rgba(244,127,255,.22);padding:10px 13px;border-radius:10px;text-align:center}
.dc-lockhint b{color:#f0a5ff}

/* Tuto "mettre le tag KRU" */
.dc-tuto{margin-top:10px}
.dc-tuto__toggle{width:100%;padding:11px 14px;border-radius:10px;cursor:pointer;
  font-family:'DM Sans',system-ui,sans-serif;font-size:.82rem;font-weight:700;
  color:#f0d79a;background:rgba(228,196,138,.10);
  border:1px solid rgba(228,196,138,.32);transition:background .15s,border-color .15s}
.dc-tuto__toggle:hover{background:rgba(228,196,138,.16);border-color:rgba(228,196,138,.5)}
.dc-tuto__toggle.is-open{border-color:rgba(228,196,138,.5)}
.dc-tuto__panel{margin-top:10px;display:flex;flex-direction:column;gap:10px;text-align:left}
.dc-tuto__step{display:flex;flex-direction:column;gap:8px;
  background:#16141f;border:1px solid rgba(255,255,255,.07);
  border-radius:11px;padding:12px}
.dc-tuto__num{width:22px;height:22px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:800;color:#0c0b14;background:#e4c48a}
.dc-tuto__img{width:100%;max-width:340px;align-self:center;border-radius:9px;
  border:1px solid rgba(255,255,255,.1);display:block}
.dc-tuto__txt{font-size:.82rem;line-height:1.5;color:#cfcdd6}
.dc-tuto__txt b{color:#f0d79a}
.dc-tuto__note{font-size:.76rem;line-height:1.5;color:#cbb6d8;text-align:center;
  background:rgba(244,127,255,.08);border:1px solid rgba(244,127,255,.22);
  padding:9px 12px;border-radius:10px}
.dc-tuto__note b{color:#f0a5ff}
/* ── Tuto Celsius : boutons d'action + formulaire de demande ── */
.dc-cel-act{display:inline-flex;align-items:center;justify-content:center;gap:8px;align-self:flex-start;
  padding:10px 16px;border-radius:9px;font-family:'DM Sans',system-ui,sans-serif;font-weight:800;
  font-size:.8rem;text-decoration:none;color:#fff;transition:transform .15s,filter .15s}
.dc-cel-act:hover{transform:translateY(-1px);filter:brightness(1.08)}
.dc-cel-act--celsius{background:linear-gradient(135deg,#ff8d7a,#ff5e62 45%,#cf3340);box-shadow:0 6px 16px rgba(255,94,98,.4)}
.dc-cel-act--discord{background:#5865F2;box-shadow:0 6px 16px rgba(88,101,242,.4)}
.dc-cel-input{width:100%;margin-top:4px;padding:10px 12px;border-radius:9px;background:#0f0d16;
  border:1px solid rgba(255,255,255,.12);color:#fff;font-size:.86rem;font-family:inherit}
.dc-cel-input::placeholder{color:#7a7880}
.dc-cel-input:focus{outline:none;border-color:rgba(255,94,98,.6);background:#13101b}
.dc-cel-submit{margin-top:6px;width:100%;padding:11px 14px;border:none;border-radius:9px;cursor:pointer;
  font-family:'Bebas Neue','DM Sans',sans-serif;font-size:1rem;letter-spacing:1.5px;color:#fff;
  background:linear-gradient(135deg,#ff8d7a,#ff5e62 45%,#cf3340);box-shadow:0 6px 18px rgba(255,94,98,.4);
  transition:transform .12s,filter .15s,opacity .2s}
.dc-cel-submit:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08)}
.dc-cel-submit:disabled{opacity:.55;cursor:not-allowed}
.dc-cel-msg{margin-top:8px;font-size:.8rem;line-height:1.4}
.dc-cel-msg--ok{color:#7ee0a0}
.dc-cel-msg--err{color:#ff9a8f}
/* Liste contenu + % */
.dc-loot-title{font-size:.72rem;text-transform:uppercase;letter-spacing:1.5px;color:#9a98a4;margin:18px 0 8px}
.dc-loot{display:flex;flex-direction:column;gap:6px;text-align:left}
.dc-loot__row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;background:#16141f;border:1px solid rgba(255,255,255,.06);border-left:3px solid #7f8aa3}
.dc-loot__dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:#8b93a7}
.dc-loot__ic{font-size:1rem;line-height:1;flex-shrink:0}
.dc-loot__lbl{flex:1;font-size:.86rem;color:#dcdae2}
.dc-loot__pct{font-size:.82rem;font-variant-numeric:tabular-nums;color:#9a98a4}

.dc-loot__row--common{border-left-color:#7f8aa3}
.dc-loot__row--common .dc-loot__dot{background:#8b93a7}

.dc-loot__row--rare{border-color:rgba(74,163,255,.32);border-left-color:#4aa3ff;background:radial-gradient(circle at 0% 50%,rgba(74,163,255,.10),transparent 60%),#15141f}
.dc-loot__row--rare .dc-loot__dot{background:#4aa3ff;box-shadow:0 0 8px rgba(74,163,255,.7)}
.dc-loot__row--rare .dc-loot__lbl{color:#9ccbff;font-weight:600}
.dc-loot__row--rare .dc-loot__pct{color:#7fbfff}

.dc-loot__row--epic{border-color:rgba(192,139,255,.34);border-left-color:#c08bff;background:radial-gradient(circle at 0% 50%,rgba(192,139,255,.12),transparent 60%),#17141f}
.dc-loot__row--epic .dc-loot__dot{background:#c08bff;box-shadow:0 0 8px rgba(192,139,255,.75)}
.dc-loot__row--epic .dc-loot__lbl{color:#d6b8ff;font-weight:600}
.dc-loot__row--epic .dc-loot__pct{color:#c08bff}

.dc-loot__row--legendary{border-color:rgba(228,196,138,.4);border-left-color:#e4c48a;background:radial-gradient(circle at 0% 50%,rgba(228,196,138,.14),transparent 60%),#1b1726}
.dc-loot__row--legendary .dc-loot__dot{background:#e4c48a;box-shadow:0 0 8px rgba(228,196,138,.8)}
.dc-loot__row--legendary .dc-loot__lbl{color:#f0d79a;font-weight:700}
.dc-loot__row--legendary .dc-loot__pct{color:#e4c48a}
.dc-loot__empty{font-size:.82rem;color:#9a98a4;padding:14px;text-align:center}
@keyframes dc-pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.dc-close{
  position:absolute;top:12px;right:14px;width:30px;height:30px;
  border:none;background:rgba(255,255,255,.06);color:#b6b5bd;
  border-radius:8px;font-size:1rem;cursor:pointer;transition:.15s;
}
.dc-close:hover{background:rgba(255,255,255,.12);color:#fff}
.dc-title{
  font-family:'Bebas Neue','DM Sans',sans-serif;font-size:1.9rem;
  letter-spacing:2px;margin:2px 0 2px;color:#fff;
}
/* Variante avec icône SVG en lieu et place de l'emoji devant le nom */
.dc-title--withicon{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.dc-title__ic{display:inline-flex;align-items:center;justify-content:center;line-height:0}
.dc-title__ic .dc-case__ic-img{
  width:44px;height:44px;
  filter:drop-shadow(0 3px 8px rgba(168,85,247,.4));
  animation:none;  /* pas de wiggle dans le titre, c'est juste un decorum */
}
.dc-sub{font-size:.82rem;color:#b6b5bd;margin-bottom:18px}
.dc-sub b{color:#e4c48a}

/* Reel */
.dc-timer{
  font-size:.78rem;color:#9a98a4;margin:-8px 0 16px;
  font-variant-numeric:tabular-nums;letter-spacing:.4px;
}
.dc-discord{display:flex;flex-direction:column;gap:18px;align-items:center;padding:14px 6px 8px}
.dc-discord__txt{font-size:.96rem;color:#cfcdd6;line-height:1.55;max-width:400px}
.dc-discord__txt b{color:#fff}
.dc-btn--discord{
  width:auto;padding:14px 26px;background:#5865F2;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 8px 24px rgba(88,101,242,.42),inset 0 1px 0 rgba(255,255,255,.18);
}
.dc-btn--discord:hover{filter:brightness(1.08);transform:translateY(-1px)}
.dc-reel{
  position:relative;overflow:hidden;border-radius:12px;
  background:#0c0b12;border:1px solid rgba(255,255,255,.06);
  height:128px;margin:6px 0 20px;
  contain:layout paint style;transform:translateZ(0);
}
.dc-pointer{
  position:absolute;top:0;bottom:0;left:50%;width:3px;
  transform:translateX(-50%);z-index:3;
  background:linear-gradient(180deg,#e24a4a,#c93030);
  box-shadow:0 0 14px rgba(226,74,74,.8);border-radius:3px;
}
.dc-pointer::before,.dc-pointer::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  border:7px solid transparent;
}
.dc-pointer::before{top:-2px;border-top-color:#e24a4a}
.dc-pointer::after{bottom:-2px;border-bottom-color:#e24a4a}
.dc-track{
  display:flex;height:100%;align-items:center;padding:10px 0;
  will-change:transform;backface-visibility:hidden;
  transform:translateZ(0);
}
.dc-tile{
  flex:0 0 104px;width:104px;height:104px;margin:0 4px;
  border-radius:10px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0;
  background:#16141f;border:1px solid rgba(255,255,255,.06);
  border-bottom:3px solid #3a3850;position:relative;
  padding:4px;overflow:hidden;
}
/* Tuile "with-svg" : le SVG inclut déjà son propre cadre/rareté/fond,
 * donc on neutralise le cadre .dc-tile pour ne PAS doubler les bordures.
 * Le SVG remplit 100% du conteneur, y compris l'espace réservé au
 * border-bottom 3px. */
.dc-tile--with-svg{
  background:none;border:none;border-bottom:none;padding:0;
}
.dc-tile__icon{font-size:1.7rem;line-height:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
/* SVG dans le reel (tuiles 104×104) → REMPLIT toute la case sans
 * marges (le SVG dessine son propre cadre interne et le décor).
 * On laisse le filtre vide ici, les rarity halos plus bas s'appliquent. */
.dc-tile--with-svg .dc-tile__icon{padding:0}
.dc-tile--with-svg .dc-tile__icon .dc-loot-svg{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
/* Pour les fallback (krucoin-logo sans cadre intégré) on garde le
 * cadre .dc-tile + l'icône plus petite + label texte dessous. */
.dc-tile--fallback .dc-tile__icon .dc-loot-svg{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
/* Le label "+X KRUCOINS" sous l'icône :
 *   - Masqué pour les tuiles "with-svg" (l'amount est déjà gravé dans
 *     le SVG, ex. loot-common-20.svg affiche "20")
 *   - Visible pour les tuiles "fallback" (krucoin-logo générique sans
 *     amount → il faut le texte pour savoir le montant) */
.dc-tile--with-svg .dc-tile__label{display:none}
.dc-tile--fallback .dc-tile__label{
  display:block;
  position:absolute;bottom:6px;left:0;right:0;
  text-align:center;
  font-family:'Bebas Neue','DM Sans',sans-serif;font-size:.85rem;
  letter-spacing:.5px;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 6px rgba(0,0,0,.7);
  pointer-events:none;
}
/* En fallback, le SVG (krucoin-logo) doit laisser place au label
 * en bas, donc on le décale légèrement vers le haut. */
.dc-tile--fallback .dc-tile__icon{padding-bottom:14px}
/* SVG dans les loot rows (liste "Contenu & chances") → tuile lisible
 * (assez grande pour voir l'amount gravé dans le SVG, ex. "7 500"). */
.dc-loot__ic{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.dc-loot__ic .dc-loot-svg{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
/* Pas de halo CSS par rareté : les SVG contiennent déjà leur propre
 * bordure rareté-colorée (gold pour legendary, bleu pour rare, etc.)
 * → en ajouter en CSS faisait double-cadre/glow incohérent.
 * On garde uniquement le keyframe legendary-pulse pour le popup
 * résultat (.dc-result__svg), pas pour les tuiles du reel. */
@keyframes dc-legendary-pulse{
  0%,100%{filter:drop-shadow(0 4px 12px rgba(228,196,138,.55))}
  50%    {filter:drop-shadow(0 4px 18px rgba(228,196,138,.85))}
}
.dc-tile__label{
  font-family:'Bebas Neue','DM Sans',sans-serif;font-size:.92rem;
  letter-spacing:1px;color:#cfcdd6;
}
/* ── Couleurs par rareté ──
   common = slate · rare = bleu · epic = violet · legendary = or */
.dc-tile--common{
  border-color:rgba(150,160,185,.28);border-bottom-color:#7f8aa3;
}
.dc-tile--common .dc-tile__label{color:#c4cad8}
.dc-tile--rare{
  background:linear-gradient(180deg,rgba(74,163,255,.10),#16141f);
  border-color:rgba(74,163,255,.45);border-bottom-color:#4aa3ff;
}
.dc-tile--rare .dc-tile__label{color:#9ccbff}
.dc-tile--epic{
  background:linear-gradient(180deg,rgba(192,139,255,.12),#16141f);
  border-color:rgba(192,139,255,.5);border-bottom-color:#c08bff;
}
.dc-tile--epic .dc-tile__label{color:#d6b8ff}
.dc-tile--legendary{
  background:linear-gradient(180deg,rgba(228,196,138,.16),#241c2e);
  border-color:rgba(228,196,138,.6);border-bottom-color:#e4c48a;
  box-shadow:0 0 16px rgba(228,196,138,.18);
}
.dc-tile--legendary .dc-tile__label{color:#f0d79a}

/* Atterrissage : la tuile gagnante "pop" et s'illumine selon la rareté.
 * Halo via box-shadow (pas de filter → reste 60fps), pop léger sans
 * décaler la mise en page (transform uniquement). */
.dc-tile--won{
  z-index:4;position:relative;
  animation:dc-tile-land .42s cubic-bezier(.2,1.55,.4,1) both;
}
@keyframes dc-tile-land{
  0%  {transform:scale(1)}
  45% {transform:scale(1.18)}
  100%{transform:scale(1.09)}
}
.dc-tile--won.dc-tile--common   {box-shadow:0 0 16px rgba(255,255,255,.4)}
.dc-tile--won.dc-tile--rare     {box-shadow:0 0 20px rgba(120,176,255,.75)}
.dc-tile--won.dc-tile--epic     {box-shadow:0 0 22px rgba(184,128,255,.85)}
.dc-tile--won.dc-tile--legendary{box-shadow:0 0 30px rgba(240,200,120,.95)}
/* Flash du pointeur au moment de l'atterrissage */
.dc-reel--landed .dc-pointer{animation:dc-pointer-flash .45s ease-out}
@keyframes dc-pointer-flash{
  0%  {box-shadow:0 0 30px 4px rgba(226,74,74,1)}
  100%{box-shadow:0 0 14px rgba(226,74,74,.8)}
}

/* Bouton ouvrir */
.dc-btn{
  width:100%;padding:15px 20px;border:none;border-radius:12px;cursor:pointer;
  font-family:'Bebas Neue','DM Sans',sans-serif;font-size:1.15rem;letter-spacing:2px;
  background:linear-gradient(180deg,#e24a4a,#b52a2a);color:#fff;
  box-shadow:0 8px 24px rgba(201,48,48,.35),inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .12s,filter .15s,opacity .2s;
}
.dc-btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.07)}
.dc-btn:disabled{opacity:.55;cursor:not-allowed}
.dc-btn--ghost{background:rgba(255,255,255,.06);color:#cfcdd6;box-shadow:none}

/* Écran résultat */
.dc-result{display:none;flex-direction:column;align-items:center;gap:10px;margin-top:4px}
.dc-result.show{display:flex;animation:dc-fade .3s ease-out}
.dc-result__big{
  font-family:'Bebas Neue','DM Sans',sans-serif;font-size:2.6rem;letter-spacing:2px;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
}
/* SVG du loot gagné, à gauche du gros texte. Halo selon rareté hérité
 * du parent .dc-result (couleur via filter drop-shadow). */
.dc-result__svg{width:64px;height:64px;object-fit:contain;flex-shrink:0;animation:dc-result-pop .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes dc-result-pop{from{transform:scale(.3) rotate(-10deg);opacity:0}60%{transform:scale(1.15) rotate(0)}to{transform:scale(1);opacity:1}}
.dc-rar-rare      .dc-result__svg{filter:drop-shadow(0 4px 10px rgba(74,163,255,.55))}
.dc-rar-epic      .dc-result__svg{filter:drop-shadow(0 4px 12px rgba(192,139,255,.6))}
.dc-rar-legendary .dc-result__svg{filter:drop-shadow(0 4px 14px rgba(228,196,138,.7));animation:dc-result-pop .55s cubic-bezier(.34,1.56,.64,1),dc-legendary-pulse 2.4s ease-in-out .6s infinite}
.dc-result--win .dc-result__big{
  color:#c4cad8;text-shadow:0 0 18px rgba(255,255,255,.25);
  animation:dc-win 1.6s ease-in-out infinite;
}
/* Couleur du gros texte selon la rareté du lot gagné */
.dc-rar-rare.dc-result--win .dc-result__big{color:#9ccbff;text-shadow:0 0 22px rgba(74,163,255,.6)}
.dc-rar-epic.dc-result--win .dc-result__big{color:#d6b8ff;text-shadow:0 0 24px rgba(192,139,255,.65)}
.dc-rar-legendary.dc-result--win .dc-result__big{color:#f0d79a;text-shadow:0 0 26px rgba(228,196,138,.7)}
@keyframes dc-win{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.dc-result--lose .dc-result__big{color:#9a98a4}
.dc-result__sub{font-size:.85rem;color:#b6b5bd}
@media(max-width:480px){
  .dc-tile{flex-basis:84px;width:84px;height:84px}
  .dc-reel{height:108px}
  .dc-title{font-size:1.6rem}
}

/* Bouton flottant Admin (admins Discord uniquement) */
.dc-adminbtn{
  position:fixed;left:16px;top:70px;z-index:90;
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;border-radius:999px;
  font-family:'DM Sans',system-ui,sans-serif;font-size:.78rem;font-weight:700;
  letter-spacing:.4px;text-decoration:none;color:#f0d6a6;
  background:linear-gradient(135deg,rgba(28,24,38,.96),rgba(20,17,28,.96));
  border:1px solid rgba(228,196,138,.4);
  box-shadow:0 8px 22px rgba(0,0,0,.45);
  backdrop-filter:blur(6px);
  transition:transform .15s,box-shadow .2s,border-color .2s,opacity .2s;
  opacity:.78;
}
.dc-adminbtn:hover{opacity:1;transform:translateY(-2px);border-color:rgba(228,196,138,.7);box-shadow:0 12px 28px rgba(0,0,0,.55)}
.dc-adminbtn span{font-size:.95rem;line-height:1}
@media(max-width:480px){ .dc-adminbtn{left:12px;top:62px;padding:8px 12px;font-size:.72rem} }

/* ════════════════════════════════════════════════════════════════
   REDESIGN v2 (branche redesign) — reskin de l'overlay des caisses.
   Aligne le popup Daily Claim sur le nouveau design system : fond
   indigo-charbon, surfaces plates, accent rouge KRU, Space Grotesk,
   boutons glossy. La logique (daily-case.js) est inchangée.
   ════════════════════════════════════════════════════════════════ */
.dc-overlay{background:rgba(8,5,10,.82);backdrop-filter:blur(6px)}
.dc-modal{
  background:#17121b;
  border:1px solid rgba(255,255,255,.11);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  font-family:'Space Grotesk','DM Sans',system-ui,sans-serif;
  animation:kvPop .34s cubic-bezier(.2,.95,.3,1.3);
}
@keyframes kvPop{0%{opacity:0;transform:translateY(16px) scale(.93)}60%{opacity:1;transform:translateY(-2px) scale(1.012)}100%{opacity:1;transform:none}}
.dc-modal .dc-title,
.dc-modal h2{font-family:'Space Grotesk',sans-serif!important;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.dc-sub{color:rgba(234,231,236,.6)}
.dc-close{background:transparent;border:1px solid rgba(255,255,255,.11);border-radius:9px;color:rgba(234,231,236,.6)}
.dc-close:hover{color:#fff;border-color:rgba(255,255,255,.25)}
.dc-back{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);border-radius:9px}

/* Tuiles de caisses : surfaces plates + liseré rouge au survol */
.dc-case{
  background:#1e1823;
  border:1px solid rgba(255,255,255,.11);
  border-radius:14px;
}
.dc-case:hover{
  border-color:rgba(226,59,59,.5);
  box-shadow:0 14px 30px rgba(0,0,0,.45),0 0 24px -10px rgba(226,59,59,.45);
}
.dc-case__name{font-family:'Space Grotesk',sans-serif!important;letter-spacing:.05em;font-weight:700;font-size:1.05rem;text-transform:uppercase}
.dc-case__desc{color:rgba(234,231,236,.45)}

/* Boutons : glossy rouge (système) / Discord conservé en blurple */
.dc-btn{
  font-family:'Space Grotesk',sans-serif!important;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border-radius:10px;border:none;
  background:linear-gradient(180deg,#ff5a50,#e23b3b 60%,#c52f2f);
  box-shadow:0 4px 14px rgba(226,59,59,.35),inset 0 1px 0 rgba(255,255,255,.4);
  transition:filter .12s,transform .12s;
}
.dc-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.dc-btn:active{transform:scale(.96)}
.dc-btn--ghost{background:transparent;border:1px solid rgba(255,255,255,.14);box-shadow:none;color:rgba(234,231,236,.7)}
.dc-btn--discord{background:linear-gradient(180deg,#6b78ff,#5865F2 60%,#4651d6);box-shadow:0 4px 16px rgba(88,101,242,.45),inset 0 1px 0 rgba(255,255,255,.4)}

/* Reel d'ouverture : cadre + pointeur aux couleurs du thème */
.dc-reel{background:#100c12;border:1px solid rgba(255,255,255,.11);border-radius:13px}
.dc-pointer{filter:drop-shadow(0 0 8px rgba(226,59,59,.8))}
.dc-tile{background:#1e1823;border:1px solid rgba(255,255,255,.08);border-radius:11px}

/* Résultat */
.dc-result--win{color:#7ee0a0}
.dc-result--lose{color:#ff9c9c}