/* ══════════════════════════════════════════════════════════════════════
   stardust-balance.css — badge « Solde · STARDUST » (étoile cristal dans un orbe + capsule de verre cosmique)
   Tout est en `em` : la taille du composant se règle avec UNE variable.

   Variables (à poser sur .sdb ou un parent) :
     --sdb-s      taille globale            défaut 1      (0.8 = plus petit · 1.3 = plus grand)
     --sdb-speed  vitesse des animations    défaut 1      (0.5 = deux fois plus lent · 0 interdit · utiliser .sdb--still pour couper)
     --sdb-glow   intensité des halos       défaut 1      (0.6 = discret · 1.4 = marqué)
     --sdb-gold / --sdb-gold-2 / --sdb-ivory / --sdb-violet / --sdb-night   couleurs
   Variantes : .sdb--still (aucune animation) · .sdb--compact (sans le mot « Solde »)
   ══════════════════════════════════════════════════════════════════════ */
.sdb{
  --sdb-s:1; --sdb-speed:1; --sdb-glow:1;
  --sdb-gold:#ffe3a3; --sdb-gold-2:#d9a94a; --sdb-ivory:#fff4d6; --sdb-violet:#7b5cff; --sdb-night:#0a0a2e;
  position:relative; display:inline-flex; align-items:center; max-width:100%; box-sizing:border-box;
  /* 4.4vw : le badge rétrécit tout seul sur les petits écrans (16 px à 364 px de large → 14 px à 320 px) */
  font-size:clamp(11px, calc(var(--sdb-s) * 16px), calc(var(--sdb-s) * 4.4vw));
  font-family:'Cinzel','Cormorant Garamond',Georgia,serif; color:var(--sdb-ivory); line-height:1;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.sdb *{box-sizing:border-box}

/* ── Orbe (étoile) ─────────────────────────────────────────────────── */
.sdb-orb{position:relative; z-index:2; flex:0 0 auto; width:5.4em; height:5.4em; margin-right:-1.9em; border-radius:50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.2), transparent 30%),
    radial-gradient(60% 50% at 70% 72%, rgba(123,92,255,.55), transparent 70%),
    radial-gradient(50% 45% at 28% 70%, rgba(60,110,255,.35), transparent 70%),
    radial-gradient(circle at 50% 50%, #17124d 0%, var(--sdb-night) 72%);
  box-shadow:
    0 0 0 .07em rgba(255,227,163,.9),
    0 0 0 .2em rgba(10,10,46,.9),
    0 0 0 .24em rgba(217,169,74,.55),
    0 0 calc(1.4em * var(--sdb-glow)) calc(.1em * var(--sdb-glow)) rgba(123,92,255,.55),
    0 0 calc(2.6em * var(--sdb-glow)) rgba(255,214,140,calc(.22 * var(--sdb-glow))),
    inset 0 0 1.2em rgba(0,0,0,.65);
  animation:sdb-halo calc(6s / var(--sdb-speed)) ease-in-out infinite;
}
.sdb-orb svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.sdb-ring{transform-box:fill-box; transform-origin:center}
.sdb-ring--a{animation:sdb-spin calc(26s / var(--sdb-speed)) linear infinite}
.sdb-ring--b{animation:sdb-spin calc(40s / var(--sdb-speed)) linear infinite reverse}
.sdb-star{transform-box:fill-box; transform-origin:center; animation:sdb-sway calc(9s / var(--sdb-speed)) ease-in-out infinite}
.sdb-core{transform-box:fill-box; transform-origin:center; animation:sdb-pulse calc(4.4s / var(--sdb-speed)) ease-in-out infinite}
.sdb-dust circle{animation:sdb-twinkle calc(var(--d,4s) / var(--sdb-speed)) ease-in-out var(--l,0s) infinite; opacity:0}

