/* ════════════════════════════════════════════════════════════════
   ZenithStream — Ranking / XP / Logros — Efectos Discord-style
   ════════════════════════════════════════════════════════════════ */

/* ─── RAREZA — colores base ─────────────────────────────────────*/
.rarity-common    { --rc: #94a3b8; --rg: rgba(148,163,184,.35); }
.rarity-uncommon  { --rc: #4ade80; --rg: rgba(74,222,128,.4);   }
.rarity-rare      { --rc: #60a5fa; --rg: rgba(96,165,250,.45);  }
.rarity-epic      { --rc: #c084fc; --rg: rgba(192,132,252,.5);  }
.rarity-legendary { --rc: #fbbf24; --rg: rgba(251,191,36,.6);   }

.rarity-common-text    { color: #94a3b8; }
.rarity-uncommon-text  { color: #4ade80; }
.rarity-rare-text      { color: #60a5fa; }
.rarity-epic-text      { color: #c084fc; }
.rarity-legendary-text { color: #fbbf24; }

/* ─── BADGE DE RAREZA ───────────────────────────────────────────*/
.rarity-badge {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid;
}
.rarity-badge.rarity-common    { background: rgba(148,163,184,.15); color: #94a3b8; border-color: rgba(148,163,184,.3); }
.rarity-badge.rarity-uncommon  { background: rgba(74,222,128,.15);  color: #4ade80; border-color: rgba(74,222,128,.35); }
.rarity-badge.rarity-rare      { background: rgba(96,165,250,.15);  color: #60a5fa; border-color: rgba(96,165,250,.4); }
.rarity-badge.rarity-epic      { background: rgba(192,132,252,.15); color: #c084fc; border-color: rgba(192,132,252,.45); }
.rarity-badge.rarity-legendary {
    background: linear-gradient(135deg, rgba(251,191,36,.25), rgba(245,158,11,.15));
    color: #fbbf24;
    border-color: rgba(251,191,36,.5);
    box-shadow: 0 0 10px rgba(251,191,36,.25), inset 0 0 8px rgba(251,191,36,.1);
}

/* ─── BARRA DE XP ───────────────────────────────────────────────*/
.zenith-xp-bar {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,.06);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.zprog-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--progress-color, #60a5fa);
    box-shadow: 0 0 8px var(--progress-glow, rgba(96,165,250,.5));
    transition: width .6s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
}
.zprog-fill::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    animation: zprog-shine 2.5s infinite;
}
@keyframes zprog-shine {
    0%   { left: -60%; }
    100% { left: 160%; }
}

/* ─── AVATAR EFFECTS ────────────────────────────────────────────*/
.ranking-avatar {
    transition: transform .3s, box-shadow .3s;
}
.ranking-avatar:hover {
    transform: scale(1.08);
    box-shadow: 0 0 16px var(--avatar-glow, rgba(148,163,184,.4));
}
.avatar-epic-anim {
    animation: epic-pulse 2.5s ease-in-out infinite;
}
@keyframes epic-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(192,132,252,.4); }
    50%       { box-shadow: 0 0 18px rgba(192,132,252,.7); }
}
.avatar-legendary-anim {
    animation: legendary-aura 2s ease-in-out infinite;
}
@keyframes legendary-aura {
    0%, 100% { box-shadow: 0 0 8px rgba(251,191,36,.5), 0 0 24px rgba(251,191,36,.15); }
    50%       { box-shadow: 0 0 20px rgba(251,191,36,.8), 0 0 40px rgba(251,191,36,.3); }
}

/* ─── NIVEL-UP TOAST ────────────────────────────────────────────*/
.zenith-level-toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-30px);
    z-index: 99998;
    animation: zlvl-enter .5s cubic-bezier(.34,1.56,.64,1) forwards;
    pointer-events: none;
}
@keyframes zlvl-enter {
    from { opacity: 0; transform: translateX(-50%) translateY(-40px) scale(.8); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1);  }
}
.zenith-level-toast.zlvl-exit {
    animation: zlvl-exit .7s ease forwards;
}
@keyframes zlvl-exit {
    to { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(.95); }
}
.zlvl-inner {
    background: rgba(15,23,42,.95);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 16px 24px;
    min-width: 260px;
    text-align: center;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
}
.zlvl-inner[data-rarity="common"]    { border-color: rgba(148,163,184,.4); box-shadow: 0 0 30px rgba(148,163,184,.15); }
.zlvl-inner[data-rarity="uncommon"]  { border-color: rgba(74,222,128,.5);  box-shadow: 0 0 30px rgba(74,222,128,.2); }
.zlvl-inner[data-rarity="rare"]      { border-color: rgba(96,165,250,.5);  box-shadow: 0 0 30px rgba(96,165,250,.25); }
.zlvl-inner[data-rarity="epic"]      { border-color: rgba(192,132,252,.6); box-shadow: 0 0 40px rgba(192,132,252,.3); }
.zlvl-inner[data-rarity="legendary"] { border-color: rgba(251,191,36,.7);  box-shadow: 0 0 50px rgba(251,191,36,.4), 0 0 100px rgba(251,191,36,.1); }
.zlvl-shimmer {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.04) 50%, transparent 70%);
    animation: shimmer-move 3s infinite;
}
@keyframes shimmer-move {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(200%);  }
}
.zlvl-header   { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 4px; }
.zlvl-subtitle { font-size: 11px; color: #94a3b8; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.zlvl-level    { font-size: 28px; font-weight: 900; color: #fff; line-height: 1.1; }
.zlvl-title-text { font-size: 14px; font-weight: 700; color: #e2e8f0; margin-top: 2px; }
.zlvl-rarity   { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-top: 6px; opacity: .7; }

.zlvl-inner[data-rarity="common"]    .zlvl-level { color: #94a3b8; }
.zlvl-inner[data-rarity="uncommon"]  .zlvl-level { color: #4ade80; }
.zlvl-inner[data-rarity="rare"]      .zlvl-level { color: #60a5fa; }
.zlvl-inner[data-rarity="epic"]      .zlvl-level { color: #c084fc; text-shadow: 0 0 20px rgba(192,132,252,.6); }
.zlvl-inner[data-rarity="legendary"] .zlvl-level { color: #fbbf24; text-shadow: 0 0 30px rgba(251,191,36,.8); animation: legendary-text-pulse 1.5s ease-in-out infinite; }
@keyframes legendary-text-pulse {
    0%,100% { text-shadow: 0 0 20px rgba(251,191,36,.7); }
    50%     { text-shadow: 0 0 40px rgba(251,191,36,1), 0 0 80px rgba(251,191,36,.3); }
}

/* ─── ACHIEVEMENT TOAST ─────────────────────────────────────────*/
.zenith-achievement-toast {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 99997;
    animation: zach-enter .5s cubic-bezier(.34,1.56,.64,1) forwards;
    pointer-events: none;
}
@keyframes zach-enter {
    from { opacity: 0; transform: translateX(30px) scale(.9); }
    to   { opacity: 1; transform: translateX(0)    scale(1);  }
}
.zenith-achievement-toast.zach-exit {
    animation: zach-exit .6s ease forwards;
}
@keyframes zach-exit {
    to { opacity: 0; transform: translateX(30px) scale(.95); }
}
.zach-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(15,23,42,.95);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    padding: 12px 16px;
    min-width: 280px;
    max-width: 340px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(16px);
}
.zach-inner[data-rarity="common"]    { border-color: rgba(148,163,184,.4); }
.zach-inner[data-rarity="uncommon"]  { border-color: rgba(74,222,128,.4);  }
.zach-inner[data-rarity="rare"]      { border-color: rgba(96,165,250,.5);  box-shadow: 0 0 20px rgba(96,165,250,.15); }
.zach-inner[data-rarity="epic"]      { border-color: rgba(192,132,252,.55); box-shadow: 0 0 25px rgba(192,132,252,.2); }
.zach-inner[data-rarity="legendary"] { border-color: rgba(251,191,36,.65); box-shadow: 0 0 35px rgba(251,191,36,.3); }
.zach-shimmer {
    position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.05) 50%, transparent 60%);
    animation: shimmer-move 2.5s infinite;
}
.zach-icon-wrap {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.zach-body    { flex: 1; min-width: 0; }
.zach-label   { font-size: 9px; color: #64748b; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.zach-name    { font-size: 13px; font-weight: 800; color: #fff; line-height: 1.2; }
.zach-desc    { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.zach-rarity  { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.zach-inner[data-rarity="common"]    .zach-rarity { color: #94a3b8; }
.zach-inner[data-rarity="uncommon"]  .zach-rarity { color: #4ade80; }
.zach-inner[data-rarity="rare"]      .zach-rarity { color: #60a5fa; }
.zach-inner[data-rarity="epic"]      .zach-rarity { color: #c084fc; }
.zach-inner[data-rarity="legendary"] .zach-rarity { color: #fbbf24; }

/* ─── RANKING PAGE ──────────────────────────────────────────────*/
.ranking-row {
    transition: background .2s, transform .2s;
}
.ranking-row:hover {
    background: rgba(255,255,255,.03);
    transform: translateX(3px);
}
.ranking-row[data-rarity="legendary"] {
    background: linear-gradient(90deg, rgba(251,191,36,.05) 0%, transparent 80%);
}
.ranking-row[data-rarity="legendary"]:hover {
    background: linear-gradient(90deg, rgba(251,191,36,.1) 0%, transparent 80%);
}
.ranking-row[data-rarity="epic"] {
    background: linear-gradient(90deg, rgba(192,132,252,.04) 0%, transparent 80%);
}
.ranking-number-badge {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900;
    font-size: 13px;
    background: rgba(255,255,255,.05);
    color: #64748b;
}
.ranking-number-badge.pos-1 { background: rgba(251,191,36,.2); color: #fbbf24; font-size: 18px; }
.ranking-number-badge.pos-2 { background: rgba(148,163,184,.2); color: #cbd5e1; font-size: 18px; }
.ranking-number-badge.pos-3 { background: rgba(180,120,60,.2); color: #d97706; font-size: 18px; }

/* ─── TITLE CARD (para el perfil) ──────────────────────────────*/
.zenith-title-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 20px;
    background: rgba(15,23,42,.8);
    border: 1px solid rgba(255,255,255,.08);
}
.zenith-title-card[data-rarity="legendary"] {
    border-color: rgba(251,191,36,.5);
    background: linear-gradient(135deg, rgba(251,191,36,.06) 0%, rgba(15,23,42,.9) 100%);
    box-shadow: 0 0 40px rgba(251,191,36,.12), inset 0 0 40px rgba(251,191,36,.04);
    animation: title-legendary-border 3s ease-in-out infinite;
}
@keyframes title-legendary-border {
    0%,100% { border-color: rgba(251,191,36,.45); box-shadow: 0 0 30px rgba(251,191,36,.1); }
    50%     { border-color: rgba(251,191,36,.7);  box-shadow: 0 0 60px rgba(251,191,36,.25), inset 0 0 30px rgba(251,191,36,.06); }
}
.zenith-title-card[data-rarity="epic"] {
    border-color: rgba(192,132,252,.45);
    background: linear-gradient(135deg, rgba(192,132,252,.06) 0%, rgba(15,23,42,.9) 100%);
    box-shadow: 0 0 30px rgba(192,132,252,.1);
}
.zenith-title-card[data-rarity="rare"] {
    border-color: rgba(96,165,250,.4);
    box-shadow: 0 0 20px rgba(96,165,250,.08);
}

/* ─── LOGROS GRID ───────────────────────────────────────────────*/
.achievement-card {
    border-radius: 12px;
    padding: 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    transition: transform .2s, box-shadow .2s;
    position: relative;
    overflow: hidden;
}
.achievement-card:hover {
    transform: translateY(-2px);
}
.achievement-card.locked {
    opacity: .4;
    filter: grayscale(.8);
}
.achievement-card[data-rarity="legendary"]:not(.locked) {
    border-color: rgba(251,191,36,.4);
    box-shadow: 0 0 16px rgba(251,191,36,.15);
    animation: ach-legendary 3s ease-in-out infinite;
}
@keyframes ach-legendary {
    0%,100% { box-shadow: 0 0 12px rgba(251,191,36,.1); }
    50%     { box-shadow: 0 0 24px rgba(251,191,36,.25); }
}
.achievement-card[data-rarity="epic"]:not(.locked) {
    border-color: rgba(192,132,252,.35);
    box-shadow: 0 0 12px rgba(192,132,252,.12);
}
.achievement-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    background: rgba(255,255,255,.06);
    margin-bottom: 8px;
}

/* ─── AVATAR RING — Discord-style border effects per rarity ────*/
.zc-avatar-ring {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    padding: 2px;
    flex-shrink: 0;
}
.zc-avatar-ring img {
    display: block;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    object-fit: cover;
    position: relative;
    z-index: 1;
}
/* Common — subtle static border */
.zc-avatar-ring.ring-common {
    background: linear-gradient(135deg, #64748b, #475569);
}
/* Uncommon — green soft pulse */
.zc-avatar-ring.ring-uncommon {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    animation: ring-uncommon-pulse 3s ease-in-out infinite;
}
@keyframes ring-uncommon-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
    50%     { box-shadow: 0 0 8px 2px rgba(34,197,94,.4); }
}
/* Rare — blue spinning gradient */
.zc-avatar-ring.ring-rare {
    background: conic-gradient(#3b82f6, #60a5fa, #93c5fd, #3b82f6);
    animation: ring-spin 4s linear infinite;
}
@keyframes ring-spin {
    to { --ring-angle: 360deg; }
}
.zc-avatar-ring.ring-rare {
    animation: ring-rare-rotate 4s linear infinite;
}
@keyframes ring-rare-rotate {
    to { filter: hue-rotate(30deg); }
}
.zc-avatar-ring.ring-rare::before {
    content: '';
    position: absolute; inset: -1px;
    border-radius: 50%;
    background: conic-gradient(#3b82f6, #60a5fa, #93c5fd, #3b82f6);
    animation: ring-rotate 3s linear infinite;
    z-index: 0;
}
@keyframes ring-rotate {
    to { transform: rotate(360deg); }
}
.zc-avatar-ring.ring-rare img {
    position: relative;
    z-index: 2;
}
/* Epic — purple pulsing glow + shimmer */
.zc-avatar-ring.ring-epic {
    background: linear-gradient(135deg, #a855f7, #7c3aed, #c084fc);
    animation: ring-epic-glow 2.5s ease-in-out infinite;
}
@keyframes ring-epic-glow {
    0%,100% { box-shadow: 0 0 6px 1px rgba(168,85,247,.4); }
    50%     { box-shadow: 0 0 16px 4px rgba(168,85,247,.7), 0 0 30px 8px rgba(168,85,247,.2); }
}
.zc-avatar-ring.ring-epic::after {
    content: '';
    position: absolute; inset: -2px;
    border-radius: 50%;
    background: conic-gradient(transparent 60%, rgba(192,132,252,.6) 80%, transparent 100%);
    animation: ring-rotate 2s linear infinite;
    z-index: 0;
}
.zc-avatar-ring.ring-epic img { z-index: 2; position: relative; }
/* Legendary — gold animated aura + spinning ring + particles */
.zc-avatar-ring.ring-legendary {
    background: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b);
    animation: ring-legendary-aura 2s ease-in-out infinite;
}
@keyframes ring-legendary-aura {
    0%,100% { box-shadow: 0 0 8px 2px rgba(245,158,11,.5), 0 0 20px 6px rgba(251,191,36,.15); }
    50%     { box-shadow: 0 0 16px 4px rgba(245,158,11,.8), 0 0 40px 12px rgba(251,191,36,.3), 0 0 60px 20px rgba(251,191,36,.1); }
}
.zc-avatar-ring.ring-legendary::before {
    content: '';
    position: absolute; inset: -3px;
    border-radius: 50%;
    background: conic-gradient(#fbbf24, #f59e0b, #d97706, #fbbf24, #f59e0b, #fbbf24);
    animation: ring-rotate 2.5s linear infinite;
    z-index: 0;
}
.zc-avatar-ring.ring-legendary::after {
    content: '';
    position: absolute; inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(251,191,36,.3);
    animation: ring-legendary-outer 3s ease-in-out infinite;
    z-index: 0;
}
@keyframes ring-legendary-outer {
    0%,100% { transform: scale(1);   opacity: .3; }
    50%     { transform: scale(1.15); opacity: .6; }
}
.zc-avatar-ring.ring-legendary img { z-index: 2; position: relative; }

/* ─── RANK TITLE in comments — effects per rarity ─────────────*/
.zc-rank-title {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 1px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    position: relative;
    overflow: hidden;
}

/* Common — plain muted */
.zc-rank-title.rt-common {
    color: #94a3b8;
    background: rgba(148,163,184,.08);
}

/* Uncommon — green with soft glow */
.zc-rank-title.rt-uncommon {
    color: #4ade80;
    background: rgba(74,222,128,.1);
    border: 1px solid rgba(74,222,128,.15);
    animation: rt-uncommon-glow 3s ease-in-out infinite;
}
@keyframes rt-uncommon-glow {
    0%,100% { box-shadow: none; }
    50%     { box-shadow: 0 0 6px rgba(74,222,128,.25); }
}

/* Rare — blue with shimmer sweep */
.zc-rank-title.rt-rare {
    color: #60a5fa;
    background: rgba(96,165,250,.1);
    border: 1px solid rgba(96,165,250,.2);
    box-shadow: 0 0 4px rgba(96,165,250,.15);
}
.zc-rank-title.rt-rare::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(96,165,250,.2), transparent);
    animation: rt-shimmer 3s infinite;
}
@keyframes rt-shimmer {
    0%   { left: -60%; }
    100% { left: 160%; }
}

/* Epic — purple with pulsing border + shimmer */
.zc-rank-title.rt-epic {
    color: #c084fc;
    background: linear-gradient(135deg, rgba(192,132,252,.12), rgba(168,85,247,.08));
    border: 1px solid rgba(192,132,252,.3);
    animation: rt-epic-pulse 2.5s ease-in-out infinite;
}
@keyframes rt-epic-pulse {
    0%,100% { box-shadow: 0 0 4px rgba(192,132,252,.2); border-color: rgba(192,132,252,.25); }
    50%     { box-shadow: 0 0 12px rgba(192,132,252,.4); border-color: rgba(192,132,252,.5); }
}
.zc-rank-title.rt-epic::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(192,132,252,.25), transparent);
    animation: rt-shimmer 2.5s infinite;
}

/* Legendary — gold animated gradient text + glow + sparkle */
.zc-rank-title.rt-legendary {
    background: linear-gradient(135deg, rgba(251,191,36,.15), rgba(245,158,11,.08), rgba(251,191,36,.12));
    border: 1px solid rgba(251,191,36,.4);
    animation: rt-legendary-border 2s ease-in-out infinite;
    /* Animated gradient text */
    background-clip: initial;
    -webkit-background-clip: initial;
}
.zc-rank-title.rt-legendary .rt-text {
    background: linear-gradient(90deg, #fbbf24, #fde68a, #f59e0b, #fbbf24);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rt-legendary-text 3s linear infinite;
    font-weight: 800;
}
@keyframes rt-legendary-text {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}
@keyframes rt-legendary-border {
    0%,100% { border-color: rgba(251,191,36,.35); box-shadow: 0 0 6px rgba(251,191,36,.2); }
    50%     { border-color: rgba(251,191,36,.7);  box-shadow: 0 0 16px rgba(251,191,36,.4), 0 0 30px rgba(251,191,36,.1); }
}
.zc-rank-title.rt-legendary::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(251,191,36,.3), transparent);
    animation: rt-shimmer 2s infinite;
}
.zc-rank-title.rt-legendary::after {
    content: '✦';
    position: static;
    font-size: 7px;
    animation: rt-sparkle 1.5s ease-in-out infinite;
    display: inline-block;
}
@keyframes rt-sparkle {
    0%,100% { opacity: .4; transform: scale(.8); }
    50%     { opacity: 1;  transform: scale(1.2); }
}

/* ─── XP MINI BADGE in comments ────────────────────────────────*/
.zc-xp-badge {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255,255,255,.05);
    color: #64748b;
    border: 1px solid rgba(255,255,255,.06);
}

/* ─── CANVAS PARTÍCULAS ─────────────────────────────────────────*/
#zenith-particles-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99999;
}