/* ============================================================
   FORJAREX — Sistema de diseño (v2)
   Plataforma de integridad competitiva. Serio, técnico, sin saturación.
   Se enlaza en TODAS las páginas: <link rel="stylesheet" href="/forjarex.css">
   Redefine tokens y componentes compartidos para unificar el sitio.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* superficies */
  --bg:#080a10;
  --bg-2:#0a0d15;
  --panel:#0f131d;
  --panel-2:#141926;
  --panel-3:#1a2030;
  --border:#1d2432;
  --border-2:#283142;
  /* texto */
  --text:#e9edf4;
  --text-2:#aab4c5;
  --gray:#7b8699;
  --gray-2:#515d73;
  /* marca */
  --accent:#3d7bff;
  --accent-2:#22d3ee;
  --accent-ink:#04101f;
  --green:#19d07a;
  --red:#ff4d64;
  --yellow:#ffbf3f;
  /* efectos */
  --ring:0 0 0 1px rgba(61,123,255,.35);
  --shadow:0 18px 48px -20px rgba(0,0,0,.75);
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --display:'Space Grotesk','Inter',sans-serif;
  --radius:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif !important;
  background:
    radial-gradient(900px 480px at 85% -8%,rgba(34,211,238,.05),transparent 60%),
    radial-gradient(780px 460px at 8% -4%,rgba(61,123,255,.07),transparent 55%),
    var(--bg) !important;
  color:var(--text) !important;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.1px;
}
a{color:inherit;text-decoration:none}
::selection{background:rgba(61,123,255,.3)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:#1f2838;border-radius:20px;border:3px solid var(--bg-2)}
::-webkit-scrollbar-thumb:hover{background:#2a3647}

h1,h2,h3,.logo{font-family:var(--display);letter-spacing:-.4px}

/* ---------- NAV ---------- */
nav{
  position:sticky;top:0;z-index:100;
  background:rgba(8,10,16,.94) !important;
  border-bottom:1px solid var(--border) !important;
  padding:16px 44px !important;display:flex;justify-content:space-between;align-items:center;
}
.logo{font-weight:700 !important;letter-spacing:.14em !important;font-size:1.02rem !important;color:#fff !important;display:flex;align-items:center;gap:9px}
.logo span{color:var(--accent-2) !important}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:.8rem !important;color:var(--gray) !important;letter-spacing:.08em !important;text-transform:uppercase;font-weight:600;transition:color .18s}
.nav-links a:hover{color:#fff !important}
.nav-actions{display:flex;gap:10px;align-items:center}

/* ---------- BOTONES ---------- */
.btn{
  padding:10px 20px !important;border-radius:10px !important;font-size:.84rem !important;font-weight:600 !important;
  transition:transform .16s,box-shadow .16s,background .16s,border-color .16s,color .16s !important;
  display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;cursor:pointer;line-height:1;white-space:nowrap;
}
.btn-primary{background:linear-gradient(180deg,#4d87ff,#2f6bf0) !important;color:#fff !important;box-shadow:0 8px 22px -10px rgba(61,123,255,.8),inset 0 1px 0 rgba(255,255,255,.18) !important}
.btn-primary:hover{transform:translateY(-1px) !important;box-shadow:0 12px 28px -8px rgba(61,123,255,.85) !important}
.btn-ghost{background:rgba(255,255,255,.015) !important;border:1px solid var(--border-2) !important;color:var(--text-2) !important}
.btn-ghost:hover{border-color:var(--accent) !important;color:#fff !important;background:rgba(61,123,255,.06) !important;transform:none !important;box-shadow:none !important}
.btn-danger{background:linear-gradient(180deg,#ff5e73,#e63b55) !important;color:#fff !important}
.btn-success{background:linear-gradient(180deg,#1fd886,#13b56c) !important;color:#04120b !important}
.btn-warning{background:linear-gradient(180deg,#ffc94d,#f0a81f) !important;color:#1e1400 !important}

/* ---------- CONTENEDORES / SECCIONES ---------- */
.section h2,.header h1,.page-head h1{font-family:var(--display)}
.section h2 span,.header h1 span{color:var(--accent-2) !important;-webkit-text-fill-color:currentColor;background:none !important}

/* ---------- CARDS / PANELES ---------- */
.panel,.card,.stat-card,.dash-card,.admin-section,.notif-list,.forum-list,.threads,.bans-list,
.tourney,.team-card,.server-card,.profile-header,.server-header,.team-header,.tourney-header,
.timeline-content,.forum-cat,.ann-card,.comment-form,.reply-form,.post,.reply,.sec-q,.list-item,
.dash-grid .dash-card,.modal,.edit-box,.modal-box{
  background:var(--panel) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius) !important;
}
.stat-card,.dash-card,.tourney,.team-card,.server-card,.forum-cat,.ann-card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2)) !important;
  transition:transform .2s,border-color .2s,box-shadow .2s !important;
}
.stat-card:hover,.dash-card:hover,.tourney:hover,.team-card:hover,.server-card:hover,.forum-cat:hover,.ann-card:hover{
  transform:translateY(-3px) !important;border-color:var(--border-2) !important;
  box-shadow:0 16px 40px -24px rgba(0,0,0,.9) !important;
}
.stat-card .num,.dash-card .value,.profile-stat .val,.kpi .k-num{font-family:var(--mono) !important}
.stat-card .num{color:var(--accent-2) !important}

/* ---------- TABLAS ---------- */
table,.admin-table{border-collapse:collapse;width:100%}
th,.admin-table th{
  background:var(--panel-2) !important;color:var(--gray-2) !important;
  text-transform:uppercase;font-size:.68rem !important;letter-spacing:.09em !important;font-weight:700 !important;
  padding:12px 16px !important;border-bottom:1px solid var(--border) !important;text-align:left;
}
td,.admin-table td{padding:13px 16px !important;border-bottom:1px solid var(--border) !important;font-size:.86rem !important}
tbody tr{transition:background .15s}
tbody tr:hover{background:rgba(61,123,255,.035)}
.hwid-cell{font-family:var(--mono) !important;color:var(--gray) !important}

/* ---------- FORMULARIOS ---------- */
input,textarea,select,.field input,.field select,.field textarea,.edit-box input,.edit-box textarea,.modal-box input{
  background:var(--panel-2) !important;border:1px solid var(--border-2) !important;border-radius:10px !important;
  color:var(--text) !important;font-family:inherit !important;outline:none !important;transition:border-color .16s,box-shadow .16s !important;
}
input:focus,textarea:focus,select:focus{border-color:var(--accent) !important;box-shadow:var(--ring) !important}
label,.field label{color:var(--gray) !important;letter-spacing:.06em}

/* ---------- MODALES ---------- */
.modal-overlay,.edit-modal,.modal{backdrop-filter:blur(10px)}
.modal-overlay,.edit-modal{background:rgba(5,7,12,.74) !important}

/* ---------- MENSAJES / ESTADOS ---------- */
.msg.success{background:rgba(25,208,122,.1) !important;border:1px solid rgba(25,208,122,.4) !important;color:var(--green) !important;border-radius:10px}
.msg.error{background:rgba(255,77,100,.1) !important;border:1px solid rgba(255,77,100,.4) !important;color:var(--red) !important;border-radius:10px}
.empty-state{color:var(--gray) !important}

/* ---------- BADGES DE ROL ---------- */
.badge-role,.role-badge{font-weight:700 !important;text-transform:uppercase;letter-spacing:.04em;border-radius:7px !important}
.badge-role.role-player,.role-player{background:rgba(61,123,255,.14) !important;color:#6fa0ff !important;border:1px solid rgba(61,123,255,.4) !important}
.badge-role.role-admin,.role-admin{background:rgba(25,208,122,.14) !important;color:#2fe08f !important;border:1px solid rgba(25,208,122,.4) !important}
.badge-role.role-owner,.role-owner{background:rgba(255,77,100,.14) !important;color:#ff7085 !important;border:1px solid rgba(255,77,100,.4) !important}

/* ---------- TABS (dashboard) ---------- */
.tab.active{background:var(--accent) !important;color:#fff !important}
.tab{color:var(--gray) !important}
.filter.active{background:var(--accent) !important;border-color:var(--accent) !important;color:#fff !important}

/* ---------- utilidades reutilizables (páginas nuevas) ---------- */
.fx-tag{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:600;letter-spacing:.04em;
  padding:5px 12px;border-radius:30px;border:1px solid var(--border-2);color:var(--text-2);background:var(--panel)}
.fx-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.fx-tag .dot.amber{background:var(--yellow);box-shadow:0 0 8px var(--yellow)}
.fx-live{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  padding:6px 13px;border-radius:30px;border:1px solid rgba(25,208,122,.4);color:var(--green);background:rgba(25,208,122,.07)}
.fx-live .d{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:fxpulse 1.5s infinite}
@keyframes fxpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.fx-grad{background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
svg.ico{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.12em}

/* ============================================================
   COSMETICOS DE LA TIENDA (ForjCoins)
   Las clases son cx-<id del objeto>. Se aplican al avatar (marcos)
   y al nombre (degradados y efectos). Se ven en foro y perfil.
   ============================================================ */
.cx-name{display:inline-block}
.cx-title{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:2px 8px;border-radius:6px;
  color:#ffd76a;background:linear-gradient(90deg,rgba(255,191,63,.16),rgba(255,191,63,.04));border:1px solid rgba(255,191,63,.35);vertical-align:middle;line-height:1.5}
.cx-title-block{display:table;margin-top:6px}
.coin{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-weight:700;color:#ffd76a}
.coin::before{content:"";width:.95em;height:.95em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b0,#ffbf3f 45%,#b07800);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}

/* --- Marcos de avatar (box-shadow: no lo recorta el overflow del avatar) --- */
.cx-frame-neon-blue{box-shadow:0 0 0 2px #22d3ee,0 0 12px #22d3ee,0 0 26px rgba(34,211,238,.45) !important;animation:cxFlicker 4s infinite}
.cx-frame-neon-pink{box-shadow:0 0 0 2px #ff3df0,0 0 12px #ff3df0,0 0 26px rgba(255,61,240,.45) !important;animation:cxFlicker 4.6s infinite}
.cx-frame-ice{box-shadow:0 0 0 2px #d6f6ff,0 0 0 4px rgba(127,216,255,.35),0 0 18px #7fd8ff !important;animation:cxIce 3s ease-in-out infinite}
.cx-frame-gold{box-shadow:0 0 0 2px #ffd76a,0 0 0 4px #8a5a00,0 0 18px rgba(255,191,63,.55) !important;animation:cxGold 2.6s ease-in-out infinite}
.cx-frame-fire{animation:cxFire 1.1s ease-in-out infinite alternate}
.cx-frame-aura{animation:cxAura 3s linear infinite}
@keyframes cxFlicker{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.55}94%{opacity:1}96%{opacity:.7}97%{opacity:1}}
@keyframes cxIce{50%{box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(127,216,255,.6),0 0 28px #9fe4ff}}
@keyframes cxGold{50%{box-shadow:0 0 0 2px #fff0b3,0 0 0 4px #b37800,0 0 28px rgba(255,191,63,.85)}}
@keyframes cxFire{
  0%{box-shadow:0 0 0 2px #ffb300,0 -3px 10px #ff7a00,0 -7px 18px #ff3d00,0 -12px 26px rgba(255,61,0,.45)}
  100%{box-shadow:0 0 0 2px #ffd54f,0 -5px 12px #ff9100,0 -10px 22px #ff5722,0 -16px 32px rgba(255,87,34,.5)}}
@keyframes cxAura{
  0%{box-shadow:0 0 0 3px #ff3df0,0 0 18px #ff3df0,0 0 34px rgba(255,61,240,.4)}
  33%{box-shadow:0 0 0 3px #22d3ee,0 0 18px #22d3ee,0 0 34px rgba(34,211,238,.4)}
  66%{box-shadow:0 0 0 3px #ffd76a,0 0 18px #ffd76a,0 0 34px rgba(255,215,106,.4)}
  100%{box-shadow:0 0 0 3px #ff3df0,0 0 18px #ff3df0,0 0 34px rgba(255,61,240,.4)}}

/* --- Colores de nickname (degradados) --- */
.cx-grad-sunset,.cx-grad-ocean,.cx-grad-toxic,.cx-grad-royal,.cx-grad-rainbow{display:inline-block;-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important}
.cx-grad-sunset{background-image:linear-gradient(90deg,#ff9a3c,#ff3d77)}
.cx-grad-ocean{background-image:linear-gradient(90deg,#5ee7ff,#3d7bff)}
.cx-grad-toxic{background-image:linear-gradient(90deg,#b6ff3d,#19d07a)}
.cx-grad-royal{background-image:linear-gradient(90deg,#a66bff,#ffd76a)}
.cx-grad-rainbow{background-image:linear-gradient(90deg,#ff3d77,#ffbf3f,#b6ff3d,#22d3ee,#a66bff,#ff3d77);background-size:300% 100%;animation:cxRainbow 4s linear infinite}
@keyframes cxRainbow{to{background-position:300% 0}}

/* --- Efectos de nombre --- */
.cx-fx-glow{filter:drop-shadow(0 0 6px rgba(255,255,255,.55)) drop-shadow(0 0 12px rgba(34,211,238,.45))}
.cx-fx-pulse{display:inline-block;animation:cxPulse 1.8s ease-in-out infinite}
.cx-fx-shine{display:inline-block;-webkit-mask-image:linear-gradient(-70deg,rgba(0,0,0,.55) 35%,#000 50%,rgba(0,0,0,.55) 65%);mask-image:linear-gradient(-70deg,rgba(0,0,0,.55) 35%,#000 50%,rgba(0,0,0,.55) 65%);-webkit-mask-size:250% 100%;mask-size:250% 100%;animation:cxShine 2.6s linear infinite}
.cx-fx-glitch{display:inline-block;animation:cxGlitch 2.4s steps(1) infinite}
@keyframes cxPulse{50%{transform:scale(1.06);filter:brightness(1.25)}}
@keyframes cxShine{from{-webkit-mask-position:150% 0;mask-position:150% 0}to{-webkit-mask-position:-100% 0;mask-position:-100% 0}}
@keyframes cxGlitch{
  0%,100%{transform:none;filter:none}
  8%{transform:translate(-1px,1px);filter:drop-shadow(2px 0 0 rgba(255,0,80,.8)) drop-shadow(-2px 0 0 rgba(0,255,255,.8))}
  10%{transform:translate(1px,-1px);filter:drop-shadow(-2px 0 0 rgba(255,0,80,.8)) drop-shadow(2px 0 0 rgba(0,255,255,.8))}
  12%{transform:none;filter:none}
  55%{transform:translate(1px,0);filter:drop-shadow(3px 0 0 rgba(255,0,80,.7)) drop-shadow(-3px 0 0 rgba(0,255,255,.7))}
  57%{transform:none;filter:none}}

/* ============================================================
   MENU DESPLEGABLE (3 barritas) — index y panel
   ============================================================ */
.menu-btn{width:42px;height:40px;border-radius:10px;border:1px solid var(--border-2);background:rgba(255,255,255,.02);display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;flex-shrink:0;transition:border-color .2s,background .2s;padding:0}
.menu-btn:hover{border-color:var(--accent);background:rgba(61,123,255,.08)}
.menu-btn span{display:block;width:18px;height:2px;border-radius:2px;background:#fff;transition:transform .25s,opacity .2s}
body.menu-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .menu-btn span:nth-child(2){opacity:0}
body.menu-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer-bg{position:fixed;inset:0;background:rgba(4,6,10,.6);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s;z-index:900}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:linear-gradient(180deg,#0f1420,#0a0d15);border-left:1px solid var(--border-2);z-index:901;transform:translateX(102%);transition:transform .3s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.5)}
body.menu-open .drawer-bg{opacity:1;pointer-events:auto}
body.menu-open .drawer{transform:none}
body.menu-open{overflow:hidden}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border)}
.drawer-head .logo{font-size:.95rem !important}
.drawer-close{width:34px;height:34px;border-radius:9px;border:1px solid var(--border-2);background:transparent;color:var(--gray);font-size:1rem;cursor:pointer}
.drawer-close:hover{color:#fff;border-color:var(--accent)}
.drawer-links{flex:1;overflow-y:auto;padding:10px 12px}
.drawer-links a{display:flex;align-items:center;gap:14px;padding:13px 12px;border-radius:10px;color:var(--text-2);font-weight:600;font-size:.95rem;transition:background .15s,color .15s}
.drawer-links a:hover,.drawer-links a:active{background:rgba(61,123,255,.1);color:#fff}
.drawer-links a svg{width:20px;height:20px;stroke:var(--accent-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.drawer-links .sep{height:1px;background:var(--border);margin:8px 6px}
.drawer-foot{padding:16px 20px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.drawer-foot .btn{justify-content:center;width:100%}

/* ============================================================
   AJUSTES PARA CELULAR (todas las paginas)
   ============================================================ */
html,body{max-width:100%;overflow-x:hidden}
img,video,iframe{max-width:100%}
@media(max-width:760px){
  nav{padding:12px 16px !important;gap:10px}
  nav .logo{font-size:.9rem !important;letter-spacing:.1em !important}
  .nav-actions{gap:6px !important}
  .nav-actions .btn{padding:8px 12px !important;font-size:.78rem !important}
  .container{padding:0 16px !important;margin-top:24px !important}
  .modal,.edit-box{padding:22px !important}
  .section-title{font-size:1rem !important}
  table{display:block;overflow-x:auto;white-space:nowrap}
  .tabs{flex-wrap:nowrap !important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap;flex-shrink:0}
  input,select,textarea{font-size:16px !important} /* evita el zoom automatico en Android/iPhone */
}

/* Menu de 3 barritas en todas las paginas: en celular quedan solo el logo y el menu */
.nav-right{display:flex;align-items:center;gap:10px}
@media(max-width:640px){ body.has-menu nav .nav-actions{display:none !important} }

/* ===== Menu: barritas que titilan, pagina actual y sin botones repetidos ===== */
.menu-btn{position:relative;border-color:rgba(34,211,238,.55) !important;animation:menuBlink 2.2s ease-in-out infinite}
.menu-btn span{background:#22d3ee !important;box-shadow:0 0 6px rgba(34,211,238,.8);animation:menuBars 2.2s ease-in-out infinite}
.menu-btn span:nth-child(2){animation-delay:.15s}
.menu-btn span:nth-child(3){animation-delay:.3s}
body.menu-open .menu-btn,body.menu-open .menu-btn span{animation:none}
@keyframes menuBlink{0%,100%{box-shadow:0 0 0 0 rgba(34,211,238,0);border-color:rgba(34,211,238,.4)}50%{box-shadow:0 0 14px 2px rgba(34,211,238,.45);border-color:#22d3ee}}
@keyframes menuBars{0%,100%{background:#22d3ee;box-shadow:0 0 6px rgba(34,211,238,.8)}50%{background:#7c86ff;box-shadow:0 0 10px rgba(124,134,255,.9)}}
.drawer-links a.active{background:rgba(61,123,255,.14);color:#fff;box-shadow:inset 3px 0 0 var(--accent-2)}
.drawer-foot:empty{display:none}
@media(min-width:641px){ .drawer-foot{display:none} .drawer-links .m-only{display:none} }
@media (prefers-reduced-motion:reduce){ .menu-btn,.menu-btn span{animation:none !important} }

/* ===== Nuevos cosmeticos ===== */
.cx-frame-toxic{animation:cxToxic 1.8s ease-in-out infinite}
@keyframes cxToxic{0%,100%{box-shadow:0 0 0 2px #7dff3d,0 0 10px rgba(125,255,61,.5)}50%{box-shadow:0 0 0 3px #b6ff3d,0 0 24px rgba(125,255,61,.85)}}
.cx-frame-electric{animation:cxElectric .9s steps(2) infinite}
@keyframes cxElectric{
  0%{box-shadow:0 0 0 2px #9fd6ff,2px -3px 10px #3d7bff,-3px 2px 14px #22d3ee,0 0 26px rgba(61,123,255,.6)}
  50%{box-shadow:0 0 0 2px #fff,-3px -2px 12px #22d3ee,3px 3px 10px #3d7bff,0 0 32px rgba(34,211,238,.7)}
  100%{box-shadow:0 0 0 2px #9fd6ff,3px 2px 14px #3d7bff,-2px -3px 10px #22d3ee,0 0 22px rgba(61,123,255,.5)}}
.cx-fx-neon{display:inline-block;filter:drop-shadow(0 0 4px rgba(255,61,240,.9)) drop-shadow(0 0 12px rgba(255,61,240,.6));animation:cxNeon 3.5s infinite}
@keyframes cxNeon{0%,18%,22%,25%,53%,57%,100%{opacity:1}20%,24%,55%{opacity:.35}}
.cx-fx-fuego{display:inline-block;animation:cxFuego 1s ease-in-out infinite alternate}
@keyframes cxFuego{from{filter:drop-shadow(0 -2px 3px #ff9100) drop-shadow(0 -5px 8px rgba(255,61,0,.7))}to{filter:drop-shadow(0 -3px 5px #ffd54f) drop-shadow(0 -8px 12px rgba(255,87,34,.8))}}

/* Fondos de perfil (se aplican a la cabecera del perfil y a la vista previa de la tienda) */
[class*="cx-banner-"]{position:relative;overflow:hidden;isolation:isolate}
[class*="cx-banner-"]::before,[class*="cx-banner-"]::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0}
.profile-header[class*="cx-banner-"]>*{position:relative;z-index:1}
.cx-banner-ct{background:radial-gradient(120% 140% at 0% 0%,rgba(61,123,255,.35),transparent 55%),linear-gradient(135deg,#071229,#0b1d45) !important;border-color:rgba(61,123,255,.5) !important}
.cx-banner-tt{background:radial-gradient(120% 140% at 0% 0%,rgba(255,77,100,.35),transparent 55%),linear-gradient(135deg,#1d070c,#3a0d16) !important;border-color:rgba(255,77,100,.5) !important}
.cx-banner-ct::before,.cx-banner-tt::before{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:28px 28px}
.cx-banner-ct::after,.cx-banner-tt::after{width:240%;height:240%;inset:auto;right:-170%;top:-70%;background:conic-gradient(from 0deg,transparent 0 300deg,rgba(255,255,255,.14) 350deg,transparent 360deg);animation:cxRadar 4s linear infinite;border-radius:50%}
@keyframes cxRadar{to{transform:rotate(360deg)}}
.cx-banner-hielo{background:linear-gradient(135deg,#0b2233,#123a52 50%,#0b2233) !important;border-color:rgba(159,228,255,.5) !important}
.cx-banner-hielo::before{background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 45%,transparent 60%);background-size:250% 100%;animation:cxSweep 4s linear infinite}
.cx-banner-hielo::after{background-image:radial-gradient(circle,rgba(255,255,255,.7) 1px,transparent 1.5px);background-size:46px 46px;opacity:.35}
.cx-banner-fuego{background:linear-gradient(0deg,#3a0a00,#140508 70%) !important;border-color:rgba(255,120,40,.5) !important}
.cx-banner-fuego::before{background:radial-gradient(60% 50% at 20% 110%,rgba(255,140,0,.55),transparent 70%),radial-gradient(50% 45% at 60% 115%,rgba(255,60,0,.55),transparent 70%),radial-gradient(45% 40% at 90% 110%,rgba(255,190,0,.45),transparent 70%);animation:cxFlames 1.6s ease-in-out infinite alternate}
@keyframes cxFlames{from{transform:translateY(6%) scaleY(.95);opacity:.85}to{transform:translateY(0) scaleY(1.08);opacity:1}}
.cx-banner-matrix{background:#020a04 !important;border-color:rgba(25,208,122,.5) !important}
.cx-banner-matrix::before{background-image:repeating-linear-gradient(90deg,transparent 0 14px,rgba(25,208,122,.0) 14px 15px),linear-gradient(180deg,transparent,rgba(25,208,122,.35) 50%,transparent);background-size:100% 100%,30px 180px;
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 14px);mask-image:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 14px);animation:cxRain 2.2s linear infinite}
@keyframes cxRain{from{background-position:0 0,0 -180px}to{background-position:0 0,0 180px}}
.cx-banner-matrix::after{background:radial-gradient(80% 100% at 50% 0%,rgba(25,208,122,.18),transparent 70%)}
.cx-banner-galaxia{background:radial-gradient(60% 80% at 20% 30%,rgba(166,107,255,.45),transparent 60%),radial-gradient(50% 70% at 85% 70%,rgba(34,211,238,.35),transparent 60%),#06040f !important;border-color:rgba(166,107,255,.5) !important}
.cx-banner-galaxia::before{background-image:radial-gradient(circle,#fff 1px,transparent 1.6px),radial-gradient(circle,rgba(255,255,255,.7) 1px,transparent 1.4px);background-size:70px 70px,43px 43px;background-position:0 0,20px 30px;animation:cxTwinkle 3s ease-in-out infinite alternate}
@keyframes cxTwinkle{from{opacity:.35}to{opacity:.9}}
.cx-banner-oro{background:linear-gradient(135deg,#2a1d00,#5a3d00 45%,#2a1d00) !important;border-color:rgba(255,215,106,.6) !important}
.cx-banner-oro::before{background:linear-gradient(115deg,transparent 35%,rgba(255,240,180,.35) 50%,transparent 65%);background-size:250% 100%;animation:cxSweep 3s linear infinite}
.cx-banner-oro::after{background-image:radial-gradient(circle,rgba(255,215,106,.6) 1px,transparent 1.5px);background-size:38px 38px;opacity:.4}
@keyframes cxSweep{from{background-position:150% 0}to{background-position:-100% 0}}

/* ===== Notificaciones en vivo ===== */
.menu-btn[data-count]::after{content:attr(data-count);position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--red);color:#fff;font:700 .66rem/19px 'Inter',sans-serif;text-align:center;box-shadow:0 0 0 2px var(--bg);animation:none}
.dl-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--red);color:#fff;font-size:.7rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.fx-toasts{position:fixed;top:78px;right:18px;z-index:950;display:flex;flex-direction:column;gap:10px;width:min(360px,calc(100vw - 32px));pointer-events:none}
.fx-toast{pointer-events:auto;display:flex;gap:12px;align-items:flex-start;background:linear-gradient(180deg,#141b2a,#0f1420);border:1px solid var(--border-2);border-left:3px solid var(--accent-2);border-radius:12px;padding:12px 14px;box-shadow:0 18px 40px -16px rgba(0,0,0,.8);animation:toastIn .35s cubic-bezier(.2,.8,.2,1);transition:opacity .35s,transform .35s;color:var(--text)}
.fx-toast.out{opacity:0;transform:translateX(30px)}
.fx-toast .ti{font-size:1.15rem;line-height:1.2}
.fx-toast .tb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fx-toast .tb b{font-size:.86rem;color:#fff}
.fx-toast .tb span{font-size:.8rem;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fx-toast .tx{color:var(--gray);font-size:.8rem;cursor:pointer;padding:2px}
.fx-toast:hover{border-color:var(--accent)}
@keyframes toastIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@media(max-width:640px){ .fx-toasts{top:66px;right:16px;left:16px;width:auto} }

/* ===== Perfil: estilo de juego (mapas y armas) y logros ===== */
.style-card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--border);border-radius:16px;padding:20px}
.style-top{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.style-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:30px;border:1px solid var(--border-2);background:var(--panel-2);font-weight:700;font-size:.86rem}
.style-pill small{font-weight:600;color:var(--gray);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}
.style-pill.ct{border-color:rgba(61,123,255,.55);color:#8fb4ff;background:rgba(61,123,255,.1)}
.style-pill.tt{border-color:rgba(255,191,63,.55);color:#ffd76a;background:rgba(255,191,63,.08)}
.style-label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-2);margin:6px 0 10px}
.map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.map-tile{position:relative;aspect-ratio:16/10;border-radius:13px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,var(--m1),var(--m2));box-shadow:inset 0 -40px 50px -20px rgba(0,0,0,.65);isolation:isolate}
.map-tile::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 12px);z-index:-1}
.map-tile svg{position:absolute;right:-6px;top:-4px;width:70%;height:auto;opacity:.32;fill:none;stroke:#fff;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.map-tile .mn{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-weight:700;font-size:.95rem;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.map-tile .mn small{display:block;font-family:'Inter',sans-serif;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75;font-weight:700}
.wpn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.wpn{position:relative;border-radius:13px;border:1px solid var(--border-2);background:radial-gradient(120% 120% at 100% 0%,rgba(34,211,238,.12),transparent 55%),var(--panel-2);padding:14px 14px 12px;overflow:hidden}
.wpn svg{width:100%;height:46px;fill:#cfe7ff;filter:drop-shadow(0 0 6px rgba(34,211,238,.35))}
.wpn .wn{font-weight:800;font-size:.9rem;margin-top:8px}
.wpn .wc{font-size:.66rem;color:var(--gray);text-transform:uppercase;letter-spacing:.1em}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;max-height:260px;overflow-y:auto;padding:2px}
.pick-grid .map-tile,.pick-grid .wpn{cursor:pointer;transition:transform .12s,box-shadow .12s}
.pick-grid .map-tile .mn{font-size:.78rem}
.pick-grid .wpn svg{height:34px}
.pick-grid .on{outline:2px solid var(--yellow);outline-offset:1px;transform:translateY(-2px)}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ach{border:1px solid var(--border);border-radius:13px;padding:14px 12px;text-align:center;background:var(--panel);position:relative}
.ach .ai{font-size:1.7rem;line-height:1;margin-bottom:8px}
.ach .an{font-weight:800;font-size:.84rem}
.ach .ad{font-size:.72rem;color:var(--gray);margin-top:3px}
.ach .ar{font-size:.7rem;margin-top:6px}
.ach.on{border-color:rgba(255,191,63,.5);background:radial-gradient(100% 80% at 50% 0%,rgba(255,191,63,.13),transparent 70%),var(--panel)}
.ach.off{opacity:.45;filter:grayscale(1)}
.ach.off::after{content:"🔒";position:absolute;top:8px;right:9px;font-size:.75rem}
.ach-bar{height:6px;border-radius:4px;background:var(--panel-2);overflow:hidden;margin:4px 0 14px}
.ach-bar i{display:block;height:100%;background:linear-gradient(90deg,#ffbf3f,#ffd76a)}

/* Barra de desplazamiento oculta: se puede bajar con la rueda, el dedo o el teclado, pero la barra no se ve */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}

/* ============================================================
   NIVELES (ficha con el numero de nivel al lado del nick)
   lt1 Recluta · lt2 Soldado · lt3 Veterano · lt4 Elite · lt5 Maestro · lt6 Leyenda · lt7 Mito
   ============================================================ */
.lvl-b{--lc:#8a95a8;display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:20px;padding:0 6px;border-radius:6px;
  font-family:var(--mono,ui-monospace,monospace);font-size:.68rem;font-weight:800;line-height:1;color:var(--lc);vertical-align:middle;
  background:color-mix(in srgb,var(--lc) 16%,transparent);border:1px solid color-mix(in srgb,var(--lc) 70%,transparent);
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,6px 100%,0 50%);padding:0 8px;flex-shrink:0}
.lvl-b.lt2{--lc:#22d07a}.lvl-b.lt3{--lc:#3d7bff}.lvl-b.lt4{--lc:#b67dff}.lvl-b.lt5{--lc:#f5c542}.lvl-b.lt6{--lc:#ff4d6d}
.lvl-b.lt7{--lc:#2be0ff;box-shadow:0 0 10px rgba(43,224,255,.45);animation:lvlMito 2.4s ease-in-out infinite}
@keyframes lvlMito{50%{filter:brightness(1.35)}}
.lvl-b.big{height:30px;min-width:40px;font-size:.92rem;padding:0 12px;clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,9px 100%,0 50%)}
.xp-bar{height:10px;border-radius:6px;background:var(--panel-3,#1a2030);overflow:hidden;position:relative}
.xp-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent,#2f81f7),var(--accent-2,#00e5ff));box-shadow:0 0 12px rgba(0,229,255,.45)}

/* ============================================================
   TITULOS DE CAJAS (rareza). Se suman a .cx-title
   ============================================================ */
.cx-title.cx-r-comun{color:#c9d4e3;background:linear-gradient(90deg,rgba(201,212,227,.14),rgba(201,212,227,.03));border-color:rgba(201,212,227,.35)}
.cx-title.cx-r-raro{color:#7fb2ff;background:linear-gradient(90deg,rgba(61,123,255,.22),rgba(61,123,255,.05));border-color:rgba(61,123,255,.6)}
.cx-title.cx-r-epico{color:#d4b0ff;background:linear-gradient(90deg,rgba(182,125,255,.26),rgba(182,125,255,.06));border-color:rgba(182,125,255,.7);box-shadow:0 0 10px rgba(182,125,255,.25)}
.cx-title.cx-r-legendario{color:#1a1203;border-color:#ffd76a;box-shadow:0 0 14px rgba(245,197,66,.5);
  background:linear-gradient(110deg,#eab53a 0%,#f5c542 38%,#fff3c4 50%,#f5c542 62%,#eab53a 100%);background-size:300% 100%;animation:titleLeg 3.2s linear infinite}
@keyframes titleLeg{from{background-position:100% 0}to{background-position:0% 0}}

/* ============================================================
   ELO DE JUGADORES (ficha con el rango)
   ============================================================ */
.elo-chip{--ec:#c0c8d4;display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:.7rem;font-weight:800;letter-spacing:.04em;vertical-align:middle;
  color:var(--ec);border:1px solid color-mix(in srgb,var(--ec) 60%,transparent);background:color-mix(in srgb,var(--ec) 13%,transparent);white-space:nowrap}
.elo-chip b{font-family:var(--mono,ui-monospace,monospace);color:#fff;font-weight:800}

/* ============================================================
   COSMÉTICOS v2 — arreglos y objetos nuevos
   ============================================================ */
@property --cxa{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes cxSpin{to{--cxa:360deg}}

/* --- arreglos: Glitch y En llamas ahora se notan siempre --- */
.cx-fx-glitch{display:inline-block;position:relative;animation:cxGlitch2 1.6s steps(1) infinite !important}
@keyframes cxGlitch2{
  0%,100%{transform:none;filter:drop-shadow(2px 0 0 rgba(255,0,90,.85)) drop-shadow(-2px 0 0 rgba(0,240,255,.85))}
  12%{transform:translate(-2px,1px) skewX(-6deg);filter:drop-shadow(4px 0 0 rgba(255,0,90,.9)) drop-shadow(-4px 0 0 rgba(0,240,255,.9))}
  14%{transform:translate(2px,-1px);filter:drop-shadow(-3px 0 0 rgba(255,0,90,.9)) drop-shadow(3px 0 0 rgba(0,240,255,.9))}
  16%{transform:none;filter:drop-shadow(2px 0 0 rgba(255,0,90,.85)) drop-shadow(-2px 0 0 rgba(0,240,255,.85))}
  48%{transform:translate(3px,0) skewX(8deg);opacity:.75}
  50%{transform:translate(-3px,1px);opacity:1;filter:drop-shadow(5px 0 0 rgba(255,0,90,.9)) drop-shadow(-5px 0 0 rgba(0,240,255,.9))}
  52%{transform:none}
  78%{transform:translateY(-2px) skewX(-4deg);filter:drop-shadow(-4px 1px 0 rgba(255,0,90,.9)) drop-shadow(4px -1px 0 rgba(0,240,255,.9))}
  80%{transform:none}}
.cx-fx-fuego{display:inline-block;color:#ffb347;
  background-image:linear-gradient(0deg,#ff2a00 0%,#ff7a00 30%,#ffd54f 60%,#fff6c9 80%,#ff7a00 100%) !important;background-size:100% 200% !important;
  -webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;
  animation:cxFuego2 1.1s linear infinite,cxFuegoGlow .45s ease-in-out infinite alternate !important}
@keyframes cxFuego2{from{background-position:0 0}to{background-position:0 -200%}}
@keyframes cxFuegoGlow{from{filter:drop-shadow(0 -2px 4px rgba(255,120,0,.9)) drop-shadow(0 -6px 10px rgba(255,40,0,.6))}to{filter:drop-shadow(0 -4px 6px rgba(255,190,0,.95)) drop-shadow(0 -10px 16px rgba(255,60,0,.75))}}

/* --- MARCOS DE AVATAR nuevos (solo box-shadow: no los recorta el avatar) --- */
.cx-frame-plasma{animation:cxPlasma 2.2s linear infinite}
@keyframes cxPlasma{0%{box-shadow:0 0 0 3px #ff6b12,6px 0 16px #a855f7,-6px 0 16px #ff6b12}25%{box-shadow:0 0 0 3px #a855f7,0 6px 16px #ff6b12,0 -6px 16px #a855f7}50%{box-shadow:0 0 0 3px #ff6b12,-6px 0 16px #a855f7,6px 0 16px #ff6b12}75%{box-shadow:0 0 0 3px #a855f7,0 -6px 16px #ff6b12,0 6px 16px #a855f7}100%{box-shadow:0 0 0 3px #ff6b12,6px 0 16px #a855f7,-6px 0 16px #ff6b12}}
.cx-frame-sangre{animation:cxSangre 1.2s ease-in-out infinite}
@keyframes cxSangre{0%,100%{box-shadow:0 0 0 3px #b3001b,0 4px 10px rgba(179,0,27,.6)}50%{box-shadow:0 0 0 4px #ff1f3d,0 8px 22px rgba(255,31,61,.85),0 0 30px rgba(255,0,40,.4)}}
.cx-frame-radar{animation:cxRadarF 2s linear infinite}
@keyframes cxRadarF{0%{box-shadow:0 0 0 2px #ff6b12,8px -8px 14px rgba(255,107,18,.9)}25%{box-shadow:0 0 0 2px #ff6b12,8px 8px 14px rgba(255,107,18,.9)}50%{box-shadow:0 0 0 2px #ff6b12,-8px 8px 14px rgba(255,107,18,.9)}75%{box-shadow:0 0 0 2px #ff6b12,-8px -8px 14px rgba(255,107,18,.9)}100%{box-shadow:0 0 0 2px #ff6b12,8px -8px 14px rgba(255,107,18,.9)}}
.cx-frame-holo{animation:cxHolo 3s linear infinite}
@keyframes cxHolo{0%{box-shadow:0 0 0 3px #00f0ff,0 0 18px #00f0ff}33%{box-shadow:0 0 0 3px #ff2bd6,0 0 18px #ff2bd6}66%{box-shadow:0 0 0 3px #8cff3d,0 0 18px #8cff3d}100%{box-shadow:0 0 0 3px #00f0ff,0 0 18px #00f0ff}}
.cx-frame-lava{animation:cxLava 1.4s ease-in-out infinite alternate}
@keyframes cxLava{from{box-shadow:0 0 0 3px #ff3d00,0 0 0 6px #5a1000,0 6px 18px rgba(255,90,0,.8)}to{box-shadow:0 0 0 3px #ffb300,0 0 0 6px #8a1c00,0 -4px 24px rgba(255,140,0,.9)}}
.cx-frame-eclipse{animation:cxEclipse 3.2s ease-in-out infinite}
@keyframes cxEclipse{0%,100%{box-shadow:0 0 0 4px #000,0 0 0 6px #ffcf8a,0 0 26px 6px rgba(255,200,120,.55)}50%{box-shadow:0 0 0 4px #000,0 0 0 6px #fff4dc,0 0 40px 12px rgba(255,220,160,.75)}}
.cx-frame-prisma{animation:cxPrisma 2.4s linear infinite}
@keyframes cxPrisma{0%{box-shadow:0 0 0 3px #ff3d77,0 0 16px #ff3d77}16%{box-shadow:0 0 0 3px #ffbf3f,0 0 16px #ffbf3f}33%{box-shadow:0 0 0 3px #b6ff3d,0 0 16px #b6ff3d}50%{box-shadow:0 0 0 3px #22d3ee,0 0 16px #22d3ee}66%{box-shadow:0 0 0 3px #3d7bff,0 0 16px #3d7bff}83%{box-shadow:0 0 0 3px #a66bff,0 0 16px #a66bff}100%{box-shadow:0 0 0 3px #ff3d77,0 0 16px #ff3d77}}
.cx-frame-tormenta{animation:cxTormentaF 1.6s steps(1) infinite}
@keyframes cxTormentaF{0%,100%{box-shadow:0 0 0 2px #9fd6ff,0 0 10px rgba(159,214,255,.5)}20%{box-shadow:0 0 0 3px #fff,-4px -3px 16px #9fd6ff,4px 3px 20px #fff}24%{box-shadow:0 0 0 2px #9fd6ff,0 0 10px rgba(159,214,255,.5)}60%{box-shadow:0 0 0 3px #fff,4px -4px 18px #c9e8ff,-3px 4px 14px #fff}63%{box-shadow:0 0 0 2px #9fd6ff,0 0 10px rgba(159,214,255,.5)}}
.cx-frame-dragon{animation:cxDragon 1.6s ease-in-out infinite}
@keyframes cxDragon{0%,100%{box-shadow:0 0 0 3px #ffd76a,0 0 0 6px #ff4d00,0 -6px 16px #ff7a00,0 -12px 26px rgba(255,61,0,.6)}50%{box-shadow:0 0 0 3px #fff0b3,0 0 0 6px #ff7a00,0 -9px 20px #ffb300,0 -16px 34px rgba(255,90,0,.75)}}
.cx-frame-divino{animation:cxDivino 2.6s ease-in-out infinite}
@keyframes cxDivino{0%,100%{box-shadow:0 0 0 3px #fff3c4,0 0 0 6px #f5c542,0 0 22px 4px rgba(255,230,150,.7),0 0 50px 10px rgba(245,197,66,.35)}50%{box-shadow:0 0 0 3px #fff,0 0 0 6px #ffd76a,0 0 30px 8px rgba(255,240,190,.9),0 0 70px 18px rgba(245,197,66,.5)}}

/* --- COLORES DE NICKNAME nuevos --- */
[class*="cx-grad-"]{display:inline-block;-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important}
.cx-grad-lava{background-image:linear-gradient(90deg,#ff1f00,#ff7a00,#ffb300)}
.cx-grad-hielo{background-image:linear-gradient(90deg,#ffffff,#bfefff,#5ec8ff)}
.cx-grad-neon{background-image:linear-gradient(90deg,#ff2bd6,#8f5bff,#00f0ff)}
.cx-grad-sangre{background-image:linear-gradient(90deg,#5a0010,#d4002a,#ff4d6d)}
.cx-grad-veneno{background-image:linear-gradient(90deg,#b6ff3d,#3ddc84,#9b4dff)}
.cx-grad-oro{background-image:linear-gradient(110deg,#b8860b 0%,#f5c542 35%,#fff6c9 50%,#f5c542 65%,#b8860b 100%);background-size:250% 100%;animation:cxShineBg 2.6s linear infinite}
.cx-grad-cromo{background-image:linear-gradient(110deg,#6b7280 0%,#e5e7eb 35%,#ffffff 50%,#9ca3af 65%,#4b5563 100%);background-size:250% 100%;animation:cxShineBg 3s linear infinite}
.cx-grad-galaxia{background-image:linear-gradient(90deg,#7c3aed,#3b82f6,#ec4899,#7c3aed);background-size:300% 100%;animation:cxRainbow 5s linear infinite}
.cx-grad-aurora{background-image:linear-gradient(90deg,#34d399,#22d3ee,#a78bfa,#34d399);background-size:300% 100%;animation:cxRainbow 4s linear infinite}
.cx-grad-infierno{background-image:linear-gradient(0deg,#7a0000,#ff2a00,#ff8c00,#ffd54f,#ff2a00);background-size:100% 300%;animation:cxInfierno 1.6s linear infinite}
@keyframes cxShineBg{from{background-position:150% 0}to{background-position:-100% 0}}
@keyframes cxInfierno{from{background-position:0 0}to{background-position:0 -300%}}

/* --- EFECTOS DE NOMBRE nuevos --- */
.cx-fx-sombra{display:inline-block;filter:drop-shadow(3px 3px 0 #000) drop-shadow(5px 5px 0 rgba(255,107,18,.55))}
.cx-fx-hielo{display:inline-block;animation:cxHieloFx 2.2s ease-in-out infinite}
@keyframes cxHieloFx{0%,100%{filter:drop-shadow(0 0 3px #bfefff) drop-shadow(0 0 8px rgba(94,200,255,.5))}50%{filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 16px rgba(94,200,255,.9))}}
.cx-fx-flotar{display:inline-block;animation:cxFlotar 2.4s ease-in-out infinite}
@keyframes cxFlotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px);filter:drop-shadow(0 8px 6px rgba(0,0,0,.45))}}
.cx-fx-temblor{display:inline-block;animation:cxTemblor .5s steps(4) infinite}
@keyframes cxTemblor{0%{transform:translate(0,0)}25%{transform:translate(-1.5px,1px) rotate(-1deg)}50%{transform:translate(1.5px,-1px) rotate(1deg)}75%{transform:translate(-1px,-1px)}100%{transform:translate(0,0)}}
.cx-fx-eco{display:inline-block;animation:cxEco 1.8s ease-out infinite}
@keyframes cxEco{0%{filter:drop-shadow(0 0 0 rgba(255,107,18,.0))}40%{filter:drop-shadow(6px 0 0 rgba(255,107,18,.55)) drop-shadow(12px 0 0 rgba(255,107,18,.25))}100%{filter:drop-shadow(14px 0 0 rgba(255,107,18,0)) drop-shadow(24px 0 0 rgba(255,107,18,0))}}
.cx-fx-holo{display:inline-block;animation:cxHoloFx 3s linear infinite}
@keyframes cxHoloFx{from{filter:hue-rotate(0deg) drop-shadow(0 0 6px rgba(0,240,255,.6))}to{filter:hue-rotate(360deg) drop-shadow(0 0 6px rgba(0,240,255,.6))}}
.cx-fx-sangre{display:inline-block;animation:cxSangreFx 1.1s ease-in-out infinite}
@keyframes cxSangreFx{0%,100%{filter:drop-shadow(0 0 3px rgba(255,0,40,.6))}50%{filter:drop-shadow(0 2px 6px #ff1f3d) drop-shadow(0 6px 10px rgba(180,0,20,.8))}}
.cx-fx-onda{display:inline-block;animation:cxOnda 1.6s ease-in-out infinite}
@keyframes cxOnda{0%,100%{transform:skewX(0) scaleY(1)}25%{transform:skewX(-8deg) scaleY(1.06)}75%{transform:skewX(8deg) scaleY(.94)}}
.cx-fx-tormenta{display:inline-block;animation:cxTormentaFx 2s steps(1) infinite}
@keyframes cxTormentaFx{0%,100%{filter:drop-shadow(0 0 4px rgba(159,214,255,.6))}30%{filter:brightness(1.8) drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #9fd6ff)}34%{filter:drop-shadow(0 0 4px rgba(159,214,255,.6))}70%{filter:brightness(1.6) drop-shadow(0 0 12px #c9e8ff)}73%{filter:drop-shadow(0 0 4px rgba(159,214,255,.6))}}
.cx-fx-supernova{display:inline-block;animation:cxSupernova 2.4s ease-in-out infinite}
@keyframes cxSupernova{0%,100%{transform:scale(1);filter:hue-rotate(0deg) drop-shadow(0 0 6px #ff6b12) drop-shadow(0 0 14px #ff3d77)}50%{transform:scale(1.08);filter:hue-rotate(180deg) drop-shadow(0 0 12px #fff) drop-shadow(0 0 26px #ff6b12)}}

/* --- FONDOS DE PERFIL nuevos --- */
.cx-banner-lava{background:linear-gradient(180deg,#1a0500,#3b0a00) !important;border-color:rgba(255,90,0,.6) !important}
.cx-banner-lava::before{background:radial-gradient(40% 60% at 20% 110%,rgba(255,80,0,.75),transparent 70%),radial-gradient(35% 55% at 55% 115%,rgba(255,170,0,.6),transparent 70%),radial-gradient(40% 60% at 90% 110%,rgba(255,40,0,.7),transparent 70%);animation:cxFlames 2.2s ease-in-out infinite alternate}
.cx-banner-lava::after{background:repeating-linear-gradient(115deg,transparent 0 40px,rgba(255,120,0,.12) 40px 44px);animation:cxSweep 6s linear infinite;background-size:200% 100%}
.cx-banner-tormenta{background:linear-gradient(180deg,#05070d,#141b2b) !important;border-color:rgba(159,214,255,.5) !important}
.cx-banner-tormenta::before{background:linear-gradient(100deg,transparent 45%,rgba(255,255,255,.9) 46%,transparent 47%),linear-gradient(80deg,transparent 70%,rgba(201,232,255,.8) 70.6%,transparent 71.2%);opacity:0;animation:cxRayo 3s steps(1) infinite}
.cx-banner-tormenta::after{background:radial-gradient(80% 60% at 50% 0%,rgba(159,214,255,.18),transparent 70%)}
@keyframes cxRayo{0%,100%{opacity:0}40%{opacity:1}43%{opacity:0}46%{opacity:.8}49%{opacity:0}}
.cx-banner-sangre{background:linear-gradient(135deg,#1a0006,#3d000c) !important;border-color:rgba(255,31,61,.55) !important}
.cx-banner-sangre::before{background:repeating-linear-gradient(-45deg,rgba(255,31,61,.12) 0 14px,transparent 14px 28px)}
.cx-banner-sangre::after{background:linear-gradient(90deg,transparent,rgba(255,31,61,.35),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:cxBarrido 2.4s linear infinite}
@keyframes cxBarrido{from{background-position:-40% 0}to{background-position:140% 0}}
.cx-banner-neon{background:linear-gradient(180deg,#12002a 0%,#2a0047 55%,#ff2bd6 140%) !important;border-color:rgba(255,43,214,.55) !important}
.cx-banner-neon::before{top:45%;background-image:linear-gradient(rgba(0,240,255,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,255,.55) 1px,transparent 1px);background-size:30px 20px;transform:perspective(200px) rotateX(55deg);transform-origin:top;animation:cxGrid 1.2s linear infinite}
.cx-banner-neon::after{inset:auto 0 52% 0;height:46%;background:radial-gradient(40% 70% at 50% 100%,rgba(255,170,60,.9),rgba(255,43,214,.4) 60%,transparent 75%)}
@keyframes cxGrid{from{background-position:0 0}to{background-position:0 20px}}
.cx-banner-dust{background:linear-gradient(180deg,#c9a46a,#8c6a3a) !important;border-color:rgba(255,214,150,.6) !important}
.cx-banner-dust::before{background-image:radial-gradient(circle,rgba(255,240,210,.7) 1px,transparent 1.5px),radial-gradient(circle,rgba(255,230,190,.5) 1px,transparent 1.5px);background-size:60px 40px,90px 70px;animation:cxArena 3s linear infinite}
.cx-banner-dust::after{background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(60,35,10,.55))}
@keyframes cxArena{from{background-position:0 0,0 0}to{background-position:-60px 10px,-90px 20px}}
.cx-banner-nieve{background:linear-gradient(180deg,#0d1b2a,#1b3a5a) !important;border-color:rgba(220,240,255,.5) !important}
.cx-banner-nieve::before{background-image:radial-gradient(circle,#fff 1.4px,transparent 2px),radial-gradient(circle,rgba(255,255,255,.7) 1px,transparent 1.6px);background-size:50px 50px,80px 80px;animation:cxNieve 4s linear infinite}
@keyframes cxNieve{from{background-position:0 0,20px 0}to{background-position:-10px 50px,0 80px}}
.cx-banner-circuito{background:#04140d !important;border-color:rgba(61,220,132,.5) !important}
.cx-banner-circuito::before{background-image:linear-gradient(90deg,rgba(61,220,132,.28) 2px,transparent 2px),linear-gradient(rgba(61,220,132,.28) 2px,transparent 2px);background-size:46px 46px;-webkit-mask-image:radial-gradient(circle at 30% 50%,#000 30%,transparent 75%);mask-image:radial-gradient(circle at 30% 50%,#000 30%,transparent 75%)}
.cx-banner-circuito::after{background:linear-gradient(90deg,transparent,rgba(120,255,180,.45),transparent);background-size:30% 100%;background-repeat:no-repeat;animation:cxBarrido 2s linear infinite}
.cx-banner-aurora{background:#030812 !important;border-color:rgba(52,211,153,.5) !important}
.cx-banner-aurora::before{background:linear-gradient(120deg,transparent 10%,rgba(52,211,153,.55) 30%,rgba(34,211,238,.45) 45%,rgba(167,139,250,.5) 60%,transparent 80%);background-size:200% 100%;filter:blur(14px);animation:cxSweep 6s ease-in-out infinite alternate}
.cx-banner-aurora::after{background-image:radial-gradient(circle,rgba(255,255,255,.8) 1px,transparent 1.5px);background-size:64px 64px;opacity:.35}
.cx-banner-radar{background:radial-gradient(70% 90% at 80% 50%,rgba(255,107,18,.25),transparent 60%),#0d0d0e !important;border-color:rgba(255,107,18,.6) !important}
.cx-banner-radar::before{background:repeating-radial-gradient(circle at 80% 50%,transparent 0 34px,rgba(255,107,18,.22) 34px 35px)}
.cx-banner-radar::after{inset:auto;width:260%;height:260%;right:-150%;top:-80%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 300deg,rgba(255,107,18,.35) 358deg,transparent 360deg);animation:cxRadar 3s linear infinite}
.cx-banner-dragon{background:linear-gradient(135deg,#1a0700,#3d1200 45%,#1a0700) !important;border-color:rgba(255,200,90,.7) !important}
.cx-banner-dragon::before{background:radial-gradient(45% 60% at 15% 120%,rgba(255,90,0,.7),transparent 70%),radial-gradient(45% 60% at 85% 120%,rgba(255,170,0,.6),transparent 70%),linear-gradient(115deg,transparent 35%,rgba(255,230,160,.25) 50%,transparent 65%);background-size:100% 100%,100% 100%,250% 100%;animation:cxSweep 3.2s linear infinite}
.cx-banner-dragon::after{background-image:radial-gradient(circle,rgba(255,180,60,.9) 1.2px,transparent 2px);background-size:70px 90px;animation:cxBrasas 3s linear infinite}
@keyframes cxBrasas{from{background-position:0 0}to{background-position:20px -90px}}

/* --- MARCOS DE PERFIL (rodean la cabecera; se aplican a un contenedor .cx-pf) --- */
[class*="cx-pframe-"]{position:relative;border-radius:18px;isolation:isolate}
[class*="cx-pframe-"]::before,[class*="cx-pframe-"]::after{content:"";position:absolute;pointer-events:none;border-radius:inherit;z-index:3}
.cx-pframe-naranja{box-shadow:0 0 0 2px #ff6b12,0 0 22px -4px rgba(255,107,18,.7)}
.cx-pframe-doble{box-shadow:0 0 0 2px #fff,0 0 0 5px #0e0e0f,0 0 0 7px #ff6b12}
.cx-pframe-tactico::before{inset:-6px;border-radius:6px;background:
  linear-gradient(#ff6b12,#ff6b12) top left/28px 3px no-repeat,linear-gradient(#ff6b12,#ff6b12) top left/3px 28px no-repeat,
  linear-gradient(#ff6b12,#ff6b12) top right/28px 3px no-repeat,linear-gradient(#ff6b12,#ff6b12) top right/3px 28px no-repeat,
  linear-gradient(#ff6b12,#ff6b12) bottom left/28px 3px no-repeat,linear-gradient(#ff6b12,#ff6b12) bottom left/3px 28px no-repeat,
  linear-gradient(#ff6b12,#ff6b12) bottom right/28px 3px no-repeat,linear-gradient(#ff6b12,#ff6b12) bottom right/3px 28px no-repeat;animation:cxTac 2s ease-in-out infinite}
@keyframes cxTac{0%,100%{inset:-6px;opacity:1}50%{inset:-10px;opacity:.7}}
.cx-pframe-neon{animation:cxPfNeon 3.5s infinite}
@keyframes cxPfNeon{0%,18%,22%,25%,53%,57%,100%{box-shadow:0 0 0 2px #ff2bd6,0 0 14px #ff2bd6,0 0 34px rgba(255,43,214,.45),inset 0 0 14px rgba(255,43,214,.25)}20%,24%,55%{box-shadow:0 0 0 2px rgba(255,43,214,.4),0 0 4px rgba(255,43,214,.3)}}
.cx-pframe-hielo{animation:cxPfHielo 3s ease-in-out infinite}
@keyframes cxPfHielo{0%,100%{box-shadow:0 0 0 2px #d6f6ff,0 0 0 5px rgba(127,216,255,.35),0 0 20px rgba(127,216,255,.5)}50%{box-shadow:0 0 0 2px #fff,0 0 0 6px rgba(127,216,255,.6),0 0 34px rgba(159,228,255,.85)}}
.cx-pframe-oro::before,.cx-pframe-arcoiris::before,.cx-pframe-elite::before{inset:-3px;padding:3px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:cxSpin 3s linear infinite}
.cx-pframe-oro::before{background:conic-gradient(from var(--cxa),#8a5a00,#f5c542,#fff3c4,#f5c542,#8a5a00,#f5c542,#fff3c4,#8a5a00)}
.cx-pframe-oro{box-shadow:0 0 26px -6px rgba(245,197,66,.7)}
.cx-pframe-fuego{animation:cxPfFuego 1.2s ease-in-out infinite alternate}
@keyframes cxPfFuego{from{box-shadow:0 0 0 2px #ff7a00,0 -6px 18px rgba(255,90,0,.75),0 -14px 32px rgba(255,40,0,.45)}to{box-shadow:0 0 0 2px #ffb300,0 -10px 24px rgba(255,140,0,.85),0 -22px 44px rgba(255,60,0,.55)}}
.cx-pframe-tormenta{animation:cxPfTormenta 2.2s steps(1) infinite}
@keyframes cxPfTormenta{0%,100%{box-shadow:0 0 0 2px #9fd6ff,0 0 14px rgba(159,214,255,.45)}25%{box-shadow:0 0 0 3px #fff,-8px -6px 26px #c9e8ff,8px 6px 30px #fff}28%{box-shadow:0 0 0 2px #9fd6ff,0 0 14px rgba(159,214,255,.45)}70%{box-shadow:0 0 0 3px #fff,10px -8px 28px #9fd6ff}73%{box-shadow:0 0 0 2px #9fd6ff,0 0 14px rgba(159,214,255,.45)}}
.cx-pframe-arcoiris::before{background:conic-gradient(from var(--cxa),#ff3d77,#ffbf3f,#b6ff3d,#22d3ee,#a66bff,#ff3d77);animation-duration:2.4s}
.cx-pframe-arcoiris{box-shadow:0 0 30px -8px rgba(255,255,255,.35)}
.cx-pframe-elite::before{inset:-4px;padding:4px;background:conic-gradient(from var(--cxa),#ff6b12,#0e0e0f 25%,#ff6b12 50%,#fff 52%,#ff6b12 54%,#0e0e0f 75%,#ff6b12);animation-duration:2.2s}
.cx-pframe-elite{box-shadow:0 0 40px -6px rgba(255,107,18,.75)}
.cx-pframe-elite::after{content:"ÉLITE";inset:auto;top:-11px;right:22px;border-radius:999px;padding:4px 10px;font:800 .62rem/1 'Barlow',sans-serif;letter-spacing:.2em;color:#160600;background:#ff6b12;box-shadow:0 6px 14px -6px rgba(255,107,18,.9)}

/* Los cosméticos son algo que el jugador compró y eligió mostrar: se animan siempre,
   aunque la PC tenga desactivados los "efectos de animación" de Windows. */
@media (prefers-reduced-motion:reduce){
  [class*="cx-frame-"],[class*="cx-fx-"],[class*="cx-grad-"],[class*="cx-pframe-"],[class*="cx-pframe-"]::before,[class*="cx-pframe-"]::after,
  [class*="cx-banner-"]::before,[class*="cx-banner-"]::after,.cx-title.cx-r-legendario,.lvl-b.lt7{animation-play-state:running !important}
}

/* ============================================================
   TÍTULOS CON EFECTO (tienda): .cx-title.cx-r-tf-*
   ============================================================ */
.cx-title[class*="cx-r-tf-"]{position:relative;font-size:.66rem;padding:3px 10px;overflow:visible}
.cx-title.cx-r-tf-sangre{color:#fff;background:linear-gradient(90deg,#5a0010,#b3001b);border-color:#ff1f3d;animation:tfSangre 1.2s ease-in-out infinite}
@keyframes tfSangre{0%,100%{box-shadow:0 0 6px rgba(255,31,61,.5)}50%{box-shadow:0 0 16px rgba(255,31,61,.95),0 4px 12px rgba(150,0,20,.8)}}
.cx-title.cx-r-tf-hielo{color:#0b2a3a;background:linear-gradient(110deg,#bfefff 0%,#ffffff 45%,#7fd8ff 55%,#bfefff 100%);background-size:250% 100%;border-color:#e6faff;animation:cxShineBg 2.4s linear infinite,tfHielo 2.4s ease-in-out infinite}
@keyframes tfHielo{0%,100%{box-shadow:0 0 6px rgba(127,216,255,.5)}50%{box-shadow:0 0 16px rgba(191,239,255,.95)}}
.cx-title.cx-r-tf-neon{color:#fff;background:#1a0020;border-color:#ff2bd6;text-shadow:0 0 6px #ff2bd6,0 0 12px #ff2bd6;animation:tfNeon 3s infinite}
@keyframes tfNeon{0%,18%,22%,25%,53%,57%,100%{box-shadow:0 0 8px #ff2bd6,inset 0 0 6px rgba(255,43,214,.5);opacity:1}20%,24%,55%{box-shadow:none;opacity:.55}}
.cx-title.cx-r-tf-glitch{color:#fff;background:#111;border-color:#3a3a3a;animation:tfGlitch 1.4s steps(1) infinite}
@keyframes tfGlitch{0%,100%{text-shadow:2px 0 #ff005a,-2px 0 #00f0ff;transform:none}20%{text-shadow:-3px 0 #ff005a,3px 0 #00f0ff;transform:translate(1px,-1px) skewX(-8deg)}23%{text-shadow:2px 0 #ff005a,-2px 0 #00f0ff;transform:none}60%{text-shadow:4px 1px #ff005a,-4px -1px #00f0ff;transform:translate(-1px,1px)}63%{transform:none}}
.cx-title.cx-r-tf-rayo{color:#0b1830;background:linear-gradient(90deg,#9fd6ff,#ffffff,#9fd6ff);border-color:#fff;animation:tfRayo 2s steps(1) infinite}
@keyframes tfRayo{0%,100%{box-shadow:0 0 6px rgba(159,214,255,.6);filter:none}30%{box-shadow:0 0 18px #fff,0 0 30px #9fd6ff;filter:brightness(1.5)}34%{box-shadow:0 0 6px rgba(159,214,255,.6);filter:none}70%{box-shadow:0 0 14px #c9e8ff;filter:brightness(1.35)}73%{filter:none}}
.cx-title.cx-r-tf-fuego{color:#2a0800;background:linear-gradient(0deg,#ff2a00,#ff7a00,#ffd54f,#ff7a00);background-size:100% 260%;border-color:#ffb300;animation:cxInfierno 1.4s linear infinite,tfFuego .5s ease-in-out infinite alternate}
@keyframes tfFuego{from{box-shadow:0 -3px 8px rgba(255,120,0,.8),0 -6px 14px rgba(255,40,0,.45)}to{box-shadow:0 -5px 12px rgba(255,180,0,.95),0 -10px 22px rgba(255,60,0,.6)}}
.cx-title.cx-r-tf-galaxia{color:#fff;border-color:#a78bfa;background:radial-gradient(circle,#fff 1px,transparent 1.5px) 0 0/14px 10px,radial-gradient(circle,rgba(255,255,255,.7) .8px,transparent 1.3px) 5px 4px/19px 13px,linear-gradient(90deg,#3b0764,#1e3a8a,#831843);animation:tfGalaxia 3s linear infinite;box-shadow:0 0 10px rgba(167,139,250,.6)}
@keyframes tfGalaxia{from{background-position:0 0,5px 4px,0 0}to{background-position:-28px 0,-33px 4px,0 0}}
.cx-title.cx-r-tf-oro{color:#2a1a00;background:linear-gradient(110deg,#b8860b 0%,#f5c542 30%,#fff6c9 50%,#f5c542 70%,#b8860b 100%);background-size:250% 100%;border-color:#fff0b3;animation:cxShineBg 2s linear infinite;box-shadow:0 0 12px rgba(245,197,66,.65)}
.cx-title.cx-r-tf-arcoiris{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);background:linear-gradient(90deg,#ff3d77,#ffbf3f,#b6ff3d,#22d3ee,#a66bff,#ff3d77);background-size:300% 100%;border-color:#fff;animation:cxRainbow 3s linear infinite;box-shadow:0 0 12px rgba(255,255,255,.35)}
.cx-title.cx-r-tf-emperador{color:#160600;background:linear-gradient(110deg,#ff5a00 0%,#ff9a3c 35%,#fff1dc 50%,#ff9a3c 65%,#ff5a00 100%);background-size:250% 100%;border-color:#ffd9b0;padding-left:22px !important;
  animation:cxShineBg 2.2s linear infinite,tfEmp 1.8s ease-in-out infinite}
.cx-title.cx-r-tf-emperador::before{content:"♛";position:absolute;left:7px;top:50%;transform:translateY(-52%);font-size:.85rem;color:#160600}
@keyframes tfEmp{0%,100%{box-shadow:0 0 10px rgba(255,107,18,.7),0 0 0 1px rgba(0,0,0,.3)}50%{box-shadow:0 0 22px rgba(255,140,40,1),0 0 40px rgba(255,107,18,.45)}}

/* ============================================================
   EFECTOS DE NOMBRE "LEYENDA" (.cx-fx-leg-*) — jugadores y equipos
   Pisan el color/degradado del nombre para que el efecto se vea completo.
   ============================================================ */
[class*="cx-fx-leg-"]{display:inline-block;position:relative;-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important}
.cx-fx-leg-sangre{background-image:linear-gradient(90deg,#7a0012,#ff1f3d,#ff6b81,#ff1f3d,#7a0012) !important;background-size:200% 100% !important;animation:cxShineBg 3s linear infinite,legSangre 1.2s ease-in-out infinite !important}
@keyframes legSangre{0%,100%{filter:drop-shadow(0 0 4px rgba(255,31,61,.55))}50%{filter:drop-shadow(0 0 10px rgba(255,31,61,1)) drop-shadow(0 4px 10px rgba(150,0,20,.9))}}
.cx-fx-leg-hielo{background-image:linear-gradient(110deg,#7fd8ff 0%,#ffffff 45%,#bfefff 55%,#5ec8ff 100%) !important;background-size:250% 100% !important;animation:cxShineBg 2.4s linear infinite,legHielo 2.4s ease-in-out infinite !important}
@keyframes legHielo{0%,100%{filter:drop-shadow(0 0 4px rgba(127,216,255,.6))}50%{filter:drop-shadow(0 0 12px rgba(220,248,255,1))}}
.cx-fx-leg-neon{background:none !important;-webkit-text-fill-color:#ffe3fb !important;animation:legNeon 3s infinite !important}
@keyframes legNeon{0%,18%,22%,25%,53%,57%,100%{filter:drop-shadow(0 0 3px #ff2bd6) drop-shadow(0 0 10px #ff2bd6) drop-shadow(0 0 22px rgba(255,43,214,.7));opacity:1}20%,24%,55%{filter:none;opacity:.5}}
.cx-fx-leg-glitch{background:none !important;-webkit-text-fill-color:#fff !important;animation:legGlitch 1.3s steps(1) infinite !important}
@keyframes legGlitch{0%,100%{transform:none;filter:drop-shadow(3px 0 0 #ff005a) drop-shadow(-3px 0 0 #00f0ff)}18%{transform:translate(-2px,1px) skewX(-10deg);filter:drop-shadow(-5px 0 0 #ff005a) drop-shadow(5px 0 0 #00f0ff)}21%{transform:none}55%{transform:translate(2px,-1px) skewX(8deg);opacity:.8;filter:drop-shadow(6px 1px 0 #ff005a) drop-shadow(-6px -1px 0 #00f0ff)}58%{transform:none;opacity:1}80%{clip-path:inset(0 0 45% 0);transform:translateX(4px)}83%{clip-path:none;transform:none}}
.cx-fx-leg-rayo{background-image:linear-gradient(90deg,#9fd6ff,#ffffff,#9fd6ff) !important;animation:legRayo 2s steps(1) infinite !important}
@keyframes legRayo{0%,100%{filter:drop-shadow(0 0 4px rgba(159,214,255,.7))}30%{filter:brightness(1.6) drop-shadow(0 0 10px #fff) drop-shadow(0 0 24px #9fd6ff)}34%{filter:drop-shadow(0 0 4px rgba(159,214,255,.7))}70%{filter:brightness(1.4) drop-shadow(0 0 14px #c9e8ff)}73%{filter:drop-shadow(0 0 4px rgba(159,214,255,.7))}}
.cx-fx-leg-fuego{background-image:linear-gradient(0deg,#ff2a00 0%,#ff7a00 30%,#ffd54f 60%,#fff6c9 80%,#ff7a00 100%) !important;background-size:100% 200% !important;animation:cxFuego2 .9s linear infinite,legFuego .4s ease-in-out infinite alternate !important}
@keyframes legFuego{from{filter:drop-shadow(0 -3px 6px rgba(255,120,0,1)) drop-shadow(0 -8px 14px rgba(255,40,0,.75))}to{filter:drop-shadow(0 -5px 9px rgba(255,190,0,1)) drop-shadow(0 -14px 22px rgba(255,60,0,.85))}}
.cx-fx-leg-galaxia{background-image:radial-gradient(circle,#fff 1px,transparent 1.6px),linear-gradient(90deg,#a78bfa,#60a5fa,#f472b6,#a78bfa) !important;background-size:18px 14px,300% 100% !important;animation:legGalaxia 4s linear infinite !important;filter:drop-shadow(0 0 8px rgba(167,139,250,.75))}
@keyframes legGalaxia{from{background-position:0 0,0 0}to{background-position:-36px 0,300% 0}}
.cx-fx-leg-oro{background-image:linear-gradient(110deg,#b8860b 0%,#f5c542 30%,#fff6c9 50%,#f5c542 70%,#b8860b 100%) !important;background-size:250% 100% !important;animation:cxShineBg 2s linear infinite !important;filter:drop-shadow(0 0 8px rgba(245,197,66,.65))}
.cx-fx-leg-arcoiris{background-image:linear-gradient(90deg,#ff3d77,#ffbf3f,#b6ff3d,#22d3ee,#a66bff,#ff3d77) !important;background-size:300% 100% !important;animation:cxRainbow 2.6s linear infinite,legArco 2.6s ease-in-out infinite !important}
@keyframes legArco{0%,100%{filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}50%{filter:drop-shadow(0 0 14px rgba(255,255,255,.7))}}
.cx-fx-leg-emperador{padding-left:1.05em;background-image:linear-gradient(110deg,#ff5a00 0%,#ff9a3c 35%,#fff1dc 50%,#ff9a3c 65%,#ff5a00 100%) !important;background-size:250% 100% !important;animation:cxShineBg 2.2s linear infinite,legEmp 1.8s ease-in-out infinite !important}
.cx-fx-leg-emperador::before{content:"♛";position:absolute;left:0;top:50%;transform:translateY(-55%);font-size:.85em;-webkit-text-fill-color:#ffb347;filter:drop-shadow(0 0 6px rgba(255,140,40,.9))}
@keyframes legEmp{0%,100%{filter:drop-shadow(0 0 6px rgba(255,107,18,.75))}50%{filter:drop-shadow(0 0 16px rgba(255,140,40,1)) drop-shadow(0 0 30px rgba(255,107,18,.5))}}