/* ===== Placas de nombre ===== */
.np{--np-h:64px;--np-accent:#ff7a2f;position:relative;display:flex;align-items:center;min-height:var(--np-h);border-radius:12px;overflow:hidden;isolation:isolate;background:#141318;border:1px solid #ffffff14;transition:transform .2s,box-shadow .2s,border-color .2s}
.np-sm{--np-h:54px;border-radius:10px}
.np-lg{--np-h:86px;border-radius:14px}
.np:not(.np-none){border-color:color-mix(in srgb,var(--np-accent) 40%,transparent);box-shadow:inset 0 0 0 1px #00000066,0 10px 30px -18px var(--np-accent)}
/* The texture is 8 heights wide and tiles horizontally: sliding one period loops forever. */
.np-art{position:absolute;top:0;bottom:0;left:0;width:calc(100% + var(--np-h) * 8);z-index:-4;background:var(--np-img) repeat-x left center/auto 100%;animation:npPan var(--np-speed) linear infinite;will-change:transform}
.np-static .np-art{width:100%;background-position:right center;animation:none}
.np-shade{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,#0b0a0ef5 0%,#0b0a0ed9 26%,#0b0a0e70 52%,#0b0a0e10 78%,transparent 100%),linear-gradient(0deg,#0006,transparent 45%)}
.np-sheen{position:absolute;top:0;bottom:0;left:0;width:320%;z-index:-2;background:linear-gradient(105deg,transparent 42%,#ffffff26 50%,transparent 58%);animation:npSheen 7s ease-in-out infinite;mix-blend-mode:screen}
.np-icon{position:absolute;right:16px;top:50%;width:calc(var(--np-h) * .64);aspect-ratio:1;transform:translateY(-50%);z-index:-1;filter:drop-shadow(0 0 6px var(--np-accent)) drop-shadow(0 0 2px #000);animation:npIcon 3.4s ease-in-out infinite}
.np-icon::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,#fff 10%,var(--np-accent) 70%);-webkit-mask:var(--np-icon) center/contain no-repeat;mask:var(--np-icon) center/contain no-repeat}
.np-content{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-width:0;padding:6px 14px}
.np:not(.np-none) .np-content{padding-right:calc(var(--np-h) * .64 + 30px)}
.np-name{font:700 calc(var(--np-h) * .3)/1 Rajdhani,Arial,sans-serif;color:#fff;letter-spacing:.5px;text-shadow:0 0 14px color-mix(in srgb,var(--np-accent) 70%,transparent),0 2px 3px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.np-text small{font-size:10px;letter-spacing:1px;color:#d9d3df;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Rarity finishes */
.np-r-legendaria,.np-r-mitica{border-width:1px}
.np-ring{position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:1;pointer-events:none;overflow:hidden;container-type:size;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}.np-ring i{--np-d:calc(100cqw + 100cqh + 4px);position:absolute;left:50%;top:50%;width:var(--np-d);height:var(--np-d);margin:calc(var(--np-d) / -2) 0 0 calc(var(--np-d) / -2);background:conic-gradient(transparent 0 70%,var(--np-accent) 85%,#fff 90%,transparent 100%);animation:npSpin 4s linear infinite}
.np-r-mitica{box-shadow:inset 0 0 0 1px #00000066,0 0 26px -6px var(--np-accent)}

@keyframes npPan{to{transform:translateX(calc(var(--np-h) * -8))}}
@keyframes npSheen{0%,35%{transform:translateX(-82.5%)}75%,100%{transform:translateX(13.75%)}}
@keyframes npIcon{0%,100%{opacity:.82;transform:translateY(-50%) scale(1)}50%{opacity:1;transform:translateY(-50%) scale(1.06)}}
@keyframes npSpin{to{transform:rotate(1turn)}}
/* ===== Movimiento: partículas y efectos por placa ===== */
/* A tiled particle layer taller than the plate; shifting it by exactly one tile loops seamlessly. */
.np-fx{--tw:150px;--th:60px;--dx:0px;--p:var(--np-accent);position:absolute;left:0;right:0;top:-70px;bottom:-70px;z-index:-2;pointer-events:none;opacity:.9;
    background-image:radial-gradient(circle at 12% 30%,var(--p) 0 1.3px,transparent 2.2px),radial-gradient(circle at 47% 72%,var(--p) 0 1px,transparent 1.9px),
    radial-gradient(circle at 78% 18%,#fff 0 .9px,transparent 1.7px),radial-gradient(circle at 63% 48%,var(--p) 0 1.5px,transparent 2.4px),radial-gradient(circle at 30% 90%,var(--p) 0 1px,transparent 1.9px);
    background-size:var(--tw) var(--th);filter:drop-shadow(0 0 3px var(--np-accent));animation:npRise 7s linear infinite,npTwinkle 2.6s ease-in-out infinite alternate}
@keyframes npRise{from{transform:translate(0,0)}to{transform:translate(var(--dx),calc(var(--th) * -1))}}
@keyframes npFall{from{transform:translate(0,calc(var(--th) * -1))}to{transform:translate(var(--dx),0)}}
@keyframes npTwinkle{from{opacity:.45}to{opacity:1}}
/* Embers */
.np-brasas .np-fx,.np-lava .np-fx{--tw:120px;--th:50px;--p:#ffb347;animation:npRise 2.8s linear infinite,npTwinkle .9s ease-in-out infinite alternate}
/* Bubbles */
.np-veneno .np-fx,.np-abismo .np-fx,.np-oceano .np-fx{--tw:170px;--th:70px;animation:npRise 6s linear infinite,npTwinkle 2s ease-in-out infinite alternate;
    background-image:radial-gradient(circle at 15% 40%,transparent 0 2.2px,var(--p) 2.5px 3.1px,transparent 3.6px),radial-gradient(circle at 55% 80%,transparent 0 1.4px,var(--p) 1.7px 2.2px,transparent 2.6px),
    radial-gradient(circle at 82% 25%,transparent 0 3px,var(--p) 3.3px 3.9px,transparent 4.4px),radial-gradient(circle at 38% 12%,var(--p) 0 1px,transparent 1.8px)}
/* Spirits and sparks drifting up slowly */
.np-fantasma .np-fx,.np-runas .np-fx,.np-circuito .np-fx{--tw:190px;--th:80px;animation:npRise 9s linear infinite,npTwinkle 1.8s ease-in-out infinite alternate}
/* Falling petals */
.np-sakura .np-fx{--tw:160px;--th:64px;--dx:160px;--p:#ffc2dc;animation:npFall 6s linear infinite,npTwinkle 3s ease-in-out infinite alternate;
    background-image:radial-gradient(ellipse 4.5px 2.6px at 18% 30%,var(--p) 60%,transparent 100%),radial-gradient(ellipse 3.6px 2.2px at 62% 70%,#ff8fc0 60%,transparent 100%),radial-gradient(ellipse 4px 2.4px at 84% 15%,#ffd6e8 60%,transparent 100%)}
/* Snow */
.np-artico .np-fx{--tw:140px;--th:60px;--dx:140px;--p:#ffffff;animation:npFall 7s linear infinite,npTwinkle 2.2s ease-in-out infinite alternate}
/* Rain and falling code */
.np-tormenta .np-fx,.np-matriz .np-fx{--tw:46px;--th:40px;opacity:.55;filter:none;animation:npFall .7s linear infinite;
    background-image:radial-gradient(ellipse .6px 6px at 30% 40%,var(--p) 60%,transparent 100%),radial-gradient(ellipse .5px 4px at 75% 85%,var(--p) 60%,transparent 100%)}
.np-tormenta .np-fx{--p:#b9ccff}
.np-matriz .np-fx{--tw:24px;--th:60px;opacity:.85;animation-duration:1.6s;filter:drop-shadow(0 0 3px #00ff66)}
/* Shooting stars */
.np-meteoros .np-fx{--tw:220px;--th:80px;--dx:-220px;animation:npFall 1.6s linear infinite}

/* Fire and lava flicker */
.np-brasas .np-art,.np-lava .np-art{animation:npPan var(--np-speed) linear infinite,npFlicker 1.7s ease-in-out infinite}
@keyframes npFlicker{0%,100%{filter:brightness(1) saturate(1)}30%{filter:brightness(1.28) saturate(1.2)}55%{filter:brightness(.92)}75%{filter:brightness(1.18)}}
/* Shifting colour */
.np-plasma .np-art,.np-holograma .np-art{animation:npPan var(--np-speed) linear infinite,npHue 9s linear infinite}
.np-nebulosa .np-art,.np-aurora .np-art{animation:npPan var(--np-speed) linear infinite,npHueSoft 6s ease-in-out infinite alternate}
@keyframes npHue{to{filter:hue-rotate(360deg)}}
@keyframes npHueSoft{from{filter:hue-rotate(-22deg) brightness(.95)}to{filter:hue-rotate(22deg) brightness(1.2)}}
/* Energy pulse */
.np-runas .np-art,.np-circuito .np-art,.np-panal .np-art,.np-veneno .np-art{animation:npPan var(--np-speed) linear infinite,npPulse 2.4s ease-in-out infinite alternate}
@keyframes npPulse{from{filter:brightness(.9)}to{filter:brightness(1.35) saturate(1.15)}}
/* Precious materials: quicker shine */
.np-imperial .np-sheen,.np-sangre .np-sheen,.np-dragon .np-sheen,.np-carbono .np-sheen{animation-duration:3.2s}
/* Static scenes breathe */
.np-static .np-art{animation:npBreath 4.5s ease-in-out infinite alternate}
@keyframes npBreath{from{filter:brightness(.92)}to{filter:brightness(1.22) saturate(1.1)}}
/* Lightning flashes */
.np-tormenta .np-shade::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 70% 0%,#e3ecff,transparent 70%);opacity:0;animation:npFlash 4.6s linear infinite}
@keyframes npFlash{0%,82%{opacity:0}83%{opacity:.85}84.5%{opacity:.1}86%{opacity:.6}89%,100%{opacity:0}}
/* Glitch: corrupted colours and a shaking name */
.np-glitch .np-art{animation:npPan var(--np-speed) linear infinite,npGlitch 2.2s steps(1) infinite}
.np-glitch .np-name{animation:npGlitchText 2.2s steps(1) infinite}
@keyframes npGlitch{0%,100%{filter:none}12%{filter:hue-rotate(90deg) contrast(1.4)}14%{filter:none}47%{filter:hue-rotate(-70deg) saturate(2)}49%{filter:none}80%{filter:invert(.15) hue-rotate(180deg)}82%{filter:none}}
@keyframes npGlitchText{0%,100%{transform:none;text-shadow:0 0 14px #ff00d4,0 2px 3px #000}12%{transform:translateX(2px);text-shadow:-2px 0 #00f0ff,2px 0 #ff00d4}14%{transform:none}47%{transform:translateX(-2px) skewX(-8deg);text-shadow:2px 0 #00f0ff,-2px 0 #ff00d4}49%{transform:none}}
/* A thousand eyes: they blink, and they glow red */
.np-ojos .np-art{animation:npPan var(--np-speed) linear infinite,npBlink 5s ease-in-out infinite}
.np-ojos .np-name{position:relative;z-index:0;text-shadow:0 2px 3px #000}.np-ojos .np-name::before,.np-ojos .np-name::after{content:attr(data-name);position:absolute;inset:0;z-index:-1;color:transparent;pointer-events:none}.np-ojos .np-name::before{text-shadow:0 0 8px #ff3b3b80;animation:npStareOut 2.6s ease-in-out infinite alternate}.np-ojos .np-name::after{text-shadow:0 0 18px #ff1a1a,0 0 4px #ff6a6a;opacity:0;animation:npStareIn 2.6s ease-in-out infinite alternate}.frames-paused .np-name::before,.frames-paused .np-name::after{animation-play-state:paused!important}
@keyframes npBlink{0%,44%,52%,100%{filter:brightness(1)}47%,49%{filter:brightness(.08)}}
@keyframes npStareIn{to{opacity:1}}@keyframes npStareOut{to{opacity:0}}

.frames-paused .np *,.frames-paused .np::after,.frames-paused .np-shade::after{animation-play-state:paused!important}

/* ===== Clasificación ===== */
.rank-list{display:flex;flex-direction:column;gap:10px}
.rank-row{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:12px;color:inherit}
.rank-row:hover{color:inherit}
.rank-row:hover .np{transform:translateX(4px);border-color:var(--np-accent)}
.rank-pos{font:700 24px/1 Rajdhani,Arial,sans-serif;color:#8e8a97;text-align:center}
.rank-pos small{display:block;font:600 9px Noto,Arial,sans-serif;letter-spacing:1.5px;margin-top:3px}
.rank-row.pos-1 .rank-pos{color:#ffd76a;text-shadow:0 0 14px #ffb800}
.rank-row.pos-2 .rank-pos{color:#e3e8ef;text-shadow:0 0 12px #9fb2c8}
.rank-row.pos-3 .rank-pos{color:#ffab76;text-shadow:0 0 12px #c8652a}
.rank-medal{font-size:26px;display:block}
.rank-avatar{--av-size:62px;flex:0 0 auto;margin:-10px -6px -10px -8px}
.np-sm .rank-avatar{--av-size:54px}
.rank-metric{margin-left:auto;text-align:right;flex:0 0 auto}
.rank-metric strong{display:block;font:700 26px/1 Rajdhani,Arial,sans-serif;color:#fff;text-shadow:0 0 12px color-mix(in srgb,var(--np-accent) 60%,transparent),0 2px 3px #000}
.rank-metric small{font-size:9px;letter-spacing:1.5px;color:#d9d3df;text-shadow:0 1px 2px #000}
.rank-row.pos-1 .np,.rank-row.pos-2 .np,.rank-row.pos-3 .np{--np-h:78px}

/* ===== Tienda / inventario / perfil ===== */
.np-stage{position:absolute;inset:0;display:flex;align-items:center;padding:0 22px;background:radial-gradient(ellipse at center,#29232e,#111015)}
.np-stage .np{width:100%}
.np-stage .arena-avatar{--av-size:66px;margin:-12px -8px -12px -10px}
.inv-art .np-stage{padding:0 12px}
.inv-art .np-stage .arena-avatar{--av-size:56px}
.profile-plate{margin-top:14px}
.home-podium{margin-bottom:10px}
.rank-row.home-podium .np{--np-h:58px}
.team-plate{display:block;color:inherit}.team-plate:hover{color:inherit}.team-plate:hover .np{transform:translateX(4px)}
.profile-plate .arena-avatar{--av-size:58px;margin:-10px -6px -10px -8px}
.plate-credits{margin-top:10px;font-size:10px;color:var(--muted)}
.plate-credits a{color:#bdb6c8;text-decoration:underline}

@media(max-width:600px){
    .rank-row{grid-template-columns:34px 1fr;gap:8px}
    .rank-pos{font-size:18px}.rank-medal{font-size:20px}
    .rank-row.pos-1 .np,.rank-row.pos-2 .np,.rank-row.pos-3 .np{--np-h:66px}
    .rank-avatar{--av-size:50px}
    .rank-metric strong{font-size:20px}
    .np-text small{display:none}
}

/* ===== Aviso global de animaciones en pausa ===== */
.motion-pill{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid #ff7a2f88;background:#17141bf2;color:#ffd9bf;font:600 12px Noto,Arial,sans-serif;box-shadow:0 10px 30px -10px #000,0 0 22px -8px #ff7a2f;backdrop-filter:blur(8px);cursor:pointer}
.motion-pill:hover{border-color:#ff7a2f;color:#fff}
.motion-pill[hidden]{display:none}
@media(max-width:600px){.motion-pill{right:12px;left:12px;bottom:12px;justify-content:center}}