/* ==========================================================
   POLISH — tienda con vistas previas, confeti, entradas animadas
   ========================================================== */
/* ---- pestañas de la tienda ---- */
.shop-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.shop-tabs button{display:flex;align-items:center;gap:7px;padding:8px 10px;background:#0a0c1c;border:2px solid #1c2140;color:#8d99ba;font:700 14px Rajdhani,sans-serif;cursor:pointer;transition:.15s}
.shop-tabs button em{font:8px var(--px-font);font-style:normal;color:#5d6890}
.shop-tabs button:hover{border-color:var(--accent);color:#fff;transform:translateY(-2px)}
.shop-tabs button.on{background:linear-gradient(180deg,var(--accent),#4a2a9a);color:#fff;border-color:#05060f;box-shadow:0 3px 0 #2a1a5e,0 0 14px var(--accent-glow)}
.shop-tabs button.on em{color:#efe6ff}

/* ---- tarjetas de la tienda ---- */
.shop-item{--rc:#7a86a8;grid-template-columns:62px 1fr auto !important;animation:itemIn .38s calc(var(--i,0)*35ms) backwards;position:relative}
.shop-item.rarity-rare{--rc:#4aa8ff}.shop-item.rarity-epic{--rc:#b56bff}.shop-item.rarity-legendary{--rc:#ffb84a}.shop-item.rarity-mythic{--rc:#ff5a9a}
@keyframes itemIn{from{opacity:0;transform:translateY(10px) scale(.96)}}
.shop-item{border-color:color-mix(in srgb,var(--rc) 50%,#1a1f3d) !important}
.shop-item:hover{border-color:var(--rc) !important;box-shadow:0 0 18px color-mix(in srgb,var(--rc) 45%,transparent) !important}
.shop-item .shop-copy em{color:var(--rc);font:8px var(--px-font);font-style:normal;letter-spacing:1px}
.shop-item.rarity-legendary,.shop-item.rarity-mythic{box-shadow:0 0 12px color-mix(in srgb,var(--rc) 25%,transparent)}
.shop-item.rarity-mythic::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%);background-size:220% 100%;animation:shimmer 3s linear infinite}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-100% 0}}
.shop-icon{width:62px !important;height:62px !important;padding:0 !important;overflow:hidden;position:relative;
  background:radial-gradient(circle at 50% 62%,color-mix(in srgb,var(--rc) 38%,transparent),#0a0c1c 78%) !important;border:2px solid #05060f !important;box-shadow:0 0 0 1px var(--rc) !important}
.shop-icon .pv{display:block;width:100%;height:100%}
.shop-icon .pv svg{width:100%;height:100%;display:block}
.shop-icon .ph-svg *{animation:none !important}
.shop-icon .pv-pet svg{padding:7px}
.shop-item:hover .shop-icon .pv-head svg,.shop-item:hover .shop-icon .pv-body svg,.shop-item:hover .shop-icon .pv-sword svg{transform:scale(1.12);transition:transform .2s}
.pv-orb{position:relative;display:block;overflow:hidden;background:radial-gradient(circle at 50% 60%,var(--c),transparent 62%)}
.pv-orb i{position:absolute;bottom:6px;width:4px;height:4px;background:var(--c);box-shadow:0 0 6px var(--c);animation:pvRise 1.8s linear infinite}
.pv-orb i:nth-child(1){left:28%}.pv-orb i:nth-child(2){left:50%;animation-delay:-.6s}.pv-orb i:nth-child(3){left:70%;animation-delay:-1.2s}
@keyframes pvRise{from{transform:translateY(0);opacity:1}to{transform:translateY(-42px);opacity:0}}
.pv-frame{display:block;background:linear-gradient(#0c0f24,#0c0f24) padding-box,conic-gradient(from var(--fa),var(--c1),var(--c2),var(--c1)) border-box;border:5px solid transparent;animation:frameSpin 3s linear infinite}
.pv-swatch{display:block;background:linear-gradient(135deg,var(--c1) 0 50%,var(--c2) 50%)}
.pv-banner{display:block;background:radial-gradient(2px 2px at 25% 30%,#fff,transparent),radial-gradient(2px 2px at 70% 20%,#fff,transparent),linear-gradient(180deg,var(--c1),var(--c2))}

/* ---- aviso de vista previa sobre el héroe ---- */
.hero-character.trying::after{content:'VISTA PREVIA';position:absolute;top:2px;left:50%;transform:translateX(-50%);font:8px var(--px-font);padding:6px 10px;background:#05060f;border:2px solid var(--accent);color:var(--accent-2);z-index:10;animation:tryB 1s steps(2) infinite;white-space:nowrap}
@keyframes tryB{50%{border-color:#fff;color:#fff}}

/* ---- confeti pixel y onda ---- */
.px-confetti{position:fixed;z-index:120;pointer-events:none;animation:pxBurst 1.1s cubic-bezier(.2,.7,.3,1) forwards;image-rendering:pixelated;box-shadow:0 0 6px currentColor}
@keyframes pxBurst{0%{transform:translate(0,0) rotate(0);opacity:1}55%{transform:translate(var(--dx),var(--dy)) rotate(200deg);opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 120px)) rotate(380deg);opacity:0}}
.px-ring{position:fixed;z-index:119;width:20px;height:20px;margin:-10px 0 0 -10px;border:3px solid #fff;box-shadow:0 0 16px var(--accent);pointer-events:none;animation:pxRing .6s steps(6) forwards}
@keyframes pxRing{from{transform:scale(.3);opacity:1}to{transform:scale(7);opacity:0}}
.chest-item.opening{animation:chestFlash .55s steps(5)}
@keyframes chestFlash{0%,100%{filter:none}40%{filter:brightness(2.4) saturate(1.5)}}

/* ---- entradas escalonadas ---- */
.topbar{animation:topIn .5s ease-out backwards}
@keyframes topIn{from{opacity:0;transform:translateY(-16px)}}
.left-stack>.glass-panel,.right-stack>.glass-panel,.page-grid>.glass-panel{animation:panelIn .65s cubic-bezier(.2,.8,.2,1) backwards}
.left-stack>:nth-child(2),.right-stack>:nth-child(2),.page-grid>:nth-child(2){animation-delay:.08s}
.left-stack>:nth-child(3),.right-stack>:nth-child(3),.page-grid>:nth-child(3){animation-delay:.16s}
.left-stack>:nth-child(4),.right-stack>:nth-child(4){animation-delay:.24s}
.left-stack>:nth-child(5),.right-stack>:nth-child(5){animation-delay:.32s}
.left-stack>:nth-child(n+6),.right-stack>:nth-child(n+6){animation-delay:.4s}
@keyframes panelIn{from{opacity:0;transform:translateY(26px)}}
.xp-track i{transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.streak-line strong{display:inline-block;animation:numPop .7s .15s cubic-bezier(.2,1.4,.4,1) backwards}
@keyframes numPop{from{transform:scale(.4);opacity:0}}
.fx-wipe{position:fixed;inset:0;z-index:200;pointer-events:none}
@media (prefers-reduced-motion:reduce){.topbar,.glass-panel,.shop-item,.streak-line strong{animation:none !important}}