/* Tienda (js/tienda/tienda.js): botón del menú, cabecera con monedero, probador 3D, regalo diario, ofertas, lotes, catálogo y ventana de compra.
 --rc = color de la rareza de cada tarjeta (datos/tienda.js, rarezas). Usa los colores del tema (--card, --ink, --line...), así se adapta a Halloween y al modo oscuro */
:root{--shop:#ff5fa2;--shopd:#d63d82;--coin:#ffc800;--coind:#e09a00}

/* --- botón del menú --- */
button.s{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(100deg,var(--shop),#a35cf0);border-color:var(--shop) #a35cf0 #7a3cc2 var(--shopd);color:#fff;overflow:hidden}
button.s:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);background-size:250% 100%;animation:shine 3.5s ease-in-out infinite}
.shmico{width:26px;height:26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 8h15l-1.2 12.2a1.6 1.6 0 0 1-1.6 1.4H7.3a1.6 1.6 0 0 1-1.6-1.4z' fill='%23fff'/%3E%3Cpath d='M8.5 10V6.8a3.5 3.5 0 0 1 7 0V10' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.shbal{display:inline-flex;align-items:center;gap:4px;padding:3px 10px 3px 6px;border-radius:12px;background:rgba(0,0,0,.22);font-size:.85rem;letter-spacing:0}
.shbal[hidden]{display:none}
button.s.gift:after{content:"";position:absolute;top:9px;right:12px;width:12px;height:12px;border-radius:50%;background:var(--coin);box-shadow:0 0 0 3px rgba(255,255,255,.85);animation:shping 1.4s ease-in-out infinite}
@keyframes shping{50%{transform:scale(1.35)}}

/* --- pantalla --- */
#shop{padding:18px 16px 26px;overflow:clip}   /* clip y no hidden: hidden rompería el probador fijo (sticky) del móvil */
#shop .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.shwallet{display:flex;align-items:center;gap:8px;padding:5px 6px 5px 10px;border-radius:16px;background:var(--card);border:2px solid var(--line);border-bottom-width:4px;font-size:1.15rem;font-weight:900}
.shwallet b{min-width:3ch;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.shwallet.guest{display:none}
.shwallet button{flex:none;width:28px;height:28px;padding:0;border-radius:50%;font-size:.85rem;border-bottom-width:3px}
.shhead{display:flex;align-items:center;gap:14px;margin:14px 0 6px}
.shhead h2{margin:0;font-size:2rem;font-weight:900;letter-spacing:-.5px}
.shhead p{margin:2px 0 0;font-size:.88rem}
.shbag{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:linear-gradient(135deg,rgba(255,95,162,.2),rgba(163,92,240,.2));animation:shfloat 3s ease-in-out infinite}
@keyframes shfloat{50%{transform:translateY(-4px) rotate(-4deg)}}
.shgrid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:12px}
.shleft{min-width:0}.shright{min-width:0}

/* probador */
.shstage{height:300px}
.shtag{position:absolute;left:12px;top:12px;z-index:2;padding:4px 10px;border-radius:10px;background:rgba(20,15,35,.6);color:#fff;font-size:.72rem;font-weight:900;letter-spacing:.4px;text-transform:uppercase}
.shtag[hidden]{display:none}
.shinfo{--rc:#8d99a6;margin-top:12px;padding:14px 16px 16px;border-radius:20px;border:2px solid var(--line);border-top:5px solid var(--rc);background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 12%,transparent),transparent 70%)}
.shmeta{display:flex;align-items:center;gap:8px;font-size:.78rem}
.shchip{padding:2px 9px;border-radius:9px;background:var(--rc);color:#fff;font-weight:900;font-size:.68rem;letter-spacing:.6px;text-transform:uppercase;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.shinfo h3{margin:6px 0 4px;font-size:1.45rem;font-weight:900}
.shbig{display:flex;align-items:center;gap:6px;font-size:1.4rem;font-weight:900}
.shbig s,.shprice s{color:var(--mute);font-size:.7em;font-weight:800}
.shlist{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.shlist li{display:flex;align-items:center;gap:8px;font-size:.88rem}
.shlist li i{width:10px;height:10px;border-radius:50%}
.shlist li span{color:var(--mute);font-size:.75rem}
.shlist li b{margin-left:auto;color:var(--green)}
.shlist li.own{opacity:.6}
.shact{display:flex;gap:8px;margin-top:14px}
.shact button{display:flex;align-items:center;justify-content:center;gap:8px}
.shbuybtn{animation:shpulse 2s ease-in-out infinite}
@keyframes shpulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--green) 25%,transparent)}}
[data-tema="halloween"] .shbuybtn{animation-name:shpulseh}
@keyframes shpulseh{50%{box-shadow:0 0 0 6px rgba(255,122,26,.25)}}
.shpoor{color:var(--mute)}
button.shcmp{flex:none;width:52px;padding:0;font-size:1.3rem;color:var(--mute)}
button.shcmp.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* regalo diario */
.shgift{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:20px;border:2px solid var(--line);border-bottom-width:5px;background:var(--card)}
.shgift.ready{border-color:var(--coin) var(--coin) var(--coind);background:linear-gradient(110deg,color-mix(in srgb,var(--coin) 18%,var(--card)),var(--card) 70%)}
.shgift.ready .shgico{animation:shwiggle 1.6s ease-in-out infinite}
@keyframes shwiggle{0%,60%,100%{transform:none}70%{transform:rotate(-12deg) scale(1.1)}80%{transform:rotate(10deg) scale(1.1)}90%{transform:rotate(-6deg)}}
.shgico{flex:none;display:grid}
.shgtx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.shgtx>b{font-size:1.05rem;font-weight:900}
.shgtx>span{color:var(--mute);font-size:.82rem}
.shgift>button{flex:none;width:auto;padding:12px 20px}
.shdays{display:flex;gap:5px;margin-top:6px;overflow-x:auto;padding:2px 0}   /* el padding de arriba deja sitio al día de hoy, que sube 2px (el scroll recortaría su borde) */
.shday{flex:1;min-width:44px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 2px;border-radius:12px;border:2px solid var(--line);font-size:.78rem}
.shday small{color:var(--mute);font-size:.6rem;font-weight:800;text-transform:uppercase}
.shday.got{opacity:.45}
.shday.got svg{filter:grayscale(1)}
.shday.now{border-color:var(--coin);background:color-mix(in srgb,var(--coin) 20%,transparent);transform:translateY(-2px)}

/* secciones */
.shsec{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:22px 0 10px;flex-wrap:wrap}
.shsec h3{margin:0;font-size:1.2rem;font-weight:900}
.shtimer{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--mute)}
.shtimer b{color:var(--ink);font-variant-numeric:tabular-nums}
.shhide{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--mute);cursor:pointer}
.shhide input{width:18px;height:18px;accent-color:var(--green)}
.shgh{margin:18px 0 8px;font-size:.74rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--mute);font-weight:800}
.shgh em{font-style:normal;margin-left:6px;padding:1px 7px;border-radius:7px;background:var(--line);color:var(--ink);letter-spacing:.5px}
.shempty{text-align:center;padding:20px}
.shtabs{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 6px}
.shtabs button{flex:none;width:auto;padding:7px 14px;font-size:.75rem;border-radius:12px;border-bottom-width:4px;color:var(--mute)}
.shtabs button.sel{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* tarjetas */
.shoffers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.shcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
button.shcard,div.shcard{--rc:#8d99a6;position:relative;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:6px 6px 10px;border-radius:18px;border:2px solid var(--line);border-bottom:5px solid color-mix(in srgb,var(--rc) 70%,#000);background:var(--card);color:var(--ink);text-transform:none;letter-spacing:0;text-align:left;overflow:hidden;min-width:0}
.shcard:hover{transform:translateY(-3px);filter:none;box-shadow:0 10px 22px -12px color-mix(in srgb,var(--rc) 80%,#000)}
.shcard:active{transform:translateY(1px)}
.shcard.sel{border-color:var(--rc);box-shadow:0 0 0 3px color-mix(in srgb,var(--rc) 45%,transparent)}
.shcard .shname{font-size:.86rem;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.shrare{padding:0 4px;font-size:.62rem;font-weight:900;letter-spacing:.7px;text-transform:uppercase;color:var(--rc)}
.shprice{display:flex;align-items:center;gap:4px;padding:0 4px;font-size:.88rem;font-weight:900}
.shprice.own{color:var(--green)}
.shcard.own{opacity:.82}
/* vista previa */
.pv{position:relative;display:block;aspect-ratio:1;border-radius:13px;overflow:hidden;background:var(--line)}
.pv .pvav{position:absolute;left:50%;bottom:-8%;width:92%;transform:translateX(-50%);display:block}
.pv .pvav.svg{bottom:4%;width:70%}
.pv .pvav.svg svg{width:100%;height:auto}
.pvfr{border:9px solid transparent;background:var(--stimg) padding-box,var(--stfr) border-box}
.pv .floaties i{--s:12px}
.pv .floaties[class*="fxb-"] i{--s:7px}
/* etiquetas */
.shbadge{position:absolute;top:10px;right:10px;z-index:2;padding:2px 8px;border-radius:9px;font-style:normal;font-size:.68rem;font-weight:900;letter-spacing:.4px;color:#fff;box-shadow:0 3px 8px -3px rgba(0,0,0,.4)}
.shbadge.off{background:var(--red);transform:rotate(4deg)}
.shbadge.new{background:var(--blue);text-transform:uppercase}
.shbadge.own{background:var(--green);width:24px;height:24px;padding:0;display:grid;place-items:center;border-radius:50%}
/* rarezas: brillo épico y legendario */
.shcard.r-epica .pv:after,.shcard.r-legendaria .pv:after,.shlote.r-legendaria .shltrio:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 62%);background-size:260% 100%;animation:shine 3.2s ease-in-out infinite;pointer-events:none}
.shcard.r-legendaria{border-color:color-mix(in srgb,var(--rc) 60%,var(--line))}
.shcard.r-legendaria:before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:conic-gradient(from var(--shang,0deg),#ffe14d,#ff9600,#fff6c4,#ffb800,#ffe14d);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:shspin 4s linear infinite;pointer-events:none}
@property --shang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes shspin{to{--shang:360deg}}
/* ofertas: más grandes */
.shcard.big .shname{font-size:1rem}
.shcard.big .shprice{font-size:1rem}

/* lotes */
.shlotes{display:grid;grid-template-columns:1fr;gap:10px}
button.shlote,div.shlote{--rc:#8d99a6;position:relative;display:flex;align-items:center;gap:12px;padding:10px;border-radius:18px;border:2px solid var(--line);border-bottom:5px solid color-mix(in srgb,var(--rc) 70%,#000);background:linear-gradient(100deg,color-mix(in srgb,var(--rc) 14%,var(--card)),var(--card) 60%);color:var(--ink);text-transform:none;letter-spacing:0;text-align:left;min-width:0}
.shlote:hover{transform:translateY(-2px);filter:none}
.shlote.sel{border-color:var(--rc);box-shadow:0 0 0 3px color-mix(in srgb,var(--rc) 45%,transparent)}
.shlote.own{opacity:.75}
.shltrio{position:relative;flex:none;display:flex;width:150px;overflow:hidden;border-radius:12px}
.shltrio .pv{flex:none;width:62px;border-radius:12px;border:3px solid var(--card);box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
.shltrio .pv+.pv{margin-left:-18px}
.shltrio .pv:nth-child(2){transform:translateY(-3px) rotate(-3deg)}
.shltx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.shltx .shname{font-size:1rem;font-weight:900}
.shltx small{color:var(--mute);font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shltx .shprice{padding:0}

/* --- ventana de compra --- */
.mcard:has(.shbuy){width:min(380px,100%);overflow:hidden}
.shbuy{position:relative}
.shbuyprev{position:relative;z-index:1;width:190px;margin:0 auto 14px;animation:shpop .55s cubic-bezier(.2,1.5,.4,1) both}
.shbuyprev .shlote{width:min(320px,80vw);margin-left:50%;transform:translateX(-50%)}
.shbuyprev:has(.shlote){width:auto}
@keyframes shpop{from{transform:scale(.6) rotate(-6deg);opacity:0}}
.shbuy h3{position:relative;z-index:1}
.shbuysum{display:grid;grid-template-columns:1fr auto;gap:6px 14px;margin:14px auto 4px;max-width:240px;font-size:.9rem;text-align:left}
.shbuysum span{color:var(--mute)}
.shbuysum b{display:flex;align-items:center;gap:4px;justify-content:flex-end}
.shbuy .row{position:relative;z-index:1}
.shbuy.ok h3{font-size:1.9rem;animation:shpop .5s cubic-bezier(.2,1.5,.4,1) both;background:linear-gradient(90deg,var(--shop),#a35cf0,var(--coin));-webkit-background-clip:text;background-clip:text;color:transparent}
.shbuy.ok .shbuyprev{animation:shwin .7s cubic-bezier(.2,1.5,.4,1) both}
.shbuyprev .own{opacity:1}   /* en la ventana de compra, la tarjeta comprada sigue opaca: si no, los rayos y el confeti de detrás se ven a través de ella */
.shbuy .lnk{all:unset;cursor:pointer;color:var(--blue);font-weight:900;text-decoration:underline;text-underline-offset:2px}
.shbuy .lnk:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
@keyframes shwin{0%{transform:scale(1)}40%{transform:scale(1.15) rotate(3deg)}100%{transform:scale(1.05)}}
.shrays{position:absolute;left:50%;top:110px;width:520px;height:520px;margin:-260px 0 0 -260px;background:repeating-conic-gradient(color-mix(in srgb,var(--coin) 30%,transparent) 0 10deg,transparent 10deg 20deg);-webkit-mask:radial-gradient(circle,#000 20%,transparent 65%);mask:radial-gradient(circle,#000 20%,transparent 65%);animation:shrot 14s linear infinite;pointer-events:none}
@keyframes shrot{to{transform:rotate(360deg)}}
.shhowto .shbag{margin:0 auto 10px}
.shways{list-style:none;padding:0;margin:14px 0;display:flex;flex-direction:column;gap:10px;text-align:left}
.shways li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--line) 45%,transparent);font-size:.88rem}
.shways svg{flex:none}

/* editor: botón "Más en la tienda" al final de fondos, marcos y efectos */
.edgrid button.edshop{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:14px;border:2px dashed var(--shop);color:var(--shop);font-size:.78rem;font-weight:900;letter-spacing:.6px;text-transform:uppercase;width:auto;height:auto;aspect-ratio:auto}
.edgrid.fx button.edshop{flex-basis:100%}

/* --- PC: probador fijo a la izquierda --- */
@media(min-width:820px){
 #shop{padding:22px 28px 30px}
 .shgrid{grid-template-columns:minmax(300px,380px) 1fr;gap:30px;align-items:start}
 .shleft{position:sticky;top:12px}
 .shstage{height:min(470px,calc(100vh - 300px));min-height:330px}
 .shcgrid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
 .shlotes{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
}
/* móvil: el probador se queda arriba al bajar por el catálogo, compacto (personaje bajo, botón en una línea) para que el catálogo tenga sitio */
@media(max-width:819px){
 .shleft{position:sticky;top:0;z-index:5;margin:0 -16px;padding:8px 16px 0;background:var(--card)}
 .shstage{height:130px}
 .shstage .dragtip{display:none}
 .shtabs{flex-wrap:wrap}
 .shinfo{margin-top:8px;padding:10px 12px 12px;display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:center}
 .shinfo h3{margin:2px 0 0;font-size:1.1rem}
 .shinfo .shmeta,.shinfo h3,.shinfo .shlist{grid-column:1}
 .shinfo .shlist{display:none}
 .shinfo .shbig{grid-column:2;grid-row:1/3;font-size:1.15rem}
 .shinfo .shact{grid-column:1/-1;margin-top:8px}
 .shinfo .shact button{padding:9px 10px;font-size:.8rem}
 .shoffers{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .shcard.big .shname{font-size:.82rem}
 .shcgrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
 .shgift{flex-wrap:wrap}
 .shgift>button{width:100%}
 .shltrio{width:118px}.shltrio .pv{width:50px}
}
@media(prefers-reduced-motion:reduce){button.s:before,.shbag,.shgift.ready .shgico,.shbuybtn,.shcard.r-legendaria:before,.shrays,.pv:after,button.s.gift:after{animation:none}}