/* ═══════════════════════════════════════════════════════════
   COSMETICS — Frames / Banners / Emotes / Titles (Battle Pass)
   ═══════════════════════════════════════════════════════════ */

/* ─── Avatar frames (circular, 80x80) ─────────────────────── */
.cos-frame {
  position:relative; display:inline-block;
  width:80px; height:80px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #1a2336 0%, #0a0f1c 100%);
  flex-shrink:0;
}
.cos-frame-inner {
  position:absolute; inset:6px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #2a3550, #0e1524 70%);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:24px; color:#8ba7d9;
  overflow:hidden;
}
.cos-frame-inner::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  box-shadow:inset 0 -12px 20px var(--shade-2);
}

/* Bronze : double anneau gravé avec rivets */
.cos-frame.bronze { background:conic-gradient(from 0deg, #4a2f14, #a8733a, #e0a860, #a8733a, #4a2f14); }
.cos-frame.bronze::before {
  content:''; position:absolute; inset:2px; border-radius:50%;
  background:radial-gradient(circle at 30% 25%, #d8a870 0%, #8b5a2b 55%, #3e2815 100%);
  box-shadow:inset 0 0 10px var(--shade-2), inset 0 2px 0 rgba(255,220,180,0.25);
}
.cos-frame.bronze::after {
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(circle at 50% 5%,  #ffe0b0 1px, transparent 2.5px),
    radial-gradient(circle at 95% 50%, #ffe0b0 1px, transparent 2.5px),
    radial-gradient(circle at 50% 95%, #ffe0b0 1px, transparent 2.5px),
    radial-gradient(circle at 5% 50%,  #ffe0b0 1px, transparent 2.5px);
}

/* Argent : anneau poli + liseré brillant rotatif */
.cos-frame.silver { background:conic-gradient(from 0deg, #404a5e, #c9d1dc, #ffffff, #c9d1dc, #404a5e); animation:cosSpin 8s linear 1; }
.cos-frame.silver::before {
  content:''; position:absolute; inset:3px; border-radius:50%;
  background:radial-gradient(circle at 30% 25%, #f0f3f8 0%, #9ea9b8 55%, #2e3544 100%);
  box-shadow:inset 0 0 12px var(--shade-2), inset 0 2px 0 rgba(255,255,255,0.4);
}
.cos-frame.silver::after {
  content:''; position:absolute; inset:-2px; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,0.8) 15deg, transparent 40deg, transparent 360deg);
  animation:cosSpin 3s linear 1;
  mask:radial-gradient(circle at center, transparent 36px, #000 38px, #000 40px, transparent 42px);
  -webkit-mask:radial-gradient(circle at center, transparent 36px, #000 38px, #000 40px, transparent 42px);
}

/* Or (Champion) : conic rainbow-gold rotatif + glow pulsant */
.cos-frame.gold {
  background:conic-gradient(from 0deg, #6b4a0b, #ffd56b, #fff5c0, #ffd56b, #6b4a0b);
  animation:cosSpin 4s linear 1;
  box-shadow:0 0 24px rgba(255,213,107,0.6), 0 0 48px rgba(255,213,107,0.3);
}
.cos-frame.gold::before {
  content:''; position:absolute; inset:3px; border-radius:50%;
  background:radial-gradient(circle at 30% 25%, #fff8dc 0%, #e0a830 55%, #5a3d0b 100%);
  box-shadow:inset 0 0 14px rgba(0,0,0,0.45), inset 0 2px 0 rgba(255,255,255,0.55);
}
.cos-frame.gold::after {
  content:''; position:absolute; inset:-4px; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0deg, #fff5c0 20deg, transparent 50deg, transparent 180deg, #fff5c0 200deg, transparent 230deg, transparent 360deg);
  animation:cosSpin 2s linear 1 reverse;
  mask:radial-gradient(circle at center, transparent 38px, #000 40px, #000 42px, transparent 44px);
  -webkit-mask:radial-gradient(circle at center, transparent 38px, #000 40px, #000 42px, transparent 44px);
  filter:blur(0.5px);
}
.cos-frame .cos-frame-inner { z-index:2; }

@keyframes cosSpin { to { transform:rotate(360deg); } }

/* ─── Banner (stellar, 240x56) ─────────────────────────────── */
.cos-banner {
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; max-width:240px; height:56px; border-radius:10px;
  background:linear-gradient(135deg, #0b1e3a 0%, #18305c 40%, #0c1428 100%);
  border:1px solid rgba(130,180,255,0.4);
  overflow:hidden; box-shadow:0 0 14px rgba(80,140,240,0.25);
  font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:2px;
  color:#cfe0ff; text-shadow:0 0 8px rgba(140,200,255,0.7);
}
/* Nébuleuse mouvante */
.cos-banner::before {
  content:''; position:absolute; inset:-20%;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(80,140,240,0.35) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(180,100,220,0.25) 0%, transparent 50%);
  animation:cosBanDrift 8s ease-in-out infinite alternate;
}
/* Étoiles scintillantes */
.cos-banner::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 12% 30%, #fff 0.8px, transparent 1.5px),
    radial-gradient(circle at 28% 70%, #fff 0.8px, transparent 1.5px),
    radial-gradient(circle at 48% 20%, #fff 1px, transparent 2px),
    radial-gradient(circle at 62% 80%, #fff 0.8px, transparent 1.5px),
    radial-gradient(circle at 78% 35%, #fff 1px, transparent 2px),
    radial-gradient(circle at 92% 65%, #fff 0.8px, transparent 1.5px);
  animation:cosTwinkle 3s ease-in-out infinite;
}
.cos-banner-txt { position:relative; z-index:2; }
@keyframes cosBanDrift { 0% { transform:translate(0,0); } 100% { transform:translate(8%,-4%); } }
@keyframes cosTwinkle  { 0%,100% { opacity:1; } 50% { opacity:0.5; } }

/* ─── Emote Pack (5 mini-emotes 38x38) ────────────────────── */
.cos-emotes { display:flex; gap:6px; flex-wrap:wrap; }
.cos-em {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:8px;
  background:radial-gradient(circle at 50% 50%, #1a2236 0%, #0b0f1c 100%);
  border:1px solid rgba(130,180,255,0.35);
  cursor:help; transition:transform .15s ease;
  overflow:hidden; font-size:0;
}
.cos-em:hover { transform:scale(1.2); border-color:#ffd56b; z-index:5; box-shadow:0 0 12px rgba(255,213,107,0.5); }

/* Vortex — anneaux concentriques bleus pulsants */
.cos-em.vortex::before {
  content:''; position:absolute; inset:6px; border-radius:50%;
  border:2px solid #5aa0ff; border-top-color:transparent;
  animation:cosSpin 1.2s linear 1;
}
.cos-em.vortex::after {
  content:''; position:absolute; inset:10px; border-radius:50%;
  background:radial-gradient(circle, #a0d0ff 0%, #5aa0ff 40%, transparent 80%);
  animation:cosVortexPulse 1.5s ease-in-out infinite;
}
@keyframes cosVortexPulse { 0%,100% { transform:scale(0.6); opacity:0.6; } 50% { transform:scale(1); opacity:1; } }

/* Chevron — triangle gold pulsant avec ring */
.cos-em.chevron::before {
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-60%);
  width:0; height:0;
  border-left:8px solid transparent; border-right:8px solid transparent;
  border-bottom:12px solid #ffd56b;
  filter:drop-shadow(0 0 4px #ffd56b);
  animation:cosChevPulse 1.2s ease-in-out infinite;
}
.cos-em.chevron::after {
  content:''; position:absolute; inset:4px; border-radius:50%;
  border:1px solid rgba(255,213,107,0.6);
  animation:cosSpin 3s linear 1 reverse;
}
@keyframes cosChevPulse { 0%,100% { transform:translate(-50%,-60%) scale(1); } 50% { transform:translate(-50%,-60%) scale(1.2); filter:drop-shadow(0 0 10px #ffd56b); } }

/* Salut Jaffa — silhouette stylisée gold */
.cos-em.salute { background:radial-gradient(circle at 50% 30%, #3a2e10, #0b0f1c); }
.cos-em.salute::before {
  content:'⚔'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#ffd56b;
  text-shadow:0 0 8px rgba(255,213,107,0.8);
  animation:cosSalutShine 2s ease-in-out infinite;
}
@keyframes cosSalutShine {
  0%,100% { text-shadow:0 0 8px rgba(255,213,107,0.8); transform:rotate(0deg); }
  50%     { text-shadow:0 0 16px rgba(255,213,107,1), 0 0 24px rgba(255,255,200,0.6); transform:rotate(-5deg); }
}

/* Boom — détonation particules */
.cos-em.boom { background:radial-gradient(circle at 50% 50%, #5a1a1a, #0b0f1c 70%); }
.cos-em.boom::before {
  content:''; position:absolute; inset:50%; width:4px; height:4px; margin:-2px;
  border-radius:50%; background:#ffbb44;
  box-shadow:
    0  -10px 0 -1px #ff7722,
    7   -7px 0 -1px #ff7722,
    10    0 0 -1px #ff7722,
    7    7px 0 -1px #ff7722,
    0  10px 0 -1px #ff7722,
    -7   7px 0 -1px #ff7722,
    -10   0 0 -1px #ff7722,
    -7  -7px 0 -1px #ff7722;
  animation:cosBoom 1.4s ease-out infinite;
}
@keyframes cosBoom {
  0%   { transform:scale(0.2); opacity:1; }
  60%  { transform:scale(1.6); opacity:0.9; }
  100% { transform:scale(2.2); opacity:0; }
}

/* Lock — symbole Stargate verrouillé */
.cos-em.lock::before {
  content:''; position:absolute; inset:7px; border-radius:50%;
  border:2px solid #9d5cd7; border-right-color:#e3b5ff; border-bottom-color:#e3b5ff;
  animation:cosSpin 2.5s linear 1;
}
.cos-em.lock::after {
  content:'✧'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#e3b5ff; font-size:16px;
  text-shadow:0 0 8px #9d5cd7;
  animation:cosLockPulse 1.8s ease-in-out infinite;
}
@keyframes cosLockPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.3); } }

/* ─── Title (animated gold text for Champion) ─────────────── */
.cos-title {
  display:inline-block; position:relative;
  font-family:var(--font-display); font-weight:900; font-size:13px; letter-spacing:2px;
  padding:4px 12px; border-radius:6px;
  background:linear-gradient(90deg, transparent, rgba(255,213,107,0.15), transparent);
  color:transparent;
  background-clip:text; -webkit-background-clip:text;
  background-image:linear-gradient(90deg, #e0a830 0%, #fff5c0 30%, #ffffff 50%, #fff5c0 70%, #e0a830 100%);
  background-size:200% 100%;
  animation:cosTitleShimmer 3s linear infinite;
  text-shadow:0 0 12px rgba(255,213,107,0.5);
  border:1px solid rgba(255,213,107,0.4);
  white-space:nowrap;
}
@keyframes cosTitleShimmer {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

/* ─── Cosmetic cell wrapper (BP row) ──────────────────────── */
.cos-wrap {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 10px; border-radius:10px;
  background:linear-gradient(135deg, rgba(224,168,48,0.08), rgba(126,59,199,0.06));
  border:1px solid rgba(255,213,107,0.3);
  max-width:100%; min-width:0; overflow:hidden;
}
.cos-wrap-label {
  font-family:var(--font-mono); font-size:10px;
  color:var(--gold); text-transform:uppercase; letter-spacing:1px;
  text-align:center;
}
.cos-wrap.legend { border-color:#ffd56b; box-shadow:0 0 14px rgba(255,213,107,0.35); }

/* ─── Mini preview (for promo banners) ────────────────────── */
.cos-preview-row {
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.cos-preview-cell {
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:54px; height:54px; padding:4px;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(224,168,48,0.12), rgba(11,15,28,0.4));
  border:1px solid rgba(255,213,107,0.4);
  overflow:hidden; cursor:help;
  transition:transform .15s ease, box-shadow .15s ease;
}
.cos-preview-cell:hover { transform:translateY(-3px) scale(1.08); box-shadow:0 6px 14px rgba(255,213,107,0.35); z-index:5; }
.cos-preview-cell.legend { border-color:#ffd56b; box-shadow:0 0 10px rgba(255,213,107,0.35); }
.cos-preview-cell .cos-frame { width:46px; height:46px; }
.cos-preview-cell .cos-frame-inner { font-size:14px; inset:4px; }
.cos-preview-cell .cos-frame-inner::after { box-shadow:inset 0 -7px 11px var(--shade-2); }
.cos-preview-cell .cos-frame.bronze::after  { background:
    radial-gradient(circle at 50% 5%,  #ffe0b0 0.6px, transparent 1.4px),
    radial-gradient(circle at 95% 50%, #ffe0b0 0.6px, transparent 1.4px),
    radial-gradient(circle at 50% 95%, #ffe0b0 0.6px, transparent 1.4px),
    radial-gradient(circle at 5% 50%,  #ffe0b0 0.6px, transparent 1.4px); }
.cos-preview-cell .cos-frame.silver::after  { mask:radial-gradient(circle at center, transparent 20px, #000 21px, #000 23px, transparent 24px); -webkit-mask:radial-gradient(circle at center, transparent 20px, #000 21px, #000 23px, transparent 24px); }
.cos-preview-cell .cos-frame.gold::after    { mask:radial-gradient(circle at center, transparent 21px, #000 23px, #000 25px, transparent 26px); -webkit-mask:radial-gradient(circle at center, transparent 21px, #000 23px, #000 25px, transparent 26px); }

.cos-preview-cell .cos-banner { width:50px; height:20px; font-size:7px; letter-spacing:0.5px; border-radius:4px; }
.cos-preview-cell .cos-banner-txt { font-size:7px; }

.cos-preview-cell .cos-emotes { gap:2px; }
.cos-preview-cell .cos-em { width:14px; height:14px; border-radius:3px; }
.cos-preview-cell .cos-em.chevron::before { border-left-width:3px; border-right-width:3px; border-bottom-width:5px; }
.cos-preview-cell .cos-em.chevron::after  { inset:2px; }
.cos-preview-cell .cos-em.vortex::before  { inset:2px; border-width:1px; }
.cos-preview-cell .cos-em.vortex::after   { inset:3px; }
.cos-preview-cell .cos-em.salute::before  { font-size:9px; }
.cos-preview-cell .cos-em.boom::before    { width:2px; height:2px; margin:-1px;
  box-shadow:
    0  -4px 0 -0.5px #ff7722, 3 -3px 0 -0.5px #ff7722, 4 0 0 -0.5px #ff7722, 3 3px 0 -0.5px #ff7722,
    0 4px 0 -0.5px #ff7722, -3 3px 0 -0.5px #ff7722, -4 0 0 -0.5px #ff7722, -3 -3px 0 -0.5px #ff7722; }
.cos-preview-cell .cos-em.lock::before    { inset:3px; border-width:1px; }
.cos-preview-cell .cos-em.lock::after     { font-size:7px; }
/* Pack d'émotes : afficher en 2 lignes compactes */
.cos-preview-cell.emote-pack { width:auto; min-width:54px; padding:6px; }
.cos-preview-cell.emote-pack .cos-emotes { flex-wrap:wrap; max-width:44px; justify-content:center; }

.cos-preview-cell .cos-title {
  font-size:8px; padding:2px 6px; letter-spacing:1px;
}

.cos-preview-tier {
  position:absolute; top:-6px; right:-6px;
  background:var(--gold); color:#000;
  font-family:var(--font-display); font-size:9px; font-weight:900;
  padding:2px 5px; border-radius:8px; border:1px solid #3a2a00;
  min-width:18px; text-align:center;
}

/* ═══════════════════════════════════════════════════════════
   STARGATE — Porte des Étoiles (Mode Survie + Ascensionnée)
   ═══════════════════════════════════════════════════════════ */

/* Anneau Stargate : ring extérieur + event horizon + chevrons */
.sg-sg {
  position:relative; display:inline-block;
  width:64px; height:64px;
  --sg-chev-radius:26px;
  --sg-ring-dark:#3d2810;
  --sg-ring-mid:#8a5a2a;
  --sg-ring-light:#c48540;
  --sg-glow: rgba(196,133,64,0.45);
  --sg-eh-inner:#0a0a0a; --sg-eh-mid:#030303; --sg-eh-outer:#000;
  --sg-chev-off:#1a1208; --sg-chev-on:#ffb366;
}
.sg-sg .sg-ring {
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.18), transparent 45%),
    conic-gradient(from 15deg,
      var(--sg-ring-dark), var(--sg-ring-mid), var(--sg-ring-light),
      var(--sg-ring-mid), var(--sg-ring-dark),
      var(--sg-ring-mid), var(--sg-ring-light), var(--sg-ring-mid),
      var(--sg-ring-dark));
  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.9),
    inset 0 0 2px var(--tint-10),
    0 0 18px var(--sg-glow);
  animation:sgRingSpin 26s linear infinite;
}
.sg-sg .sg-ring::before {
  content:''; position:absolute; inset:3px; border-radius:50%;
  border:1px solid var(--shade-5);
  box-shadow:inset 0 0 0 1px var(--tint-4);
}
.sg-sg .sg-eh {
  position:absolute; inset:15%; border-radius:50%;
  background:radial-gradient(circle, var(--sg-eh-inner) 0%, var(--sg-eh-mid) 60%, var(--sg-eh-outer) 100%);
  box-shadow:inset 0 0 16px rgba(0,0,0,0.75);
  z-index:1;
}
.sg-sg .sg-chev {
  position:absolute; top:50%; left:50%;
  width:8px; height:6px; margin:-3px 0 0 -4px;
  background:var(--sg-chev-off);
  clip-path:polygon(50% 100%, 100% 0%, 0% 0%);
  opacity:0.55;
  transform:rotate(var(--sg-chev-angle,0deg)) translateY(calc(var(--sg-chev-radius) * -1));
  transform-origin:50% 50%;
  z-index:2;
}
.sg-sg .sg-chev.lit {
  background:var(--sg-chev-on);
  opacity:1;
  filter:drop-shadow(0 0 3px var(--sg-chev-on)) drop-shadow(0 0 6px var(--sg-chev-on));
  animation:sgChevBurn 2.4s ease-in-out infinite;
}
@keyframes sgRingSpin { to { transform:rotate(360deg); } }
@keyframes sgChevBurn {
  0%,100% { filter:drop-shadow(0 0 3px var(--sg-chev-on)) drop-shadow(0 0 6px var(--sg-chev-on)); }
  50%     { filter:drop-shadow(0 0 6px var(--sg-chev-on)) drop-shadow(0 0 12px var(--sg-chev-on)); }
}

/* Tier variations */
.sg-sg.bronze {
  --sg-ring-dark:#2e1e08; --sg-ring-mid:#7a4a1e; --sg-ring-light:#b87838;
  --sg-glow: rgba(184,120,56,0.45);
  --sg-chev-on:#ffb366;
}
.sg-sg.silver {
  --sg-ring-dark:#1a1f28; --sg-ring-mid:#5a6270; --sg-ring-light:#a8b0bc;
  --sg-glow: rgba(168,176,188,0.4);
  --sg-chev-on:#e8ecf4;
}
.sg-sg.gold {
  --sg-ring-dark:#2a1f08; --sg-ring-mid:#8a6820; --sg-ring-light:#e0b040;
  --sg-glow: rgba(224,176,64,0.55);
  --sg-eh-inner:#1f5a8f; --sg-eh-mid:#0a2840; --sg-eh-outer:#051424;
  --sg-chev-on:#ffd88a;
}
.sg-sg.gold .sg-eh {
  background:radial-gradient(circle, var(--sg-eh-inner) 0%, var(--sg-eh-mid) 55%, var(--sg-eh-outer) 100%);
  animation:sgEhShimmer 3.6s ease-in-out infinite;
}
.sg-sg.gold .sg-eh::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 30% 35%, rgba(180,220,255,0.35) 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(140,200,255,0.25) 0%, transparent 35%);
  animation:sgEhRipple 5s ease-in-out infinite;
  mix-blend-mode:screen;
}
@keyframes sgEhShimmer {
  0%,100% { box-shadow:inset 0 0 16px rgba(0,0,0,0.75), inset 0 0 12px rgba(80,160,240,0.3); }
  50%     { box-shadow:inset 0 0 14px rgba(0,0,0,0.65), inset 0 0 20px rgba(120,200,255,0.5); }
}
@keyframes sgEhRipple {
  0%,100% { transform:scale(1) rotate(0deg); opacity:0.9; }
  50%     { transform:scale(1.08) rotate(8deg); opacity:1; }
}

/* Kawoosh — explosion légendaire d'ouverture de porte */
.sg-kawoosh {
  position:relative; display:inline-block;
  width:80px; height:80px;
}
.sg-kawoosh .sg-sg {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:56px; height:56px;
  --sg-chev-radius:22px;
  z-index:2;
}
.sg-kawoosh::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle,
    rgba(180,230,255,0.95) 0%,
    rgba(100,180,240,0.7)  22%,
    rgba(50,130,220,0.4)   45%,
    rgba(20,60,150,0.15)   65%,
    transparent 82%);
  animation:sgKawooshBurst 2.2s ease-out infinite;
  mix-blend-mode:screen;
  z-index:1;
}
.sg-kawoosh::after {
  content:''; position:absolute; inset:18%; border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(200,230,255,0.85) 30deg, transparent 80deg,
    transparent 120deg, rgba(160,210,255,0.75) 160deg, transparent 210deg,
    transparent 250deg, rgba(200,230,255,0.7) 290deg, transparent 340deg);
  animation:sgVortexSpin 1.8s linear 1;
  mix-blend-mode:screen;
  filter:blur(1px);
  z-index:3;
}
@keyframes sgKawooshBurst {
  0%   { transform:scale(0.65); opacity:1; }
  55%  { transform:scale(1.08); opacity:0.65; }
  100% { transform:scale(1.28); opacity:0; }
}
@keyframes sgVortexSpin { to { transform:rotate(360deg); } }

/* Top 1 — Porte couronnée avec aura */
.sg-crown {
  position:relative; display:inline-block;
  width:72px; height:80px;
  padding-top:10px;
}
.sg-crown .sg-sg {
  width:60px; height:60px;
  --sg-chev-radius:24px;
  position:absolute; bottom:4px; left:50%;
  transform:translateX(-50%);
}
.sg-crown::before {
  content:'♛'; position:absolute;
  top:-4px; left:50%; transform:translateX(-50%);
  font-size:22px; color:#ffd88a;
  text-shadow:0 0 10px #ffd88a, 0 0 18px rgba(255,200,120,0.7);
  animation:sgCrownFloat 3s ease-in-out infinite;
  z-index:3;
}
.sg-crown::after {
  content:''; position:absolute; inset:-4px; border-radius:50%;
  background:radial-gradient(circle at 50% 70%,
    rgba(255,216,138,0.35) 0%,
    rgba(255,180,80,0.15) 35%,
    transparent 60%);
  animation:sgCrownAura 4s ease-in-out infinite;
  z-index:0;
}
@keyframes sgCrownFloat {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%     { transform:translateX(-50%) translateY(-3px); }
}
@keyframes sgCrownAura {
  0%,100% { opacity:0.7; transform:scale(1); }
  50%     { opacity:1; transform:scale(1.05); }
}

/* Ascensionné — forme énergétique Alterans (blanc/doré) */
.sg-ascended {
  position:relative; display:inline-block;
  width:68px; height:68px;
}
.sg-ascended::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,255,255,0.95) 0%,
    rgba(255,245,210,0.7)  22%,
    rgba(255,210,130,0.35) 45%,
    rgba(220,160,60,0.15)  65%,
    transparent 80%);
  animation:sgAscPulse 3s ease-in-out infinite;
  mix-blend-mode:screen;
  z-index:1;
}
.sg-ascended::after {
  content:''; position:absolute; inset:12%; border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent, rgba(255,255,255,0.9), transparent,
    rgba(255,230,170,0.85), transparent,
    rgba(255,255,255,0.9), transparent);
  filter:blur(1.5px);
  animation:sgVortexSpin 4.2s linear 1 reverse;
  mix-blend-mode:screen;
  z-index:2;
}
.sg-ascended .sg-asc-core {
  position:absolute; top:50%; left:50%;
  width:20px; height:38px;
  border-radius:50% 50% 45% 45% / 60% 60% 40% 40%;
  background:radial-gradient(ellipse at 50% 30%,
    #ffffff 0%,
    rgba(255,240,200,0.85) 40%,
    rgba(255,200,120,0.4) 70%,
    transparent 100%);
  transform:translate(-50%,-50%);
  filter:blur(0.8px) drop-shadow(0 0 8px rgba(255,240,200,0.8));
  animation:sgAscFloat 3.5s ease-in-out infinite;
  z-index:3;
}
.sg-ascended .sg-asc-core::before {
  content:''; position:absolute; inset:-20% 30%;
  background:radial-gradient(circle,
    rgba(255,255,255,0.6) 0%, transparent 70%);
  border-radius:50%;
  animation:sgAscHead 3.5s ease-in-out infinite;
}
@keyframes sgAscPulse {
  0%,100% { transform:scale(1); opacity:0.85; }
  50%     { transform:scale(1.08); opacity:1; }
}
@keyframes sgAscFloat {
  0%,100% { transform:translate(-50%,-50%) scaleY(1); }
  50%     { transform:translate(-50%,-56%) scaleY(1.06); }
}
@keyframes sgAscHead {
  0%,100% { transform:translateY(0); opacity:0.7; }
  50%     { transform:translateY(-3px); opacity:1; }
}

/* Intégration dans les cartes milestones du mode Survie (tailles déjà compactes, pas de scale) */

/* ═══════════════════════════════════════════════════════════
   COSMETICS EQUIP UI v2 — Slots + inventaire (onglet Cosmétiques)
   ═══════════════════════════════════════════════════════════ */
/* Avatar framed : neutralise le conteneur prof2-avatar pour laisser passer le cadre cosmetic */
.prof2-avatar.prof2-avatar-framed {
  border: none !important;
  background: none !important;
  overflow: visible !important;
  box-shadow: none !important;
  width: 80px; height: 80px;
}
.prof2-avatar.prof2-avatar-framed:hover { box-shadow: none !important; transform: none; }
.prof2-avatar.prof2-avatar-framed > .cos-frame { width:80px; height:80px; }
.prof2-avatar.prof2-avatar-framed img,
.prof2-avatar.prof2-avatar-framed svg,
.prof2-avatar.prof2-avatar-framed canvas { width: auto; height: auto; }

/* Neutralise les stroke/border dans la preview avatar de l'édition profil si encadré */
#peAvatarPreview:has(.cos-frame) { border: none !important; box-shadow: none !important; overflow: visible !important; }

/* ─── Wrapper principal ─── */
.cos-v2-wrap { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }

.cos-section-hdr {
  font-family:var(--font-display);
  font-size: 12px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--textsoft); padding: 6px 2px;
  border-bottom: 1px dashed rgba(var(--accent-rgb), 0.18);
  margin-bottom: 10px;
}
.cos-inv-total {
  display: inline-block; margin-left: 10px;
  padding: 2px 10px; border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.12); color: var(--accent);
  font-size: 11px; font-weight: 700;
}

/* ─── Slots équipés ─── */
.cos-slots-v2 {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-bottom: 6px;
}
.cos-slot-v2 {
  position: relative; background: var(--tint-1);
  border: 1px dashed rgba(var(--accent-rgb), 0.22);
  border-radius: 12px; padding: 12px 10px 10px;
  min-height: 170px; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; gap: 8px;
  transition: all 0.25s;
}
.cos-slot-v2.filled {
  background: linear-gradient(160deg, rgba(var(--accent-rgb),0.08) 0%, rgba(var(--accent-rgb),0.02) 100%);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.12);
}
.cos-slot-v2:hover { border-color: rgba(var(--accent-rgb), 0.5); transform: translateY(-1px); }
.cos-slot-type {
  font-family:var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--textsoft); margin-bottom: 4px;
}
.cos-slot-v2.filled .cos-slot-type { color: var(--accent); }
.cos-slot-preview {
  flex: 1; display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 80px;
}
.cos-slot-name {
  font-family:var(--font-mono);
  font-size: 11px; color: var(--textmid);
  text-align: center; line-height: 1.25;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.cos-slot-blank {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-family:var(--font-mono);
  font-size: 12px; color: var(--textsoft);
  opacity: 0.4; letter-spacing: 1px;
}
.cos-slot-remove {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(var(--danger-rgb, 255, 64, 64), 0.5);
  background: var(--shade-5); color: var(--danger, #ff4040);
  font-size: 14px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; padding: 0; transition: all 0.2s;
}
.cos-slot-remove:hover { background: var(--danger, #ff4040); color: #000; transform: scale(1.1); }

/* ─── Inventaire par type ─── */
.cos-inv-group-v2 { margin-bottom: 14px; }
.cos-inv-group-hdr-v2 {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px; padding: 4px 2px;
}
.cos-inv-group-type {
  font-family:var(--font-mono);
  font-size: 12px; color: var(--textmid);
  letter-spacing: 1.5px; text-transform: uppercase;
}
.cos-inv-count-v2 {
  padding: 1px 8px; border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-size: 10px; font-weight: 700;
  font-family:var(--font-display);
}
.cos-inv-grid-v2 {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.cos-card-v2 {
  background: var(--tint-1);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 10px; padding: 14px 8px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: all 0.2s;
}
.cos-card-v2:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.05);
  transform: translateY(-2px);
}
.cos-card-v2.equipped {
  border-color: rgba(var(--accent-rgb), 0.6);
  background: rgba(var(--accent-rgb), 0.1);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.2);
}
.cos-card-preview-v2 {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 90px; width: 100%; overflow: hidden;
}
.cos-card-preview-v2 .cos-title,
.cos-slot-preview .cos-title {
  font-size: 9px; letter-spacing: 1px; padding: 3px 6px;
  max-width: 100%; white-space: normal; word-break: break-word;
  text-align: center; line-height: 1.2;
}
.cos-card-preview-v2 .cos-frame,
.cos-slot-preview .cos-frame { width: 48px; height: 48px; }
.cos-card-preview-v2 .sg-sg,
.cos-slot-preview .sg-sg { width: 48px; height: 48px; --sg-chev-radius: 20px; }
.cos-slot-preview { flex-direction: column; gap: 6px; overflow: hidden; }
.cos-card-name-v2 {
  font-family:var(--font-mono);
  font-size: 11px; color: var(--textmid);
  text-align: center; line-height: 1.3;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.cos-card-btn-v2 {
  width: 100%; padding: 6px 10px;
  font-family:var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1px; border-radius: 6px;
  cursor: pointer;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent); transition: all 0.2s;
}
.cos-card-btn-v2:hover { background: rgba(var(--accent-rgb), 0.2); }
.cos-card-btn-v2.equipped {
  background: var(--accent); color: #000;
  border-color: var(--accent);
}
.cos-card-btn-v2.equipped:hover { background: rgba(var(--danger, #ff4040), 0.8); color:var(--textbright); border-color: var(--danger, #ff4040); }

.cos-empty-v2 {
  padding: 50px 20px; margin-top: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center;
}
.cos-empty-txt {
  font-family:var(--font-mono);
  color: var(--textsoft); max-width: 420px;
  line-height: 1.5; font-size: 13px;
}

@media (max-width: 700px) {
  .cos-slots-v2 { grid-template-columns: repeat(2, 1fr); }
  .cos-inv-grid-v2 { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ─── Chat : badge titre équipé + bouton emote picker ─── */
.chat-cos-title {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,200,80,0.25), rgba(255,230,120,0.12));
  border: 1px solid rgba(255,200,80,0.45);
  color: #ffd77a;
  font-family:var(--font-display);
  font-size: 9px; font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 0 6px rgba(255,200,80,0.6);
  vertical-align: middle;
}

.chat-emote-btn {
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 8px;
  width: 36px; height: 36px;
  font-size: 18px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  color: var(--textmid); padding: 0; margin-right: 4px;
}
.chat-emote-btn:hover {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.45);
  transform: scale(1.05);
}

.chat-emote-picker {
  background: rgba(12, 18, 30, 0.98);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 10px;
  padding: 8px;
  display: flex; gap: 6px;
  box-shadow: 0 6px 24px var(--shade-5), 0 0 16px rgba(var(--accent-rgb), 0.2);
  z-index:var(--z-overlay-fullscreen);
  backdrop-filter: blur(10px);
}
.chat-emote-pick {
  background: var(--tint-2);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 8px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.15s; padding: 0;
}
.chat-emote-pick:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.5);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════
   ANCIENNES CLASSES (sgc-cosmetics-equip v1) — ignorer
   ═══════════════════════════════════════════════════════════ */
.cos-slots-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.cos-slot {
  background: rgba(var(--accent-rgb), 0.04);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 10px;
  padding: 10px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  transition: all 0.2s;
}
.cos-slot:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.07);
}
.cos-slot-hdr {
  font-family:var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--textsoft);
  text-transform: uppercase;
}
.cos-slot-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
}
.cos-slot-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--textsoft);
  opacity: 0.45;
  font-size: 28px;
  font-family:var(--font-mono);
}
.cos-unequip-btn {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--danger, #ff4040);
  background: var(--shade-3);
  color: var(--danger, #ff4040);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.2s;
}
.cos-unequip-btn:hover { background: var(--danger, #ff4040); color: #000; }

.cos-inv-group { margin-bottom: 18px; }
.cos-inv-group-hdr {
  font-family:var(--font-mono);
  font-size: 13px;
  color: var(--textmid);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(var(--accent-rgb), 0.15);
}
.cos-inv-count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-size: 11px;
  font-family:var(--font-display);
  font-weight: 700;
}
.cos-inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.cos-inv-card {
  background: rgba(var(--accent-rgb), 0.04);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 10px;
  padding: 12px 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}
.cos-inv-card:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.08);
  transform: translateY(-2px);
}
.cos-inv-card.cos-inv-eq {
  border-color: rgba(var(--accent-rgb), 0.6);
  background: rgba(var(--accent-rgb), 0.1);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.25);
}
.cos-inv-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  width: 100%;
}
.cos-inv-btn {
  width: 100%;
  padding: 6px 10px;
  font-family:var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  transition: all 0.2s;
}
.cos-inv-btn:hover { background: rgba(var(--accent-rgb), 0.18); }
.cos-inv-btn-eq {
  background: var(--accent);
  color: #000;
  cursor: default;
}
.cos-inv-btn-eq:hover { background: var(--accent); }

.cos-empty {
  padding: 50px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

@media (max-width: 700px) {
  .cos-slots-grid { grid-template-columns: repeat(2, 1fr); }
  .cos-inv-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════
   v3 — Auras / Titres / Bannières / Emblèmes (Monument/Survie/BP/Faction)
   Catalogue : backend/src/data/cosmetics-catalog.js
   ═══════════════════════════════════════════════════════════ */

.sgc-avatar-cosmetic { position:relative; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; line-height:0; font-size:0; vertical-align:middle; --halo-out:-10%; --halo-in:-3%; }
.sgc-avatar-cosmetic > * { position:relative; z-index:2; }

.a-cyan::before, .a-cyan::after,
.a-holo::before, .a-holo::after,
.a-prism::before, .a-prism::after,
.a-void::before, .a-void::after,
.a-flame::before, .a-flame::after,
.a-blood::before, .a-blood::after,
.a-wraith::before, .a-wraith::after,
.a-ashes::before, .a-ashes::after,
.a-plasma::before, .a-plasma::after,
.a-apoc::before, .a-apoc::after,
.a-nebula::before, .a-nebula::after,
.a-comet::before, .a-comet::after { content:''; position:absolute; border-radius:50%; pointer-events:none; }

@keyframes sgcSpin { to { transform:rotate(360deg); } }
@keyframes sgcPulse { 0%,100% { opacity:.5; transform:scale(.95); } 50% { opacity:1; transform:scale(1.08); } }
@keyframes sgcFlicker { 0%,100% { opacity:.6; transform:scale(1); } 25% { opacity:.95; transform:scale(1.04); } 50% { opacity:.7; transform:scale(.97); } 75% { opacity:1; transform:scale(1.06); } }
@keyframes sgcHoloshift { 0% { background-position:0% 0%; } 100% { background-position:300% 300%; } }
@keyframes sgcTitleshift { to { background-position:200% 0; } }
@keyframes sgcOrbit { from { transform:rotate(0) translateX(70%) rotate(0); } to { transform:rotate(360deg) translateX(70%) rotate(-360deg); } }
@keyframes sgcAshFall { 0% { transform:translateY(-10%); opacity:0; } 50% { opacity:.8; } 100% { transform:translateY(120%); opacity:0; } }

/* 🏛 MONUMENT */
.a-cyan::before { inset:var(--halo-out); background:radial-gradient(circle,rgba(77,255,234,.6) 0%,rgba(77,108,255,.3) 50%,transparent 70%); filter:blur(8px); animation:sgcPulse 2.4s ease-in-out 1; z-index:0; }
.a-cyan::after { inset:var(--halo-in); border:2px solid rgba(77,255,234,.8); box-shadow:0 0 30px rgba(77,255,234,.6),inset 0 0 30px rgba(77,108,255,.4); z-index:1; }
.a-holo::before { inset:var(--halo-out); background:linear-gradient(115deg,transparent 0%,#ff4d9e 25%,#4dffea 50%,#ffd33d 75%,transparent 100%); background-size:300% 300%; filter:blur(10px); animation:sgcHoloshift 4s linear 1; mix-blend-mode:screen; z-index:0; }
.a-holo::after { inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%); background-size:200% 200%; animation:sgcHoloshift 3s linear 1; mix-blend-mode:overlay; z-index:3; }
.a-prism::before { inset:var(--halo-out); background:conic-gradient(from 0deg,#ff4d2e,#ffd33d,#9aff4d,#4dffea,#4d6cff,#c44dff,#ff4d2e); filter:blur(14px); opacity:.85; animation:sgcSpin 8s linear infinite; z-index:0; }
.a-prism::after { inset:var(--halo-in); background:conic-gradient(from 90deg,transparent 0%,#fff 5%,transparent 15%,transparent 100%); animation:sgcSpin 3s linear infinite reverse; opacity:.6; z-index:1; mix-blend-mode:screen; }
.a-void::before { inset:var(--halo-out); background:radial-gradient(circle,#000 30%,#7c2eff 50%,transparent 75%); filter:blur(12px); animation:sgcPulse 4s ease-in-out 1; z-index:0; }
.a-void::after { inset:var(--halo-in); border:1px solid rgba(196,77,255,.8); box-shadow:0 0 20px rgba(124,46,255,.8),inset 0 0 20px rgba(196,77,255,.5); z-index:1; }
.a-flame::before { inset:var(--halo-out); background:radial-gradient(circle,rgba(255,180,80,.5) 0%,rgba(201,59,30,.4) 40%,transparent 70%); filter:blur(12px); animation:sgcFlicker 1.4s ease-in-out 1; z-index:0; }
.a-flame::after { inset:var(--halo-in); background:conic-gradient(from 0deg,#ffb850,#c93b1e,#ff7a2e,#ffd33d,#c93b1e,#ffb850); filter:blur(4px); animation:sgcSpin 4s linear infinite; opacity:.7; mix-blend-mode:screen; z-index:1; }

/* ⚔ SURVIE */
.a-blood::before { inset:var(--halo-out); background:radial-gradient(circle,rgba(255,30,30,.5) 0%,rgba(160,0,0,.4) 50%,transparent 75%); filter:blur(10px); animation:sgcPulse 1.1s ease-in-out 1; z-index:0; }
.a-blood::after { inset:var(--halo-in); border:1px solid rgba(255,40,40,.7); box-shadow:0 0 24px rgba(255,30,30,.7),inset 0 0 16px rgba(160,0,0,.5); z-index:1; }
.a-wraith::before { inset:var(--halo-out); background:radial-gradient(circle,rgba(120,255,80,.5) 0%,rgba(50,160,30,.4) 50%,transparent 75%); filter:blur(11px); animation:sgcPulse 3s ease-in-out 1; z-index:0; }
.a-wraith::after { inset:var(--halo-in); border:1px solid rgba(120,255,80,.7); box-shadow:0 0 22px rgba(80,200,40,.7),inset 0 0 16px rgba(50,160,30,.5); z-index:1; mix-blend-mode:screen; }
.a-ashes::before { inset:var(--halo-out); background:radial-gradient(circle,rgba(80,75,70,.6) 0%,rgba(30,28,26,.4) 50%,transparent 75%); filter:blur(10px); z-index:0; }
.a-ashes::after { inset:var(--halo-out); background-image:radial-gradient(2px 2px at 30% 20%,#888 50%,transparent),radial-gradient(1px 1px at 60% 50%,#aaa 50%,transparent),radial-gradient(2px 2px at 80% 80%,#666 50%,transparent); animation:sgcAshFall 3.2s linear infinite; z-index:1; }
.a-plasma::before { inset:var(--halo-out); background:radial-gradient(circle,rgba(80,180,255,.5) 0%,rgba(120,40,255,.4) 50%,transparent 75%); filter:blur(9px); animation:sgcPulse 1.8s ease-in-out 1; z-index:0; }
.a-plasma::after { inset:var(--halo-in); border:2px dashed rgba(140,200,255,.85); box-shadow:0 0 30px rgba(80,180,255,.7),inset 0 0 18px rgba(120,40,255,.6); animation:sgcSpin 2.4s linear infinite; z-index:1; }
.a-apoc::before { inset:var(--halo-out); background:conic-gradient(from 0deg,#400000,#000,#8a0000,#1a1a1a,#400000); filter:blur(13px); animation:sgcSpin 6s linear infinite; z-index:0; }
.a-apoc::after { inset:var(--halo-in); background:radial-gradient(circle,rgba(255,30,30,.7) 0%,rgba(40,0,0,.4) 60%,transparent 80%); filter:blur(6px); animation:sgcFlicker 1.6s ease-in-out 1; mix-blend-mode:screen; z-index:1; }

/* ⭐ BATTLE PASS */
.a-nebula::before { inset:var(--halo-out); background:radial-gradient(circle at 30% 30%,rgba(196,77,255,.5),transparent 60%),radial-gradient(circle at 70% 60%,rgba(77,255,234,.4),transparent 60%),radial-gradient(circle at 50% 80%,rgba(255,140,200,.4),transparent 60%); filter:blur(12px); animation:sgcPulse 5s ease-in-out 1; z-index:0; }
.a-nebula::after { inset:var(--halo-in); border:1px solid rgba(196,77,255,.5); box-shadow:0 0 22px rgba(120,80,255,.5); z-index:1; }
.a-comet::before { inset:var(--halo-out); background:radial-gradient(circle,rgba(77,170,255,.4) 0%,rgba(40,80,180,.3) 50%,transparent 75%); filter:blur(9px); animation:sgcPulse 4s ease-in-out 1; z-index:0; }
.a-comet::after { width:14px; height:14px; top:50%; left:50%; margin:-7px 0 0 -7px; background:radial-gradient(circle,#fff 0%,#aaddff 40%,transparent 70%); box-shadow:0 0 16px #aaddff,0 0 32px #4dccff,-30px 0 24px rgba(170,221,255,.4); animation:sgcOrbit 4s linear infinite; z-index:1; }

/* TITRES */
.sgc-title { font-family:var(--font-mystic-deco); font-weight:900; letter-spacing:5px; text-transform:uppercase; }
.t-architect { background:linear-gradient(180deg,#fff7d6,#ffd33d 50%,#a07a10); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 2px 6px rgba(255,211,61,.3); }
.t-legend { background:linear-gradient(90deg,#4dffea,#4d6cff,#c44dff,#4dffea); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sgcTitleshift 4s linear 1; text-shadow:0 0 12px rgba(77,255,234,.4); }
.t-doci { font-family:'MedievalSharp',serif; color:var(--textbright); text-shadow:0 0 6px #c93b1e,0 0 14px #ff7a2e,0 0 24px #c93b1e; animation:sgcFlicker 2s ease-in-out 1; }
.t-gate { background:linear-gradient(90deg,#ffd33d,#fff,#ffd33d); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sgcTitleshift 3s linear 1; }
.t-steel { background:linear-gradient(180deg,#cfd8dc,#90a4ae 60%,#3e5060); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 2px 4px rgba(0,0,0,.5); }
.t-apoc { background:linear-gradient(90deg,#8a0000,#1a1a1a,#8a0000); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sgcTitleshift 2s linear 1; text-shadow:0 0 10px rgba(255,30,30,.5); }
.t-pioneer { background:linear-gradient(90deg,#cfdde8,#4dccff,#a8b8d8); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sgcTitleshift 5s linear 1; text-shadow:0 0 12px rgba(120,200,255,.4); }

/* BANNIÈRES */
.sgc-banner { display:inline-block; padding:10px 24px; font-family:var(--font-mystic-deco); font-size:13px; letter-spacing:3px; text-transform:uppercase; position:relative; }
.b-gold { background:linear-gradient(180deg,#3d2a08,#1a0f02); border:1px solid #a07a10; color:#ffd33d; box-shadow:0 0 20px rgba(255,211,61,.25),inset 0 0 12px rgba(255,211,61,.15); }
.b-gold::before, .b-gold::after { content:'❖'; position:absolute; top:50%; transform:translateY(-50%); color:#ffd33d; font-size:12px; }
.b-gold::before { left:6px; } .b-gold::after { right:6px; }
.b-ori { background:linear-gradient(180deg,#2a0a04,#100302); border:1px solid #c93b1e; color:#ffb89b; box-shadow:0 0 22px rgba(201,59,30,.4),inset 0 0 14px rgba(255,122,46,.2); clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%); }
.b-prism { background:linear-gradient(90deg,#2a0a04,#0a1a2e,#1a0a2e,#2a0a04); border:1px solid; border-image:linear-gradient(90deg,#ff4d2e,#ffd33d,#4dffea,#c44dff,#ff4d2e) 1; color:var(--textbright); box-shadow:0 0 25px rgba(196,77,255,.3); }
.b-firstlight { background:linear-gradient(135deg,#0a1a3e 0%,#3e1a5a 40%,#5a3e7a 70%,#7a5a9e 100%); border:1px solid #4dccff; color:var(--textbright); box-shadow:0 0 25px rgba(77,170,255,.45),inset 0 0 14px rgba(255,180,220,.25); }

/* EMBLÈMES */
.sgc-emblem { width:80px; height:80px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:40px; position:relative; }
.e-hexa { background:radial-gradient(circle,#0a1830 0%,#000 80%); border:2px solid #4dccff; color:#cfdde8; box-shadow:0 0 24px rgba(77,170,255,.5),inset 0 0 16px rgba(120,200,255,.2); }
.e-hexa::before { content:''; position:absolute; inset:-6px; border-radius:50%; border:1px dashed #4dccff; animation:sgcSpin 18s linear infinite; opacity:.6; }
.e-ori { background:radial-gradient(circle,#1a0a2e 0%,#000 80%); border:2px solid #c93b1e; color:#ffd33d; box-shadow:0 0 30px rgba(201,59,30,.5),inset 0 0 20px rgba(255,211,61,.2); animation:sgcPulse 3s ease-in-out 1; }
.e-ori::before { content:''; position:absolute; inset:-6px; border-radius:50%; border:1px dashed #ffd33d; animation:sgcSpin 20s linear infinite; opacity:.6; }
.e-atom { background:radial-gradient(circle,#0a0a2e 0%,#000 80%); border:2px solid #4dffea; color:var(--textbright); box-shadow:0 0 24px rgba(77,255,234,.5); }
.e-atom::before, .e-atom::after { content:''; position:absolute; inset:-2px; border-radius:50%; border:1px solid rgba(77,255,234,.6); }
.e-atom::before { animation:sgcSpin 4s linear infinite; clip-path:polygon(0 50%,100% 50%,100% 52%,0 52%); }
.e-atom::after { animation:sgcSpin 6s linear infinite reverse; clip-path:polygon(50% 0,52% 0,52% 100%,50% 100%); }

/* CADRE Pioneer (BP T3) — l'avatar (img/svg/div) remplit complètement le cercle.
   box-sizing:border-box → la border 2px et padding 0 sont inclus dans la taille,
   pas d'overflow inattendu. Les enfants directs sont absolutely-positioned pour
   fill le cercle visible (chat 36px ET apothéose plus grand). */
.f-pioneer {
  position:relative;
  background:radial-gradient(circle,#0a1a3e 0%,#0a0a1a 70%);
  border:2px solid #4dccff;
  box-shadow:0 0 18px rgba(77,170,255,.5),inset 0 0 10px rgba(170,221,255,.2);
  padding:0; border-radius:50%; overflow:hidden;
  box-sizing:border-box;
}
.f-pioneer > img,
.f-pioneer > svg,
.f-pioneer > div {
  position:absolute; inset:0;
  width:100% !important; height:100% !important;
  border-radius:50%; object-fit:cover; display:block;
}

/* SKIN bât. Monument tier 2 */
.skin-mon-t2 { filter:hue-rotate(15deg) brightness(1.15) drop-shadow(0 0 12px rgba(255,211,61,.5)); }