/* Cosmetics helpers (avatar/frame/badge/title + theme vars)
   Theme vars are injected by includes/header.php.
*/

:root{
  --ui-bg-0:#050610;
  --ui-bg-1:#070A12;
  --ui-stroke:rgba(255,255,255,.14);
  --ui-text:rgba(234,242,255,1);
  --ui-muted:rgba(234,242,255,.72);
  --ui-accent:#38bdf8;
  --ui-accent2:#f0abfc;
}

/* base (compact) */
.cos-user{display:flex;align-items:center;gap:10px;min-width:0}
.cos-avat{width:30px;height:30px;border-radius:999px;overflow:hidden;position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);box-shadow:0 0 0 1px rgba(0,0,0,.35) inset}
.cos-avat img{width:100%;height:100%;object-fit:cover;display:block}
.cos-frame{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);object-fit:contain;pointer-events:none;filter:drop-shadow(0 0 10px rgba(56,189,248,.25))}
.cos-badge{width:22px;height:22px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(240,171,252,.25))}
.cos-name{display:flex;flex-direction:column;gap:1px;min-width:0}
.cos-title{font-size:11px;line-height:1.1;font-weight:900;letter-spacing:.2px;color:var(--ui-accent);text-shadow:0 0 16px rgba(56,189,248,.25)}

/* ✅ bigger variants */
.cos-user--lg{gap:12px}
.cos-user--lg .cos-avat{width:44px;height:44px}
.cos-user--lg .cos-frame{inset:-9px;width:calc(100% + 18px);height:calc(100% + 18px)}
.cos-user--lg .cos-badge{width:30px;height:30px}
.cos-user--lg .cos-title{font-size:13px}
.cos-user--lg .nav-user,
.cos-user--lg .cos-name span{font-size:24px; line-height:1.05; font-weight:1000}

/* XL option (si tu veux vraiment très gros) */
.cos-user--xl{gap:14px}
.cos-user--xl .cos-avat{width:56px;height:56px}
.cos-user--xl .cos-frame{inset:-11px;width:calc(100% + 22px);height:calc(100% + 22px)}
.cos-user--xl .cos-badge{width:36px;height:36px}
.cos-user--xl .cos-title{font-size:14px}
.cos-user--xl .nav-user,
.cos-user--xl .cos-name span{font-size:28px; line-height:1.05; font-weight:1000}

/* Apply theme vars to document background if pages rely on body background */
body{
  background:
    radial-gradient(1200px 600px at 20% 10%, color-mix(in srgb, var(--ui-accent) 18%, transparent), transparent 60%),
    radial-gradient(900px 500px at 70% 0%, color-mix(in srgb, var(--ui-accent2) 14%, transparent), transparent 62%),
    linear-gradient(180deg, var(--ui-bg-0), var(--ui-bg-1) 40%, var(--ui-bg-0));
  color:var(--ui-text);
}

.v .cos-user{
  justify-content: flex-start;
  gap:10px;
}

.cos-grade{
  display:inline-flex;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  font-size:11px;
  letter-spacing:.2px;
}

/* ============================================================
   TITLES FX (MMO Premium)
   - add class on .cos-title: fx-glitch, fx-pulse, etc.
   - optional color: style="--tcolor:#EAF2FF"
   - optional rarity class on the same element: rar-epic, rar-legendary...
   ============================================================ */

.cos-title{
  /* color from meta (optional): style="--tcolor:#..." */
  --tcolor: var(--ui-accent);
  --tglow: color-mix(in srgb, var(--tcolor) 40%, transparent);
  --tshadow: 0 0 16px color-mix(in srgb, var(--tcolor) 30%, transparent);
  color: var(--tcolor);
  text-shadow: var(--tshadow);
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.4em;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Rarity helpers (si tu choisis de les ajouter dans le HTML) */
.cos-title.rar-common{
  --tshadow: 0 0 12px rgba(56,189,248,.18);
}
.cos-title.rar-rare{
  --tshadow: 0 0 14px color-mix(in srgb, var(--tcolor) 22%, transparent);
}
.cos-title.rar-epic{
  --tshadow:
    0 0 14px color-mix(in srgb, var(--tcolor) 24%, transparent),
    0 0 26px color-mix(in srgb, var(--tcolor) 18%, transparent);
}
.cos-title.rar-legendary{
  --tshadow:
    0 0 16px color-mix(in srgb, var(--tcolor) 26%, transparent),
    0 0 34px color-mix(in srgb, var(--tcolor) 18%, transparent);
}
.cos-title.rar-mythique{
  --tshadow:
    0 0 18px color-mix(in srgb, var(--tcolor) 28%, transparent),
    0 0 40px color-mix(in srgb, var(--tcolor) 20%, transparent);
}
.cos-title.rar-speciale{
  --tshadow:
    0 0 20px color-mix(in srgb, var(--tcolor) 30%, transparent),
    0 0 46px color-mix(in srgb, var(--tcolor) 22%, transparent);
}

/* Underline */
.cos-title.fx-underline{ padding-bottom:2px; }
.cos-title.fx-underline::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px;
  height:2px; border-radius:999px;
  background: linear-gradient(90deg, transparent, var(--tcolor), transparent);
  opacity:.9;
}

