/* ==========================================================
   ICONOS PIXEL ANIMADOS — llamas, cofres, logros, celebración
   ========================================================== */
.pxi{display:block;width:1em;height:1em;overflow:visible;image-rendering:pixelated;flex:none}
.pxi g{transform-box:fill-box}

/* llama: 3 cuadros */
.pxi-flame{width:.9em;height:1.15em;filter:drop-shadow(0 0 5px rgba(79,184,255,.7))}
.pxi-flame .pxi-fr{opacity:0}
.pxi-flame .f0{animation:pxF0 .5s steps(1) infinite}
.pxi-flame .f1{animation:pxF1 .5s steps(1) infinite}
.pxi-flame .f2{animation:pxF2 .5s steps(1) infinite}
@keyframes pxF0{0%{opacity:1}33.4%,100%{opacity:0}}
@keyframes pxF1{0%,33.3%{opacity:0}33.4%{opacity:1}66.6%,100%{opacity:0}}
@keyframes pxF2{0%,66.5%{opacity:0}66.6%,100%{opacity:1}}
.blue-fire{display:grid !important;place-items:center;filter:none !important;animation:none !important;width:46px;height:56px;font-size:46px !important}
.blue-fire .pxi-flame{width:100%;height:100%;animation:flameBob 1.4s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(79,184,255,.85)) drop-shadow(0 0 22px rgba(79,184,255,.4))}
@keyframes flameBob{50%{transform:translateY(-3px) scale(1.04)}}
.day-fire{filter:none !important;animation:none !important;font-size:20px !important;line-height:0;height:22px}
.day-cell .pxi-flame{width:19px;height:24px}.day-fire{height:26px !important}
.day-cell.event .pxi-flame{filter:drop-shadow(0 0 5px rgba(255,90,60,.8))}
.danger-pixel-btn .pxi-flame{font-size:20px;filter:drop-shadow(0 0 5px rgba(255,120,60,.9))}
.danger-pixel-btn > span{display:grid;place-items:center}
.rank-score,.ranking-stat strong,.podium-card strong,.stat-box strong{display:inline-flex;align-items:center;gap:6px}
.rank-score .pxi,.ranking-stat .pxi,.podium-card strong .pxi,.stat-box .pxi{width:14px;height:17px;font-size:14px}
.podium-card strong{justify-content:center}
.ranking-tabs button{display:inline-flex;align-items:center;gap:8px}
.ranking-tabs button .pxi{width:16px;height:18px;font-size:16px}