/* ── Capsule ───────────────────────────────────────────────────────── */
.sdb-cap{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.34em;
  min-width:11em; padding:.8em 2.4em .8em 2.7em; border-radius:999px; overflow:hidden;
  background:
    radial-gradient(70% 140% at 85% 50%, rgba(123,92,255,.4), transparent 70%),
    radial-gradient(50% 120% at 30% 0%, rgba(80,130,255,.22), transparent 70%),
    linear-gradient(180deg, rgba(40,36,120,.78) 0%, rgba(14,14,58,.9) 100%);
  border:.07em solid transparent;
  background-clip:padding-box, padding-box, padding-box;
  box-shadow:
    0 0 0 .07em rgba(255,227,163,.55),
    0 .5em 1.6em rgba(0,0,0,.45),
    0 0 calc(1.6em * var(--sdb-glow)) rgba(123,92,255,calc(.28 * var(--sdb-glow))),
    inset 0 .12em .4em rgba(255,255,255,.14),
    inset 0 -.5em 1em rgba(5,5,30,.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
/* reflet de verre */
.sdb-cap::before{content:''; position:absolute; left:6%; right:6%; top:.14em; height:42%; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0)); pointer-events:none}
/* lueur qui glisse lentement */
.sdb-cap::after{content:''; position:absolute; top:0; bottom:0; width:38%; left:-45%;
  background:linear-gradient(100deg, transparent, rgba(255,240,200,calc(.16 * var(--sdb-glow))), transparent);
  transform:skewX(-18deg); animation:sdb-shimmer calc(9s / var(--sdb-speed)) ease-in-out 1.2s infinite; pointer-events:none}
.sdb-trail{position:absolute; left:0; right:0; bottom:.55em; height:.1em; opacity:.5; pointer-events:none;
  background:linear-gradient(90deg, transparent 8%, rgba(255,227,163,.55) 40%, rgba(160,140,255,.5) 70%, transparent 95%)}
.sdb-spark{position:absolute; width:.22em; height:.22em; border-radius:50%; background:var(--sdb-ivory); opacity:0; pointer-events:none;
  box-shadow:0 0 .5em .1em rgba(255,227,163,.8); animation:sdb-twinkle calc(var(--d,5s) / var(--sdb-speed)) ease-in-out var(--l,0s) infinite}
.sdb-end{position:absolute; z-index:3; right:-.55em; top:50%; width:1.7em; height:1.7em; transform:translateY(-50%); pointer-events:none;
  filter:drop-shadow(0 0 .3em rgba(255,227,163,.7))}

/* ── Texte ─────────────────────────────────────────────────────────── */
.sdb-k{position:relative; z-index:1; display:flex; align-items:center; gap:.7em; width:100%; justify-content:center;
  font-size:.74em; letter-spacing:.3em; text-transform:none; font-weight:500; color:var(--sdb-gold)}
.sdb-k::after{content:''; flex:0 1 2.6em; height:.07em; background:linear-gradient(90deg, rgba(255,227,163,.8), transparent)}
.sdb-n{position:relative; z-index:1; display:block; font-size:2.35em; font-weight:600; letter-spacing:.03em; line-height:1.02; white-space:nowrap;
  font-variant-numeric:lining-nums tabular-nums; font-feature-settings:'lnum','tnum'; text-align:center;
  background:linear-gradient(180deg, #fffdf2 0%, var(--sdb-gold) 55%, #e9bf6a 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 calc(.28em * var(--sdb-glow)) rgba(255,214,140,.55));
  text-shadow:none}
.sdb-u{position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:.7em; width:100%;
  font-size:.78em; letter-spacing:.44em; font-weight:500; color:#e8ecff; text-transform:uppercase}
.sdb-u i{font-style:normal; font-size:.8em; color:var(--sdb-gold); letter-spacing:0; opacity:.9}
.sdb--compact .sdb-k{display:none}

/* ── Animations ────────────────────────────────────────────────────── */
@keyframes sdb-spin{to{transform:rotate(360deg)}}
@keyframes sdb-sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes sdb-pulse{0%,100%{opacity:.72; transform:scale(.88)}50%{opacity:1; transform:scale(1.08)}}
@keyframes sdb-twinkle{0%,100%{opacity:0; transform:scale(.6)}50%{opacity:.95; transform:scale(1)}}
@keyframes sdb-shimmer{0%,55%{left:-45%}100%{left:130%}}
@keyframes sdb-halo{0%,100%{filter:brightness(1)}50%{filter:brightness(1.1)}}
.sdb--in .sdb-n{animation:sdb-rise .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes sdb-rise{from{opacity:0; transform:translateY(.25em)}to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  .sdb *, .sdb *::before, .sdb *::after{animation:none!important}
  .sdb-dust circle{opacity:.6}
}
.sdb--still *, .sdb--still *::before, .sdb--still *::after{animation:none!important}
.sdb--still .sdb-dust circle{opacity:.6}