/* Spark (micro éclats) */
.cos-title.fx-spark::before{
  content:"";
  position:absolute; inset:-10px -14px;
  pointer-events:none;
  background:
    radial-gradient(6px 6px at 12% 45%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(4px 4px at 28% 12%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(5px 5px at 72% 18%, rgba(255,255,255,.50), transparent 60%),
    radial-gradient(4px 4px at 86% 58%, rgba(255,255,255,.42), transparent 60%);
  opacity:.55;
  filter: blur(.2px);
}

/* Steel (métal froid) */
.cos-title.fx-steel{
  color: color-mix(in srgb, var(--tcolor) 65%, #cbd5e1);
  text-shadow:
    0 1px 0 rgba(255,255,255,.20),
    0 0 18px rgba(148,163,184,.22);
}

/* Scan (balayage lumineux) */
.cos-title.fx-scan{ overflow:hidden; }
.cos-title.fx-scan::after{
  content:"";
  position:absolute; inset:-8px;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-140%);
  animation: cosTitleScan 3.2s linear infinite;
  mix-blend-mode: screen;
  opacity:.6;
}
@keyframes cosTitleScan{
  0%{ transform: translateX(-140%); }
  100%{ transform: translateX(140%); }
}

/* Glow / Neon / Electric (Epic vibe) */
.cos-title.fx-glow,
.cos-title.fx-neon,
.cos-title.fx-electric{
  text-shadow:
    0 0 10px color-mix(in srgb, var(--tcolor) 34%, transparent),
    0 0 26px color-mix(in srgb, var(--tcolor) 52%, transparent);
}
.cos-title.fx-electric{
  text-shadow:
    0 0 10px color-mix(in srgb, var(--tcolor) 34%, transparent),
    0 0 34px color-mix(in srgb, var(--tcolor) 60%, transparent);
}

/* Prism (dégradé “arc-en-ciel” premium) */
.cos-title.fx-prism{
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--tcolor) 70%, #22d3ee),
    color-mix(in srgb, var(--tcolor) 70%, #a78bfa),
    color-mix(in srgb, var(--tcolor) 70%, #f472b6)
  );
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  text-shadow: 0 0 18px rgba(255,255,255,.08);
}

/* Void (sombre + aura) */
.cos-title.fx-void{
  color: color-mix(in srgb, var(--tcolor) 60%, #c4b5fd);
  text-shadow:
    0 0 12px rgba(167,139,250,.24),
    0 0 28px rgba(244,114,182,.18);
}

/* Golden (légendaire) */
.cos-title.fx-golden{
  background: linear-gradient(90deg, #ffe8b0, #d4af37, #fff2c7);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  text-shadow: 0 0 22px rgba(212,175,55,.28);
}

/* Shimmer (légendaire animé) */
.cos-title.fx-shimmer{
  background: linear-gradient(90deg,
    rgba(255,255,255,.35),
    var(--tcolor),
    rgba(255,255,255,.35)
  );
  background-size: 240% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  animation: cosTitleShimmer 4.6s ease-in-out infinite;
}
@keyframes cosTitleShimmer{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* Gem / Onyx / Luster */
.cos-title.fx-gem{
  background: linear-gradient(90deg, #cfe6ff, #3b82f6, #22d3ee, #cfe6ff);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  text-shadow: 0 0 24px rgba(34,211,238,.18);
}
.cos-title.fx-onyx{
  color: #e9e9ff;
  text-shadow:
    0 0 10px rgba(255,255,255,.08),
    0 0 26px rgba(148,163,184,.18);
}
.cos-title.fx-luster{
  background: linear-gradient(90deg, #f3f6ff, #e5e7eb, #60a5fa, #f3f6ff);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  text-shadow: 0 0 22px rgba(96,165,250,.16);
}

/* Mythique pack */
.cos-title.fx-astral{
  background: linear-gradient(90deg, #e6f4ff, #a78bfa, #f472b6, #e6f4ff);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  text-shadow: 0 0 30px rgba(167,139,250,.22);
}
.cos-title.fx-rift{
  text-shadow:
    0 0 12px rgba(244,114,182,.22),
    0 0 34px rgba(167,139,250,.22);
  animation: cosTitlePulse 2.8s ease-in-out infinite;
}
.cos-title.fx-eclipse{
  color: #f5f3ff;
  text-shadow:
    0 0 10px rgba(255,255,255,.10),
    0 0 30px rgba(167,139,250,.18);
}
.cos-title.fx-celestial{
  background: linear-gradient(90deg, #e6f4ff, #ffffff, #cfe6ff);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  text-shadow: 0 0 26px rgba(255,255,255,.12);
}
.cos-title.fx-plasma{
  background: linear-gradient(90deg, #f472b6, #22d3ee, #a78bfa, #f472b6);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  text-shadow: 0 0 30px rgba(244,114,182,.18);
}
@keyframes cosTitlePulse{
  0%,100%{ filter: brightness(1); }
  50%{ filter: brightness(1.18); }
}

/* ===== EXISTING / COMMON FX (compat) =====
   glitch + pulse (tu as déjà glitch/pulse en base)
*/
.cos-title.fx-pulse{
  animation: cosTitlePulseSoft 1.65s ease-in-out infinite;
}
@keyframes cosTitlePulseSoft{
  0%,100%{ filter: brightness(1); }
  50%{ filter: brightness(1.22); }
}

/* Glitch: version CSS-only safe (no layout break) */
.cos-title.fx-glitch{
  text-shadow:
    0 0 14px color-mix(in srgb, var(--tcolor) 26%, transparent),
    1px 0 0 rgba(255,80,160,.25),
    -1px 0 0 rgba(34,211,238,.18);
}
.cos-title.fx-glitch::before,
.cos-title.fx-glitch::after{
  content: attr(data-title);
  position:absolute;
  left:0; top:0;
  width:100%;
  overflow:hidden;
  pointer-events:none;
  opacity:.55;
}
.cos-title.fx-glitch::before{
  transform: translateX(1px);
  clip-path: inset(0 0 52% 0);
  color: rgba(255,80,160,.55);
  animation: cosGlitch1 2.2s infinite linear;
}
.cos-title.fx-glitch::after{
  transform: translateX(-1px);
  clip-path: inset(48% 0 0 0);
  color: rgba(34,211,238,.55);
  animation: cosGlitch2 1.9s infinite linear;
}
@keyframes cosGlitch1{
  0%,100%{ transform: translateX(1px); }
  20%{ transform: translateX(2px); }
  40%{ transform: translateX(0px); }
  60%{ transform: translateX(3px); }
  80%{ transform: translateX(1px); }
}
@keyframes cosGlitch2{
  0%,100%{ transform: translateX(-1px); }
  25%{ transform: translateX(-3px); }
  50%{ transform: translateX(-1px); }
  75%{ transform: translateX(-4px); }
}

/* IMPORTANT:
   Pour que le glitch duplique exactement le texte via attr(),
   tu peux poser data-title="Glitch Rider" sur l’élément.
   Sinon il reste joli sans duplication (fallback ok).
*/

/* Specials (hook classes) */
.cos-title.fx-noel{ text-shadow: 0 0 20px rgba(80,220,140,.22), 0 0 30px rgba(220,60,60,.18); }
.cos-title.fx-foot{ text-shadow: 0 0 18px rgba(80,255,150,.18), 0 0 10px rgba(255,255,255,.10); }
.cos-title.fx-halloween{ text-shadow: 0 0 22px rgba(255,140,60,.20), 0 0 34px rgba(255,210,140,.14); }
.cos-title.fx-valentin{ text-shadow: 0 0 22px rgba(255,90,160,.22), 0 0 32px rgba(255,180,220,.16); }
.cos-title.fx-matrix{ text-shadow: 0 0 18px rgba(40,255,150,.18), 0 0 28px rgba(10,80,40,.16); }
.cos-title.fx-anniversaire{ text-shadow: 0 0 20px rgba(245,110,180,.18), 0 0 26px rgba(255,210,120,.14); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .cos-title.fx-scan::after{ animation:none !important; }
  .cos-title.fx-rift{ animation:none !important; }
  .cos-title.fx-shimmer{ animation:none !important; }
  .cos-title.fx-pulse{ animation:none !important; }
  .cos-title.fx-glitch::before,
  .cos-title.fx-glitch::after{ animation:none !important; opacity:.25 !important; }
}

/* === FIX CADRE D'AVATAR : centrage + pas de clipping === */
.cos-avat{
  position: relative;
  overflow: visible !important;   /* IMPORTANT: ne pas couper le cadre */
}

.cos-avat > img{
  display:block;
}

/* l'avatar (le 1er img) */
.cos-avat > img:not(.cos-frame){
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* le cadre */
.cos-avat .cos-frame{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 160%;                   /* le cadre dépasse autour */
  height: 160%;
  object-fit: contain;
  pointer-events: none;
  max-width: none !important;
  max-height: none !important;
}