/* cofres */
.chest-icon{position:relative;display:grid !important;place-items:center;height:62px;font-size:56px !important;filter:none !important}
.chest-icon .pxi-chest{width:62px;height:56px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.45)) drop-shadow(0 0 8px color-mix(in srgb,var(--rc,#888) 55%,transparent))}
.chest-item{--rc:#a05a28}
.chest-item.rarity-rare{--rc:#4aa8ff}.chest-item.rarity-epic{--rc:#b56bff}.chest-item.rarity-legendary{--rc:#ffcf3a}.chest-item.rarity-mythic{--rc:#ff5a9a}
.chest-item:disabled:not(.claimed) .pxi-chest{filter:grayscale(.85) brightness(.6) drop-shadow(0 4px 0 rgba(0,0,0,.45))}
.chest-item.unlocked:not(.claimed) .pxi-chest.closed{animation:chestWiggle 2.4s ease-in-out infinite}
.chest-item.unlocked:not(.claimed) .pxi-clid{animation:lidPeek 2.4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes chestWiggle{0%,60%,100%{transform:rotate(0)}66%{transform:rotate(-4deg) translateY(-2px)}72%{transform:rotate(4deg)}78%{transform:rotate(-3deg)}84%{transform:rotate(0)}}
@keyframes lidPeek{0%,60%,100%{transform:translateY(0)}72%{transform:translateY(-3px)}}
.chest-item.unlocked:not(.claimed)::before{content:'';position:absolute;left:50%;top:26px;width:70px;height:70px;margin-left:-35px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--rc) 45%,transparent),transparent 70%);animation:chestAura 1.8s ease-in-out infinite;pointer-events:none}
@keyframes chestAura{50%{transform:scale(1.25);opacity:.55}}
.chest-item.claimed .pxi-chest{filter:grayscale(.35) brightness(.8) drop-shadow(0 4px 0 rgba(0,0,0,.45))}
.chest-icon.is-open .pxi-clid{animation:lidOpen .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes lidOpen{from{transform:translateY(8px) scaleY(.4)}to{transform:none}}
.chest-icon.is-open .pxi-chest{animation:chestShake .35s steps(4)}
@keyframes chestShake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.pxi-beam{position:absolute;left:50%;bottom:22px;width:34px;height:70px;margin-left:-17px;background:linear-gradient(0deg,rgba(255,240,170,.9),rgba(255,240,170,0));clip-path:polygon(18% 100%,82% 100%,100% 0,0 0);animation:beamUp 1.1s ease-out both;filter:blur(1.5px);pointer-events:none;z-index:2;mix-blend-mode:screen}
@keyframes beamUp{from{opacity:0;transform:scaleY(.1);transform-origin:50% 100%}30%{opacity:1}to{opacity:0;transform:scaleY(1.2);transform-origin:50% 100%}}
.pxi-loot{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;z-index:3;animation:lootPop 1.2s var(--ld) cubic-bezier(.2,.8,.3,1) both;pointer-events:none;filter:drop-shadow(0 0 6px rgba(255,230,120,.9))}
.pxi-loot .pxi{width:100%;height:100%}
@keyframes lootPop{0%{transform:translate(0,0) scale(.3);opacity:0}15%{opacity:1}55%{transform:translate(var(--lx),var(--ly)) scale(1.1)}100%{transform:translate(calc(var(--lx)*1.1),calc(var(--ly) + 50px)) scale(.9);opacity:0}}
.pxi-glowring{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:3px solid var(--gc);box-shadow:0 0 16px var(--gc);animation:pxRing .7s steps(7) both;pointer-events:none;z-index:1}

/* logros */
.achievement-item > .pxi-ach,.profile-achievement > .pxi-ach{display:grid;place-items:center;width:42px;height:42px;background:radial-gradient(circle,rgba(156,108,255,.22),transparent 70%);font-size:30px}
.pxi-ach .pxi{width:30px;height:30px;filter:drop-shadow(0 0 5px rgba(255,220,120,.45))}
.achievement-item.unlocked .pxi-ach .pxi{animation:achBob 2.6s ease-in-out infinite}
@keyframes achBob{50%{transform:translateY(-3px) rotate(-4deg)}}
.pxi-ach.locked .pxi{filter:grayscale(1) brightness(.45) contrast(1.1);animation:none}

/* celebración de check-in */
.pxi-celebrate{position:fixed;inset:0;z-index:205;display:grid;place-items:center;background:radial-gradient(circle,rgba(8,10,30,.55),rgba(3,4,14,.88));animation:celIn .35s ease-out;cursor:pointer}
.pxi-celebrate.out{animation:celOut .5s ease-in forwards}
@keyframes celIn{from{opacity:0}}@keyframes celOut{to{opacity:0;transform:scale(1.06)}}
.pxi-cel-rays{position:absolute;left:50%;top:50%;width:900px;height:900px;margin:-450px 0 0 -450px;background:repeating-conic-gradient(from 0deg,rgba(120,190,255,.2) 0 7deg,transparent 7deg 22deg);-webkit-mask:radial-gradient(circle,#000,transparent 62%);mask:radial-gradient(circle,#000,transparent 62%);animation:raysSpin 14s linear infinite}
@keyframes raysSpin{to{transform:rotate(360deg)}}
.pxi-cel-card{position:relative;text-align:center;animation:celPop .7s cubic-bezier(.2,1.5,.4,1)}
@keyframes celPop{from{transform:scale(.3) translateY(60px);opacity:0}}
.pxi-cel-flame{width:120px;height:150px;margin:0 auto -6px;font-size:120px}
.pxi-cel-flame .pxi-flame{width:100%;height:100%;filter:drop-shadow(0 0 16px #4fb8ff) drop-shadow(0 0 40px rgba(79,184,255,.7));animation:flameBob 1s ease-in-out infinite}
.pxi-cel-card p{margin:0 0 10px;font:11px var(--px-font);color:#c4f6ff;letter-spacing:2px;text-shadow:0 0 14px #4fb8ff}
.pxi-cel-card strong{display:block;font:84px/1 var(--px-font);color:#fff;text-shadow:6px 6px 0 #1f2a8a,0 0 34px rgba(99,223,255,.8);animation:celNum .6s .25s cubic-bezier(.2,1.6,.4,1) backwards}
@keyframes celNum{from{transform:scale(2.4);opacity:0}}
.pxi-cel-card small{display:block;margin-top:14px;font:10px var(--px-font);color:#a9b8e8;letter-spacing:3px}

@media (prefers-reduced-motion:reduce){.pxi *,.pxi-celebrate *,.chest-item::before{animation:none !important}.pxi-flame .f0{opacity:1}}