/* ===== Pase de Temporada · Noche de Brujas ===== */

/* ---------- botón de arriba (al lado de Novedades) ---------- */
.hud-pass { left: 380px; border-color: #5a2a86; background: linear-gradient(#ffe7b0, #ff9a3a); color: #4a1a66; font-size: 18px; overflow: visible; }
.hud-pass img { width: 64px; height: 62px; object-fit: contain; margin-top: -6px; filter: drop-shadow(0 0 6px rgba(255,160,40,.8)); }
.hud-pass span { margin-top: -4px; }
/* el icono no se mueve: solo un destello cada tanto sobre la corona */
.hud-pass::after { content: ''; position: absolute; left: 60px; top: 6px; width: 26px; height: 26px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff 0 12%, transparent 13%), linear-gradient(0deg, transparent 44%, #fff 46% 54%, transparent 56%), linear-gradient(90deg, transparent 44%, #fff 46% 54%, transparent 56%);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%);
  filter: drop-shadow(0 0 4px #ffe48a) drop-shadow(0 0 8px #ffb03a); animation: passGlint 4.5s ease-in-out infinite; }
@keyframes passGlint { 0%, 78%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 86% { opacity: 1; transform: scale(1.1) rotate(45deg); } 94% { opacity: 0; transform: scale(.3) rotate(90deg); } }
@keyframes passBob { 50% { transform: translateY(-4px) rotate(-4deg); } }
.pass-badge { position: absolute; right: -10px; top: -10px; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 17px; background: #e2363b; color: #fff;
  font: 700 20px/30px var(--font); font-style: normal; border: 3px solid #fff; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.pass-badge[hidden] { display: none; }
@keyframes passPing { 50% { transform: scale(1.15); } }
html.touch .hud-pass { left: 392px; }
/* el buzón de Silver va a la derecha del pase */
.hud-mail { left: 498px !important; }
html.touch .hud-mail { left: 522px !important; }

/* ---------- panel ---------- */
#passPanel .sp-box { position: relative; width: 1700px; height: 990px; border-radius: 34px; border: 6px solid #2b1640; overflow: hidden;
  background: radial-gradient(circle at 80% 0%, #3d1f5c, transparent 55%), linear-gradient(170deg, #2a1640, #170c26 60%, #0f0819); color: #fff; font-family: var(--font);
  box-shadow: 0 24px 0 rgba(0,0,0,.3), 0 0 60px rgba(160,80,255,.35); display: flex; flex-direction: column; }
#passPanel .sp-box.prem { border-color: #f2b51c; box-shadow: 0 24px 0 rgba(0,0,0,.3), 0 0 70px rgba(255,180,60,.45); }
#passPanel .x-btn { right: 18px; top: 18px; z-index: 5; }

.sp-head { position: relative; height: 210px; flex: none; background-size: cover; background-position: center; display: flex; align-items: center; gap: 40px; padding: 0 130px 0 50px; }
.sp-head::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,8,34,.85), rgba(20,8,34,.2) 60%, rgba(20,8,34,.5)); pointer-events: none; }
.sp-head > * { position: relative; z-index: 1; }
.sp-title { display: flex; flex-direction: column; }
.sp-title small { font: 600 24px var(--font); color: #ffb35c; letter-spacing: 1px; }
.sp-title b { font: 700 74px/1 var(--font); text-shadow: 0 5px 0 #5a1f86, 0 0 30px rgba(255,140,40,.6); background: linear-gradient(#fff3c4, #ffb03a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-left { margin-top: 8px; font: 600 22px var(--font); color: #e8d6ff; }
.sp-lvl { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.sp-lvl-n { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: radial-gradient(circle at 35% 30%, #ffd77a, #ff8a1f 60%, #b5420c);
  border: 6px solid #2b1640; box-shadow: 0 0 0 4px #ffb03a, 0 0 30px rgba(255,140,40,.8); }
.sp-lvl-n small { font: 600 18px/1 var(--font); color: #5a1f00; }
.sp-lvl-n b { font: 700 56px/1 var(--font); color: #fff; text-shadow: 0 3px 0 #a33a00; }
.sp-xp { width: 380px; }
.sp-xp-bar { height: 30px; border-radius: 15px; background: rgba(0,0,0,.45); border: 3px solid #ffb03a; overflow: hidden; }
.sp-xp-bar i { display: block; height: 100%; border-radius: 12px; background: linear-gradient(90deg, #a24bff, #ff7a1a, #ffd23a); box-shadow: 0 0 14px #ff9a3a; transition: width .6s; position: relative; }
.sp-xp-bar i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%) -100% 0 / 200% 100% no-repeat; animation: spShine 2.4s linear infinite; }
@keyframes spShine { to { background-position: 200% 0; } }
.sp-xp small { display: block; margin-top: 6px; font: 600 20px var(--font); color: #ffe2b8; }
.sp-get { padding: 14px 26px; border-radius: 22px; border: 5px solid #2b1640; background: linear-gradient(#ffe48a, #ffab2e); color: #4a1a00; cursor: pointer;
  font: 700 28px/1.05 var(--font); box-shadow: 0 6px 0 #8a4a00, 0 0 24px rgba(255,190,60,.7); display: flex; flex-direction: column; align-items: center; animation: passPing 1.8s ease-in-out infinite; }
.sp-get small { font: 600 17px var(--font); }
.sp-prem-on { padding: 12px 24px; border-radius: 20px; background: linear-gradient(#fff3c4, #f2b51c); color: #4a2a00; font: 700 30px/1 var(--font); border: 5px solid #2b1640; display: flex; flex-direction: column; align-items: center; }
.sp-prem-on small { font: 600 16px var(--font); }

.sp-tabs { display: flex; gap: 10px; padding: 14px 40px 0; flex: none; }
.sp-tabs button { position: relative; padding: 12px 28px; border-radius: 18px 18px 0 0; border: 0; background: rgba(255,255,255,.08); color: #d9c6ff; font: 700 26px var(--font); cursor: pointer; }
.sp-tabs button:hover { background: rgba(255,255,255,.16); }
.sp-tabs button.on { background: rgba(255,255,255,.18); color: #fff; box-shadow: inset 0 -5px 0 #ff9a3a; }
.sp-tabs button i { position: absolute; top: -8px; right: -8px; min-width: 30px; height: 30px; border-radius: 15px; background: #e2363b; font: 700 18px/30px var(--font); font-style: normal; }
.sp-body { flex: 1; min-height: 0; background: rgba(255,255,255,.06); }

/* ---------- recompensas ---------- */
.sp-rewards { display: flex; height: 100%; }
.sp-show { width: 380px; flex: none; display: flex; flex-direction: column; align-items: center; padding: 18px 10px; text-align: center;
  background: radial-gradient(ellipse at 50% 45%, rgba(255,140,40,.35), transparent 60%), radial-gradient(ellipse at 50% 60%, rgba(140,60,255,.35), transparent 70%); }
.sp-show-tag { padding: 6px 18px; border-radius: 14px; background: linear-gradient(#ffe48a, #ff9a2e); color: #4a1a00; font: 700 20px var(--font); }
.sp-show-stage { position: relative; width: 360px; height: 410px; }
.sp-show-bear { position: absolute; left: 40px; top: 30px; width: 215px; height: 310px; }
.sp-show-bear svg { width: 100%; height: 100%; overflow: visible; }
.sp-show-pet { position: absolute; right: 26px; bottom: 20px; }
.sp-show b { font: 700 32px var(--font); color: #ffd27a; text-shadow: 0 3px 0 #5a1f86; }
.sp-show small { font: 600 20px var(--font); color: #e8d6ff; }

.sp-trackwrap { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.sp-rows { position: absolute; left: 0; top: 0; bottom: 0; width: 52px; padding: 86px 0 30px; display: flex; flex-direction: column; justify-content: space-around; z-index: 2;
  background: linear-gradient(90deg, #22123a 75%, transparent); box-sizing: border-box; }
.sp-rows span { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 22px var(--font); color: #cfe8ff; text-align: center; }
.sp-rows span.p { color: #ffd27a; }
.sp-track { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; height: 100%; padding: 20px 40px 20px 60px; align-items: center; cursor: grab; scrollbar-width: thin; scrollbar-color: #ff9a3a transparent; overscroll-behavior: contain; touch-action: pan-x; }
.sp-track.dragging { cursor: grabbing; user-select: none; }
.sp-track.dragging .sp-cell { pointer-events: none; }
.sp-track::-webkit-scrollbar { height: 12px; }
.sp-track::-webkit-scrollbar-thumb { background: #ff9a3a; border-radius: 6px; }
.sp-col { flex: none; width: 158px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; position: relative; }
.sp-col::before { content: ''; position: absolute; left: -12px; right: 0; top: 23px; height: 6px; background: rgba(255,255,255,.15); z-index: 0; }
.sp-col.reached::before { background: linear-gradient(90deg, #ff9a3a, #ffd23a); box-shadow: 0 0 10px #ff9a3a; }
.sp-num { position: relative; z-index: 1; align-self: center; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #3a2456; border: 4px solid #6a4a8a; font: 700 24px var(--font); }
.sp-col.reached .sp-num { background: linear-gradient(#ffd77a, #ff8a1f); border-color: #fff3c4; color: #4a1a00; }
.sp-col.next .sp-num { animation: passPing 1.2s ease-in-out infinite; border-color: #ffb03a; }
.sp-col.final .sp-num { width: 62px; height: 62px; font-size: 26px; background: linear-gradient(#fff3c4, #f2b51c); color: #4a1a00; box-shadow: 0 0 20px #ffb03a; }

.sp-cell { position: relative; height: 196px; border-radius: 22px; border: 4px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; transition: transform .15s, box-shadow .15s; font-family: var(--font); }
.sp-cell:hover { transform: translateY(-4px); }
.sp-cell.empty { visibility: hidden; cursor: default; }
.sp-cell.p { height: 236px; border-color: rgba(255,200,90,.5); background: linear-gradient(170deg, rgba(255,190,80,.22), rgba(140,60,255,.2)); }
.sp-cell.p.star { border-color: #ffd23a; box-shadow: 0 0 22px rgba(255,190,60,.55); }
.sp-cell.p.star::before { content: '✨'; position: absolute; left: 8px; top: 6px; font-size: 22px; animation: passPing 1.6s ease-in-out infinite; }
.sp-art { height: 110px; display: grid; place-items: center; }
.sp-art img { max-width: 120px; max-height: 110px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.sp-art img.sp-card { height: 108px; border-radius: 10px; border: 3px solid #fff; }
.sp-cell.p .sp-art { height: 140px; }
.sp-cell.p .sp-art img { max-width: 140px; max-height: 140px; }
.sp-art .coin.big { font-size: 64px; }
.sp-candy, .sp-chest { font-size: 64px; }
.sp-amt { font: 700 20px/1.05 var(--font); text-align: center; color: #fff3c4; max-width: 140px; }
.sp-st { position: absolute; bottom: -12px; padding: 2px 12px; border-radius: 12px; background: #3fae3b; font: 700 18px var(--font); border: 3px solid #fff; }
.sp-cell.future { opacity: .55; }
.sp-cell.locked { filter: saturate(.7); }
.sp-cell.locked .sp-st { background: #8a5ad8; }
.sp-cell.got { opacity: .65; border-color: #3fae3b; }
.sp-cell.can { border-color: #ffd23a; background: linear-gradient(170deg, rgba(255,210,80,.5), rgba(255,120,40,.35)); animation: spGlow 1s ease-in-out infinite alternate; }
.sp-cell.can .sp-st.claim { background: linear-gradient(#ffe48a, #ff9a2e); color: #4a1a00; animation: passPing 1s ease-in-out infinite; }
@keyframes spGlow { from { box-shadow: 0 0 10px rgba(255,190,60,.5); } to { box-shadow: 0 0 30px rgba(255,190,60,.95); } }
.sp-arrow { position: absolute; top: 50%; z-index: 3; width: 60px; height: 60px; margin-top: -30px; border-radius: 50%; border: 4px solid #2b1640; background: linear-gradient(#ffe48a, #ffab2e); color: #4a1a00; font: 700 26px var(--font); cursor: pointer; }
.sp-arrow.l { left: 50px; } .sp-arrow.r { right: 14px; }

/* ---------- misiones ---------- */
.sp-missions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 30px; height: 100%; padding: 26px 40px; }
.sp-mcol { min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.sp-mcol h3 { margin: 0 0 4px; font: 700 32px var(--font); color: #ffd27a; display: flex; align-items: baseline; gap: 12px; }
.sp-mcol h3 small { font: 600 18px var(--font); color: #d9c6ff; }
.sp-mlist { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #ff9a3a transparent; }
.sp-mis { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 20px; background: rgba(255,255,255,.1); border: 3px solid rgba(255,255,255,.12); }
.sp-mis.done { border-color: #3fae3b; background: rgba(63,174,59,.18); }
.sp-mis-ic { font-size: 44px; width: 60px; text-align: center; }
.sp-mis-txt { flex: 1; min-width: 0; }
.sp-mis-txt b { font: 700 23px var(--font); }
.sp-mis-bar { height: 16px; margin: 8px 0 4px; border-radius: 8px; background: rgba(0,0,0,.4); overflow: hidden; }
.sp-mis-bar i { display: block; height: 100%; background: linear-gradient(90deg, #a24bff, #ff9a3a); border-radius: 8px; }
.sp-mis.done .sp-mis-bar i { background: #3fae3b; }
.sp-mis-txt small { font: 600 17px var(--font); color: #d9c6ff; }
.sp-mis-xp { padding: 8px 14px; border-radius: 14px; background: linear-gradient(#ffe48a, #ffab2e); color: #4a1a00; font: 700 20px var(--font); white-space: nowrap; }
.sp-mis.done .sp-mis-xp { background: #3fae3b; color: #fff; }
.sp-tip { margin: 6px 0 0; font: 500 19px/1.35 var(--font); color: #e8d6ff; }

/* ---------- premium ---------- */
.sp-premium { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; height: 100%; padding: 28px 50px; overflow-y: auto; }
.sp-pcol h3 { margin: 0 0 10px; font: 700 38px var(--font); color: #ffd27a; }
.sp-pcol h4 { margin: 0 0 10px; font: 700 26px var(--font); color: #ffd27a; }
.sp-pcol p, .sp-pcol li { font: 500 22px/1.4 var(--font); color: #f2e8ff; }
.sp-pcol ul { padding-left: 4px; list-style: none; margin: 10px 0 18px; }
.sp-pcol li { margin: 6px 0; }
.sp-support { display: inline-block; text-decoration: none; background: linear-gradient(#8aa0ff, #5865f2) !important; color: #fff !important; }
.sp-how { display: block; margin-top: 10px; font: 500 18px/1.3 var(--font); color: #d9c6ff; }
.sp-thanks { color: #9cf09a !important; }
.sp-redeem { display: flex; gap: 10px; }
.sp-redeem input { flex: 1; min-width: 0; padding: 12px 16px; border-radius: 14px; border: 3px solid #ff9a3a; font: 600 20px var(--font); background: #fff; color: #2b1640; }
.sp-pshow { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin: 26px 0; }
.sp-pshow img { height: 150px; filter: drop-shadow(0 0 16px rgba(255,150,40,.6)); animation: passBob 2.6s ease-in-out infinite; }
.sp-pshow img:nth-child(2) { height: 170px; animation-delay: -.8s; }
.sp-pshow img:nth-child(3) { height: 120px; animation-delay: -1.6s; }
.sp-gm { margin-top: 10px; padding: 16px; border-radius: 18px; border: 3px dashed #8a5ad8; background: rgba(0,0,0,.2); }
.sp-gm textarea { width: 100%; margin-top: 10px; border-radius: 12px; font: 500 14px monospace; padding: 8px; box-sizing: border-box; }

/* ---------- brillo al reclamar y final ---------- */
.sp-burst { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 10; }
.sp-burst i { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; background-size: cover; animation: spBurst .9s ease-out forwards; }
@keyframes spBurst { to { transform: rotate(var(--a)) translateX(var(--d)) scale(.3); opacity: 0; } }
.sp-finale { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; background: radial-gradient(circle, rgba(60,20,90,.75), rgba(10,4,20,.92)); animation: spFade .4s ease-out; }
@keyframes spFade { from { opacity: 0; } }
.sp-fin-box { text-align: center; color: #fff; font-family: var(--font); animation: spPop .6s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes spPop { from { transform: scale(.4); } }
.sp-fin-bear { width: 420px; height: 560px; margin: 0 auto; }
.sp-fin-bear svg { width: 100%; height: 100%; overflow: visible; }
.sp-fin-box h2 { margin: 0; font: 700 64px var(--font); color: #ffd27a; text-shadow: 0 5px 0 #5a1f86, 0 0 30px #ff9a3a; }
.sp-fin-box p { font: 500 26px var(--font); }

/* =====================================================================
   Efectos en el oso
   ===================================================================== */
.kw-wing { animation: kwFlap 1.7s ease-in-out infinite; }
.kw-wing.far { opacity: .75; filter: brightness(.7); animation-delay: -.3s; }
@keyframes kwFlap { 0%, 100% { transform: rotate(5deg); } 50% { transform: rotate(-13deg); } }
.kw-glow { animation: kwGlow 2.2s ease-in-out infinite alternate; }
@keyframes kwGlow { from { opacity: .7; } to { opacity: 1; } }
.kw-ember { animation: kwEmber 2.8s ease-out infinite; opacity: 0; }
@keyframes kwEmber { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(14px, -440px); opacity: 0; } }
.kw-orbit { animation: kwOrbit 9s linear infinite; }
.kw-orbit.o2 { animation-delay: -3s; }
.kw-orbit.o3 { animation-delay: -6s; }
@keyframes kwOrbit {
  0%    { transform: translate(479px, 420px) scale(.85); opacity: .85; }
  12.5% { transform: translate(400px, 476px) scale(1.03); opacity: .95; }
  25%   { transform: translate(209px, 500px) scale(1.12); opacity: 1; }
  37.5% { transform: translate(18px, 476px) scale(1.03); opacity: .95; }
  50%   { transform: translate(-61px, 420px) scale(.85); opacity: .85; }
  62.5% { transform: translate(18px, 364px) scale(.67); opacity: .5; }
  75%   { transform: translate(209px, 340px) scale(.6); opacity: .4; }
  87.5% { transform: translate(400px, 364px) scale(.67); opacity: .5; }
  100%  { transform: translate(479px, 420px) scale(.85); opacity: .85; }
}
.gb-float { animation: gbFloat 2.6s ease-in-out infinite; }
@keyframes gbFloat { 50% { transform: translate(-6px, -18px); } }

/* =====================================================================
   Mascotas: sombrero de bruja y llamas espectrales
   ===================================================================== */
.pet-hat img { width: 100%; display: block; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.pet-hat.pc-witch { transform: translate(-50%, -34%); }
.pet-hat.pc-witch.pcs-murcielago { transform: translate(-50%, -78%) scale(1.15); }
.pet-hat.pc-witch.pcs-fantasma { transform: translate(-50%, -82%); }
.pet-hat.pc-pumpkin { transform: translate(-50%, -30%) scale(.8); }
.pet-hat.pc-pumpkin.pcs-murcielago { transform: translate(-50%, -70%) scale(.95); }
.pet-hat.pc-pumpkin.pcs-fantasma { transform: translate(-50%, -75%) scale(.8); }
.sp-show-free { margin-top: 12px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 16px; background: rgba(63,174,59,.2); border: 2px solid #5fcf5a; text-align: left; }
.sp-show-free img { width: 52px; }
.sp-show-free span { font: 600 16px/1.2 var(--font); color: #e8ffe6; }
.sp-show-free b { font-size: 16px; color: #9cf09a; text-shadow: none; }
.sp-cell.f.star { border-color: #5fcf5a; box-shadow: 0 0 20px rgba(95,207,90,.55); }
.sp-cell.f.star::before { content: '✨'; position: absolute; left: 8px; top: 6px; font-size: 20px; }
.rp-float { animation-duration: 3s; }
.rp-ember { animation-name: rpEmber; animation-duration: 2.6s; }
@keyframes rpEmber { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-10px, -170px); opacity: 0; } }
.pet-follower.flip .pet-hatbox img, .pet-follower.flip .pet-aurabox img { transform: none; }
.pet-pic-wrap, .pm-cos-pet, .card-pet, .sp-pet { isolation: isolate; }
/* cuadrada y según la altura de la mascota (las anchas no la estiran) */
.pet-aurabox { position: absolute; left: 50%; bottom: -26%; height: 185%; aspect-ratio: 1 / 1; transform: translateX(-50%); z-index: -1; pointer-events: none; }
.pet-follower .pet-aurabox img.pa-fire, .pet-aurabox img.pa-fire { position: absolute; inset: 0; width: 100%; height: 100%; animation: paFlick 1.3s ease-in-out infinite alternate; transform-origin: 50% 75%; }
@keyframes paFlick { from { transform: scale(.96, .92); opacity: .85; filter: hue-rotate(0deg); } to { transform: scale(1.04, 1.06); opacity: 1; filter: hue-rotate(-14deg); } }
.pa-w { position: absolute; left: 50%; top: 55%; width: 13%; aspect-ratio: 1; background-size: cover; animation: paOrbit 3.2s linear infinite; }
.pa-w.w2 { animation-delay: -1.07s; width: 10%; }
.pa-w.w3 { animation-delay: -2.13s; }
@keyframes paOrbit {
  0%   { transform: translate(-50%, -50%) translate(260%, 0) scale(1); opacity: 1; }
  25%  { transform: translate(-50%, -50%) translate(0, 120%) scale(1.2); opacity: 1; }
  50%  { transform: translate(-50%, -50%) translate(-260%, 0) scale(1); opacity: 1; }
  75%  { transform: translate(-50%, -50%) translate(0, -160%) scale(.6); opacity: .5; }
  100% { transform: translate(-50%, -50%) translate(260%, 0) scale(1); opacity: 1; }
}
.sp-pet img:first-child { width: 100%; height: 100%; display: block; }

/* ---------- miniaturas de las casillas del pase ---------- */
.sp-bear { display: block; width: 130px; height: 120px; border-radius: 16px; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.35), transparent 70%); }
.sp-bear { overflow: hidden; }
.sp-bear svg { width: 100%; height: 100%; overflow: hidden; }
.sp-cell.p .sp-bear { width: 140px; height: 136px; }
.sp-frame { display: block; width: 84px; height: 108px; border-radius: 14px; border: 5px solid; box-shadow: inset 0 0 0 4px rgba(255,255,255,.3); }
.sp-pc { display: grid; place-items: center; width: 130px; height: 110px; }
.sp-pc img { max-width: 120px; max-height: 100px; }
.sp-price { display: inline-block; margin: 0 0 8px !important; padding: 6px 18px; border-radius: 16px; background: linear-gradient(#fff3c4, #f2b51c); color: #4a2a00 !important; font: 700 26px var(--font) !important; }
.sp-price b { font-size: 32px; }

/* ---------- mascotas: más cosméticos ---------- */
.pet-hat.pc-crown { transform: translate(-50%, -38%) scale(.95); }
.pet-hat.pc-crown.pcs-murcielago { transform: translate(-50%, -80%) scale(1.1); }
.pet-hat.pc-crown.pcs-fantasma { transform: translate(-50%, -82%) scale(.9); }
.pet-hat.pc-bow { transform: translate(-50%, -10%) scale(1.1); }
.pet-hat.pc-bow.pcs-murcielago { transform: translate(-50%, -20%) scale(1.7); }

/* =====================================================================
   Marcos de tarjeta del pase
   ===================================================================== */
/* Telaraña (gratis) */
#card.frame-frmWeb, .mini-card.frame-frmWeb {
  --cf-bg: radial-gradient(circle at 50% 0, rgba(200,180,255,.3), transparent 55%), linear-gradient(165deg, #3a3550, #262238 55%, #15121f);
  --cf-bd: #cfc6ee; --cf-text: #efeaff; --cf-in: rgba(220,210,255,.35);
  --cf-inv: linear-gradient(160deg, #34304a, #1d1a2a); --cf-arrow: linear-gradient(90deg, #2a2640, #45406a);
  --cf-flake: #8a7ac8; --cf-flake-bd: #e2dcff;
}
.frame-frmWeb .card-name, .frame-frmWeb .mc-name { color: #f2eeff; text-shadow: 0 3px 0 #15121f, 0 0 12px #b9a8ff; }
#card.frame-frmWeb #inventory h3, #card.frame-frmWeb .inv-help, #card.frame-frmWeb .inv-empty { color: #e2dcff; }
.frame-frmWeb .icicles { opacity: 0; }
.frame-frmWeb .cf-deco i { display: block; background: url(../assets/pass/web.png) center / contain no-repeat; width: 150px; height: 150px; opacity: .85; }
.frame-frmWeb .cf-deco i::before { content: ''; }
.frame-frmWeb .cf-deco .d1 { left: 0; top: 0; }
.frame-frmWeb .cf-deco .d2 { right: 0; top: 0; transform: scaleX(-1); }
.frame-frmWeb .cf-deco .d3 { left: 0; bottom: 0; transform: scaleY(-1); width: 120px; height: 120px; }
.frame-frmWeb .cf-deco .d4 { right: 0; bottom: 0; transform: scale(-1, -1); width: 120px; height: 120px; }
.frame-frmWeb .cf-deco .d5 { right: 70px; top: 0; width: 3px; height: 130px; background: #e8e2ff; opacity: 1; transform-origin: top; animation: cfSpider 5s ease-in-out infinite; }
.frame-frmWeb .cf-deco .d5::after { content: '🕷️'; position: absolute; left: -15px; bottom: -24px; font-size: 30px; }
.frame-frmWeb .cf-deco .d6 { display: none; }
.sw-frmWeb { background: url(../assets/pass/web.png) left top / 60% no-repeat, linear-gradient(165deg, #3a3550, #262238 55%, #15121f); border-color: #cfc6ee !important; }
.frame-sw-big.sw-frmWeb::after { content: '🕸️'; }

/* Rey Calabaza (Premium) */
#card.frame-frmPumpkinKing, .mini-card.frame-frmPumpkinKing {
  --cf-bg: radial-gradient(circle at 50% 0, rgba(255,150,40,.45), transparent 55%), linear-gradient(165deg, #3d1a5c, #2a1040 55%, #160822);
  --cf-bd: #f2b51c; --cf-text: #ffe8b8; --cf-in: rgba(255,190,70,.45);
  --cf-inv: linear-gradient(160deg, #3a1a52, #1f0c2e); --cf-arrow: linear-gradient(90deg, #4a1f6a, #8a3a1a);
  --cf-flake: #ff8a1f; --cf-flake-bd: #ffe48a;
}
#card.frame-frmPumpkinKing .card-frame, .mini-card.frame-frmPumpkinKing { animation: pkGlow 2.4s ease-in-out infinite; }
@keyframes pkGlow { 0%, 100% { box-shadow: inset 0 0 0 6px rgba(255,190,70,.4), 0 18px 0 rgba(0,0,0,.25), 0 0 18px rgba(255,150,40,.5); } 50% { box-shadow: inset 0 0 0 6px rgba(255,210,90,.7), 0 18px 0 rgba(0,0,0,.25), 0 0 44px rgba(255,150,40,.9); } }
.frame-frmPumpkinKing .card-name, .frame-frmPumpkinKing .mc-name { color: #ffe8b8; text-shadow: 0 3px 0 #3d1a5c, 0 0 14px #ff9a3a; }
#card.frame-frmPumpkinKing #inventory h3, #card.frame-frmPumpkinKing .inv-help, #card.frame-frmPumpkinKing .inv-empty { color: #ffd9a8; }
.frame-frmPumpkinKing .icicles { filter: hue-rotate(-170deg) saturate(3) brightness(1.1); }
.frame-frmPumpkinKing .cf-deco i { display: block; }
.frame-frmPumpkinKing .cf-deco i::before { content: ''; }
.frame-frmPumpkinKing .cf-deco .d1, .frame-frmPumpkinKing .cf-deco .d2 { width: 96px; height: 96px; background: url(../assets/pass/pumpkin_king.png?v=2) center / contain no-repeat; animation: cfFloat 2.8s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255,150,40,.8)); }
.frame-frmPumpkinKing .cf-deco .d1 { left: 6px; bottom: 10px; }
.frame-frmPumpkinKing .cf-deco .d2 { right: 6px; bottom: 10px; animation-delay: -1.4s; }
.frame-frmPumpkinKing .cf-deco .d3, .frame-frmPumpkinKing .cf-deco .d4, .frame-frmPumpkinKing .cf-deco .d5, .frame-frmPumpkinKing .cf-deco .d6 {
  width: 26px; height: 26px; background: url(../assets/pass/ember.png) center / contain no-repeat; animation: pkEmber 4s ease-out infinite; }
.frame-frmPumpkinKing .cf-deco .d3 { left: 40px; bottom: 90px; }
.frame-frmPumpkinKing .cf-deco .d4 { right: 50px; bottom: 100px; animation-delay: -1s; }
.frame-frmPumpkinKing .cf-deco .d5 { left: 26%; bottom: 40px; animation-delay: -2s; }
.frame-frmPumpkinKing .cf-deco .d6 { right: 28%; bottom: 50px; animation-delay: -3s; }
@keyframes pkEmber { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-320px); opacity: 0; } }
.sw-frmPumpkinKing { background: url(../assets/pass/pumpkin_king.png?v=2) center 70% / 70% no-repeat, linear-gradient(165deg, #3d1a5c, #2a1040 55%, #160822); border-color: #f2b51c !important; box-shadow: 0 0 14px rgba(255,170,50,.6) !important; }
.frame-sw-big.sw-frmPumpkinKing::after { content: ''; }

/* ---------- vista previa de un cosmético ---------- */
.sp-preview { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(10,4,20,.72); backdrop-filter: blur(3px); animation: spFade .25s ease-out; }
.spv-box { position: relative; width: 760px; padding: 26px 34px 30px; border-radius: 30px; text-align: center; color: #fff; font-family: var(--font);
  background: radial-gradient(circle at 50% 30%, rgba(160,80,255,.35), transparent 60%), linear-gradient(170deg, #2a1640, #170c26); border: 5px solid #5fcf5a; box-shadow: 0 0 40px rgba(95,207,90,.4); animation: spPop .45s cubic-bezier(.3,1.5,.5,1); }
.spv-box.p { border-color: #f2b51c; box-shadow: 0 0 50px rgba(255,180,60,.5); }
.spv-box .x-btn { right: -22px; top: -22px; }
.spv-tag { display: inline-block; padding: 6px 18px; border-radius: 14px; background: rgba(255,255,255,.12); font: 700 20px var(--font); color: #ffe2b8; }
.spv-stage { position: relative; height: 380px; margin: 10px 0 6px; display: flex; align-items: center; justify-content: center; gap: 30px;
  background: radial-gradient(ellipse at 50% 70%, rgba(255,160,60,.25), transparent 60%); border-radius: 24px; }
.spv-bear { width: 260px; height: 370px; }
.spv-bear svg { width: 100%; height: 100%; overflow: visible; }
.spv-card { width: 260px; height: 346px; border-radius: 22px; border: 6px solid #fff; background-size: cover; background-position: center; position: relative; box-shadow: 0 10px 0 rgba(0,0,0,.3); }
.spv-cardbear { position: absolute; left: 50%; bottom: 10px; width: 170px; height: 240px; transform: translateX(-50%); }
.spv-cardbear svg { width: 100%; height: 100%; }
.spv-frame { transform: scale(.82); }
.spv-pet img:first-child { width: 100%; height: 100%; display: block; }
.spv-turn { display: flex; justify-content: center; align-items: center; gap: 12px; font: 600 18px var(--font); color: #e8d6ff; }
.spv-turn button { width: 46px; height: 46px; border-radius: 50%; border: 3px solid #2b1640; background: linear-gradient(#ffe48a, #ffab2e); font: 700 24px/1 var(--font); color: #4a1a00; cursor: pointer; }
.spv-box h3 { margin: 10px 0 4px; font: 700 34px var(--font); color: #ffd27a; }
.spv-box p { margin: 0 0 14px; font: 500 20px/1.35 var(--font); color: #f2e8ff; }
.spv-ok { font: 700 24px var(--font); color: #9cf09a; }
.spv-lock { font: 700 22px var(--font); color: #d9c6ff; }
.spv-prem { background: linear-gradient(#ffe48a, #ffab2e) !important; color: #4a1a00 !important; }

@media (prefers-reduced-motion: reduce) {
  .kw-wing, .kw-ember, .kw-orbit, .gb-float, .pa-fire, .pa-w, .hud-pass::after { animation: none !important; }
}