/* ==========================================================
   PIXEL STREAK — capa visual mejorada (se carga al final)
   ========================================================== */
:root{
  --accent:#9c6cff; --accent-2:#c9a6ff; --accent-glow:rgba(156,108,255,.45);
  --gold:#f8c45a; --cyan:#63dfff;
  --px-font:'Press Start 2P',monospace;
}
body[data-theme="color_teal"]{--accent:#2fe0c8;--accent-2:#9ff5ea;--accent-glow:rgba(47,224,200,.4)}
body[data-theme="color_rose"]{--accent:#ff6fc8;--accent-2:#ffb3e6;--accent-glow:rgba(255,111,200,.4)}
body[data-theme="color_gold"]{--accent:#f8c45a;--accent-2:#ffe39a;--accent-glow:rgba(248,196,90,.4)}

/* ---------- Personaje (sprite) ---------- */
.ph-knight{position:absolute !important;left:70px !important;top:14px !important;width:200px !important;height:240px !important;
  }
.hero-character-large .ph-knight{left:78px !important;top:20px !important;width:216px !important;height:260px !important}
.ph-knight > *:not(.ph-svg){display:none !important}
.ph-svg{width:100%;height:100%;overflow:visible;image-rendering:pixelated}
.ph-svg g{transform-box:fill-box}
.ph-body{animation:phBody 2s steps(1) infinite}
.ph-head{animation:phHead 2s steps(1) infinite}
.ph-hairback{animation:phHair 2s steps(1) infinite}
.ph-hairfront{animation:phHairF 2s steps(1) infinite}
.ph-cape{transform-origin:50% 0;animation:phCape 2s steps(1) infinite}
.ph-sword{transform-origin:50% 90%;animation:phSword 3s ease-in-out infinite;
  filter:drop-shadow(0 0 3px var(--sword-glow)) drop-shadow(0 0 7px var(--sword-glow))}
.ph-eyes-closed{opacity:0;animation:phBlinkC 5s steps(1) infinite}
.ph-eyes-open{animation:phBlinkO 5s steps(1) infinite}
.ph-spark{animation:phSpark 1.8s steps(1) infinite;opacity:0}
@keyframes phBody{0%{transform:translateY(0)}50%{transform:translateY(.7px)}}
@keyframes phHead{0%{transform:translateY(0)}50%{transform:translateY(1px)}}
@keyframes phHair{0%{transform:translate(0,0)}50%{transform:translate(0,1.4px)}}
@keyframes phHairF{0%{transform:translate(0,0)}50%{transform:translate(.4px,.8px)}}
@keyframes phCape{0%{transform:skewX(0) scaleY(1)}33%{transform:skewX(-1.4deg) scaleY(1.01)}66%{transform:skewX(1.2deg) scaleY(1.02)}}
@keyframes phSword{0%,100%{transform:rotate(0)}50%{transform:rotate(3deg)}}
@keyframes phBlinkO{0%,93%{opacity:1}94%,97%{opacity:0}98%,100%{opacity:1}}
@keyframes phBlinkC{0%,93%{opacity:0}94%,97%{opacity:1}98%,100%{opacity:0}}
@keyframes phSpark{0%{opacity:0}25%{opacity:1}50%{opacity:0}}

/* mascotas */
.ph-pet-wrap{position:absolute;left:8px;top:96px;width:52px;height:56px;pointer-events:none;z-index:4;animation:phPetFloat 3s ease-in-out infinite}
.ph-pet-wrap[data-pet="pet_none"]{display:none}
.ph-pet{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 8px rgba(110,210,255,.8))}
.ph-pet-flame{filter:drop-shadow(0 0 10px rgba(70,130,255,.9))}
.ph-pet-flame .ph-pet-body{animation:phFlame .5s steps(1) infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes phPetFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,-12px)}}
@keyframes phFlame{0%{transform:scale(1,1)}50%{transform:scale(.92,1.06)}}
.pet-orb{display:none !important}

/* aura void */
.aura-void .char-aura{background:radial-gradient(circle at 50% 53%,rgba(180,90,255,.35),rgba(60,10,120,.25) 45%,transparent 70%);border-color:rgba(190,110,255,.55);box-shadow:0 0 50px rgba(150,70,255,.35),inset 0 0 40px rgba(120,40,220,.25)}
.aura-void .char-runes i{background:#d58bff;box-shadow:0 0 13px #d58bff,0 0 25px rgba(190,90,255,.7)}

/* ---------- Campamento ---------- */
.camp-scene{min-height:0 !important;aspect-ratio:2/1;border:0 !important;background:#0a0c22 !important;
  box-shadow:0 0 0 2px #0b0d1e,0 0 0 4px rgba(156,108,255,.35),0 12px 30px rgba(0,0,0,.5);}
.camp-scene > *:not(.camp-svg-host):not(.camp-progress-copy){display:none !important}
.camp-svg-host,.camp-svg{position:absolute;inset:0;width:100%;height:100%}
.camp-svg{image-rendering:pixelated}
.camp-svg g,.camp-svg rect{transform-box:fill-box}
.camp-progress-copy{position:absolute !important;left:0;right:0;bottom:0;z-index:5;padding:26px 14px 10px;
  background:linear-gradient(transparent,rgba(5,6,16,.92) 70%);text-shadow:0 1px 0 #000}
.camp-flame{opacity:0;transform-origin:50% 100%}
.camp-flame.f0{animation:cF0 .45s steps(1) infinite}
.camp-flame.f1{animation:cF1 .45s steps(1) infinite}
.camp-flame.f2{animation:cF2 .45s steps(1) infinite}
@keyframes cF0{0%{opacity:1}33.3%,100%{opacity:0}}
@keyframes cF1{33.3%{opacity:1}0%,66.6%,100%{opacity:0}}
@keyframes cF2{66.6%{opacity:1}0%,33.3%,100%{opacity:0}}
.camp-glow{animation:campGlow 1.6s ease-in-out infinite;transform-origin:center}
@keyframes campGlow{50%{opacity:.7;transform:scale(1.06)}}
.camp-ember{animation:ember 2.6s linear infinite;opacity:0}
@keyframes ember{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(var(--ex),-34px);opacity:0}}
.camp-firefly{animation:ffly 6s ease-in-out infinite;filter:drop-shadow(0 0 2px #d9ff8a)}
@keyframes ffly{0%,100%{transform:translate(0,0);opacity:.2}25%{opacity:1}50%{transform:translate(8px,-6px);opacity:.3}75%{transform:translate(-5px,-3px);opacity:1}}
.camp-twinkle{animation:cTw 2.4s steps(1) infinite}
.camp-stars{animation:cTw2 3.1s steps(1) infinite}
@keyframes cTw{50%{opacity:.15}}@keyframes cTw2{60%{opacity:.7}}
.camp-moon{animation:moonF 8s ease-in-out infinite}
@keyframes moonF{50%{transform:translateY(1.5px)}}
.camp-flag{transform-origin:0 50%;animation:flag 1.2s steps(1) infinite}
@keyframes flag{0%{transform:skewY(0)}33%{transform:skewY(4deg) scaleX(.96)}66%{transform:skewY(-3deg) scaleX(.98)}}
.camp-win{animation:winG 3s ease-in-out infinite}
@keyframes winG{50%{opacity:.6}}
.camp-crystal{animation:crys 3.2s ease-in-out infinite;filter:drop-shadow(0 0 3px #7fe7ff)}
@keyframes crys{50%{transform:translateY(-3px)}}
.camp-tree{animation:treeS 5s ease-in-out infinite;transform-origin:50% 100%}
.camp-tree.t2{animation-delay:-2s}
@keyframes treeS{50%{transform:skewX(1.2deg)}}
.camp-halo{animation:halo 4s ease-in-out infinite;transform-origin:100px 46px;transform-box:view-box}
@keyframes halo{50%{transform:scale(1.07);opacity:.5}}

/* ---------- Fondo global ---------- */
.game-bg,.sky{background:
  radial-gradient(ellipse at 75% 8%,rgba(120,100,255,.22),transparent 40%),
  radial-gradient(ellipse at 10% 90%,rgba(60,200,255,.07),transparent 45%),
  linear-gradient(#070816 0%,#0d1230 50%,#1a1538 100%) !important}
.game-bg::before,.sky::before{content:'';position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 60%,#9fb8ff,transparent),radial-gradient(2px 2px at 40% 10%,#fff,transparent),radial-gradient(1px 1px at 85% 20%,#ffe9b0,transparent),radial-gradient(1px 1px at 55% 45%,#fff,transparent),radial-gradient(1px 1px at 10% 70%,#cfe0ff,transparent);
  background-size:380px 300px;animation:bgTw 6s steps(2) infinite}
@keyframes bgTw{50%{opacity:.25}}
.fx-layer{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.fx-fly{position:absolute;width:3px;height:3px;background:#d9ff8a;box-shadow:0 0 8px 2px rgba(217,255,138,.6);animation:fxFly linear infinite}
@keyframes fxFly{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}50%{transform:translate(40px,-60px);opacity:.3}90%{opacity:.9}100%{transform:translate(-30px,-140px);opacity:0}}
.fx-shoot{position:absolute;width:90px;height:2px;background:linear-gradient(90deg,transparent,#fff);opacity:0;transform:rotate(28deg);animation:fxShoot 9s linear infinite}
@keyframes fxShoot{0%{transform:translate(0,0) rotate(28deg);opacity:0}2%{opacity:1}9%{transform:translate(380px,200px) rotate(28deg);opacity:0}100%{opacity:0}}
.silhouette.s-back,.mountains.m1{background:linear-gradient(#1b1f45,#10132b) !important}
.silhouette.s-front,.mountains.m2{background:linear-gradient(#0d0f22,#06070f) !important}
body.game-page::after,body::after{background:repeating-linear-gradient(to bottom,rgba(255,255,255,.022) 0 1px,transparent 1px 3px) !important}

/* ---------- Paneles ---------- */
.glass-panel{position:relative;background:
  linear-gradient(180deg,rgba(26,29,58,.94),rgba(11,13,28,.94)) !important;
  border:0 !important;
  box-shadow:inset 0 0 0 2px #05060f,inset 0 0 0 3px rgba(130,140,220,.28),inset 0 3px 0 3px rgba(255,255,255,.035),0 22px 50px rgba(0,0,0,.45) !important}
.glass-panel::before{content:'';position:absolute;left:18px;right:18px;top:0;height:3px;
  background:linear-gradient(90deg,var(--accent),transparent 55%);opacity:.9;z-index:2;pointer-events:none}
.glass-panel > .section-head,.glass-panel > .reward-top{position:relative;z-index:1}
.pixel-label{color:var(--accent-2) !important;text-shadow:0 0 12px var(--accent-glow);display:flex;align-items:center;gap:8px}
.pixel-label::before{content:'';width:6px;height:6px;background:var(--accent);box-shadow:0 0 8px var(--accent);flex:none}
.section-head h2,.page-card h2,.page-title{letter-spacing:.3px;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.topbar{box-shadow:inset 0 0 0 2px #05060f,inset 0 0 0 3px rgba(130,140,220,.3),0 12px 30px rgba(0,0,0,.4) !important}
.mini-brand{text-shadow:2px 2px 0 #2b2152;font-size:11px !important}
.mini-brand span{color:var(--accent-2) !important}
.nav-link{position:relative;background:#0a0c1c !important;border:2px solid #1c2140 !important;text-transform:uppercase;letter-spacing:.8px;font-size:14px !important;transition:transform .12s,color .2s,border-color .2s !important}
.nav-link:hover{transform:translateY(-2px)}
.nav-link.active,.nav-link:hover{border-color:var(--accent) !important;box-shadow:0 3px 0 var(--accent),0 0 18px var(--accent-glow) !important;color:#fff !important}
.player-chip,.top-currency{background:#090b1a !important;border:2px solid #1c2140 !important}
.top-currency b{font-family:var(--px-font);font-size:11px}
.tiny-avatar{background:linear-gradient(135deg,var(--accent),#3a2a8a) !important;border:2px solid #05060f !important;box-shadow:0 0 12px var(--accent-glow)}
.ghost-btn{border:2px solid #2a3158 !important;background:#0d1124 !important;transition:.15s;font-family:var(--px-font) !important;font-size:9px !important}
.ghost-btn:hover{border-color:#ff6677 !important;color:#ff8a98 !important;transform:translateY(-1px)}

/* ---------- Héroe / escenario del personaje ---------- */
.hero-status{background:
  radial-gradient(circle at 78% 55%,var(--accent-glow),transparent 38%),
  linear-gradient(180deg,rgba(26,29,58,.94),rgba(11,13,28,.94)) !important}
.streak-line strong{color:#fff !important;text-shadow:4px 4px 0 #1f2a5e,0 0 20px rgba(99,223,255,.55) !important}
.status-badges span{background:#0a0c1c !important;border:2px solid #1c2140 !important}
.hero-character{filter:none}
.hero-character::before{content:'';position:absolute;left:50%;bottom:34px;width:230px;height:46px;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 40%,var(--accent-glow),transparent 70%);z-index:0}
.char-ground{left:48px !important;bottom:30px !important;width:200px !important;height:22px !important;background:rgba(0,0,0,.55) !important;border-radius:50% !important}
.char-aura{border:0 !important;border-radius:50% !important;background:radial-gradient(circle closest-side,var(--accent-glow),transparent) !important}
.char-runes i{box-shadow:0 0 10px #79ddff !important}
.level-plate{background:linear-gradient(180deg,#1a1e40,#0b0d20) !important;border:2px solid var(--accent) !important;color:#fff;
  box-shadow:0 0 0 2px #05060f,0 0 18px var(--accent-glow) !important;left:50% !important;transform:translateX(-50%);white-space:nowrap}

/* ---------- MARCOS (hero + perfil) ---------- */
@property --fa{syntax:'<angle>';initial-value:0deg;inherits:false}
.hero-status::after,.profile-hero-frame::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;transition:opacity .3s}
:is(.hero-status,.profile-hero-frame):is(.frame-neon,.frame-royal,.frame-void,.frame-ice,.frame-sakura,.frame-cyber)::after{opacity:1;padding:4px;
  -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)}
.hero-status.frame-neon::after,.profile-hero-frame.frame-neon::after{background:conic-gradient(from var(--fa),#9c6cff,#63dfff,#ff6fc8,#9c6cff);animation:frameSpin 3.5s linear infinite;filter:drop-shadow(0 0 8px #9c6cff)}
.hero-status.frame-royal::after,.profile-hero-frame.frame-royal::after{background:conic-gradient(from var(--fa),#7a4e12,#ffe9a0,#c98a1f,#fff6cf,#7a4e12);animation:frameSpin 6s linear infinite;padding:5px;filter:drop-shadow(0 0 7px rgba(248,196,90,.7))}
.hero-status.frame-void::after,.profile-hero-frame.frame-void::after{background:conic-gradient(from var(--fa),#12001f,#8a2be2,#ff5bf5,#2a0a55,#12001f);animation:frameSpin 2.6s linear infinite;padding:5px;filter:drop-shadow(0 0 12px #9c3bff)}
@keyframes frameSpin{to{--fa:360deg}}
:is(.hero-status,.profile-hero-frame):is(.frame-neon,.frame-royal,.frame-void,.frame-ice,.frame-sakura,.frame-cyber){box-shadow:none !important}
.hero-character:is(.frame-neon,.frame-royal,.frame-void,.frame-ice,.frame-sakura,.frame-cyber){box-shadow:none !important;background:none !important}
.frame-royal .pixel-label{color:#ffe39a !important}
.hero-status.frame-void,.profile-hero-frame.frame-void{background-image:radial-gradient(circle at 78% 55%,rgba(150,60,255,.28),transparent 40%),linear-gradient(180deg,#140a28,#080614) !important}
.hero-status.frame-void::before{content:'';position:absolute;inset:0;background:
  radial-gradient(2px 2px at 20% 30%,#d58bff,transparent),radial-gradient(2px 2px at 60% 70%,#ff8bf5,transparent),radial-gradient(2px 2px at 85% 25%,#b48bff,transparent),radial-gradient(1px 1px at 40% 80%,#fff,transparent);
  background-size:260px 260px;animation:voidDrift 8s linear infinite;opacity:.9}
@keyframes voidDrift{to{background-position:0 -260px}}

/* Perfil */
.profile-hero-frame{background:
  radial-gradient(circle at 50% 62%,var(--accent-glow),transparent 55%),
  linear-gradient(180deg,#0e1230,#070914) !important;
  border:0 !important;box-shadow:inset 0 0 0 2px #05060f,inset 0 0 0 3px rgba(130,140,220,.3)}
.profile-hero-frame::before{background:
  radial-gradient(1px 1px at 15% 20%,#fff,transparent),radial-gradient(1px 1px at 80% 15%,#fff,transparent),radial-gradient(2px 2px at 65% 40%,#aac,transparent),radial-gradient(1px 1px at 30% 60%,#fff,transparent) !important;background-size:240px 240px !important}
.stat-box,.loadout-item,.mini-day{background:linear-gradient(180deg,#10142e,#0a0c1c) !important;border:2px solid #1c2140 !important}
.stat-box strong{font-family:var(--px-font);font-size:13px}
.profile-header-box{border:2px solid var(--accent) !important;background:linear-gradient(90deg,rgba(156,108,255,.14),transparent) !important}

/* ---------- Calendario ---------- */
.day-cell{border:2px solid #171b36 !important;background:#0a0c1c !important;transition:transform .15s,box-shadow .2s}
.day-cell:not(.future):not(.before-start):not(.empty):hover{transform:translateY(-2px)}
.day-cell.clean{background:linear-gradient(180deg,#143a72,#0a1230) !important;border-color:#3d9bff !important;box-shadow:inset 0 0 22px rgba(76,172,255,.28),0 0 12px rgba(76,172,255,.14) !important}
.day-cell.event{border-color:#ff5d78 !important;box-shadow:inset 0 0 22px rgba(255,90,120,.25) !important}
.day-cell.missed{border-color:#e6b44a !important}
.day-cell.today{outline:3px solid #fff !important;outline-offset:-3px;animation:todayP 1.6s ease-in-out infinite}
@keyframes todayP{50%{outline-color:var(--accent-2);box-shadow:0 0 22px var(--accent-glow)}}
.weekdays span{background:#0d1126 !important;border:2px solid #171b36}

/* ---------- Botones ---------- */
.danger-pixel-btn{box-shadow:0 5px 0 #6b1428,0 0 22px rgba(255,80,110,.2) !important;transition:transform .1s,filter .1s}
.danger-pixel-btn:hover{filter:brightness(1.12);transform:translateY(-2px)}
.danger-pixel-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #6b1428 !important}
.counter-row button,.counter-row strong{border:2px solid #1c2140 !important}
.counter-row button:hover{border-color:var(--accent) !important}

/* ---------- XP, hitos, logros, misiones, cofres ---------- */
.xp-track{height:18px !important;border:2px solid #05060f !important;background:#080a18 !important;box-shadow:0 0 0 2px #1c2140;overflow:hidden}
.xp-track i{background:repeating-linear-gradient(90deg,var(--cyan) 0 6px,#4ab8ff 6px 8px),linear-gradient(90deg,var(--cyan),var(--accent)) !important;background-blend-mode:normal;box-shadow:0 0 18px rgba(99,223,255,.5) !important;position:absolute}
.xp-track i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.55) 50%,transparent 100%);width:40px;animation:xpShine 2.2s linear infinite}
@keyframes xpShine{from{transform:translateX(-40px)}to{transform:translateX(300px)}}
.milestone-item,.mission-item,.achievement-item,.shop-item,.chest-item{border:2px solid #1a1f3d !important;background:linear-gradient(180deg,#10142e,#0a0c1c) !important}
.milestone-item.claimed,.achievement-item.unlocked,.mission-item.done{border-color:rgba(109,242,177,.3) !important}
.shop-item{position:relative;overflow:hidden;--rc:#6b7290}
.shop-item[data-rarity="rare"],.shop-item.rare{--rc:#4aa8ff}
.shop-item.epic{--rc:#b56bff}.shop-item.legendary{--rc:#ffb84a}.shop-item.mythic{--rc:#ff5a8a}
.shop-item:hover{border-color:var(--accent) !important;box-shadow:0 0 18px var(--accent-glow);transform:translateY(-3px) !important}
.shop-item.equipped{border-color:rgba(109,242,177,.7) !important;box-shadow:0 0 14px rgba(109,242,177,.18) !important}
.shop-icon{background:linear-gradient(135deg,rgba(156,108,255,.3),rgba(99,223,255,.12)) !important;border:2px solid #05060f !important;box-shadow:0 0 0 1px var(--accent)}
.chest-item{transition:transform .15s}
.chest-item:not(:disabled):hover{transform:translateY(-4px) scale(1.03)}
.chest-item.unlocked:not(.claimed){border-color:var(--gold) !important;box-shadow:0 0 22px rgba(248,196,90,.3),inset 0 0 18px rgba(248,196,90,.12) !important}
.chest-icon{font-size:32px !important}
.reward-icon,.mini-icon{background:linear-gradient(135deg,rgba(248,196,90,.3),rgba(248,196,90,.05)) !important;border:2px solid #05060f !important;box-shadow:0 0 0 1px var(--gold),0 0 14px rgba(248,196,90,.35)}
.toast{border:2px solid var(--accent) !important;background:#0a0c1c !important;box-shadow:0 0 0 2px #05060f,0 0 24px var(--accent-glow);font-weight:700}

/* ---------- Ranking ---------- */
.ph-avatar{position:relative;flex:none;background:radial-gradient(circle at 50% 60%,var(--accent-glow),transparent 70%),linear-gradient(180deg,#171c42,#0a0c1e);
  border:2px solid #05060f;box-shadow:0 0 0 2px #2a3160;overflow:hidden;width:56px;height:60px}
.ph-avatar .ph-svg{width:100%;height:100%;filter:drop-shadow(0 2px 0 rgba(0,0,0,.4))}
.ph-avatar .ph-sword,.ph-avatar .ph-spark{display:none}
.ph-avatar.big{width:92px;height:98px}
.ph-avatar.mini{width:38px;height:41px;box-shadow:0 0 0 1px #2a3160}
.ph-avatar .ph-body,.ph-avatar .ph-head,.ph-avatar .ph-hairback,.ph-avatar .ph-cape,.ph-avatar .ph-hairfront{animation-duration:2.4s}
.podium-card{padding:18px 16px 22px !important;border:2px solid #1a1f3d !important;background:linear-gradient(180deg,#14183a,#0a0c1c) !important;text-align:center;justify-items:center;transition:transform .2s;overflow:hidden}
.podium-card:hover{transform:translateY(-4px)}
.podium-card.p1{border-color:#f8c45a !important;background:radial-gradient(circle at 50% 28%,rgba(248,196,90,.22),transparent 60%),linear-gradient(180deg,#1d1a3a,#0a0c1c) !important;box-shadow:0 0 28px rgba(248,196,90,.22)}
.podium-card.p2{border-color:#b9c4dd !important;box-shadow:0 0 18px rgba(185,196,221,.12)}
.podium-card.p3{border-color:#d58a55 !important;box-shadow:0 0 18px rgba(213,138,85,.14)}
.podium-card.p1::after{background:linear-gradient(90deg,#b8862a,#fff0a8,#b8862a) !important}
.podium-card.p2::after{background:linear-gradient(90deg,#7e8aa8,#fff,#7e8aa8) !important}
.podium-card.p3::after{background:linear-gradient(90deg,#8a4a22,#ffc08a,#8a4a22) !important}
.podium-card .podium-place{font-size:14px;padding:6px 10px;background:#05060f;border:2px solid currentColor}
.podium-card.p1 .podium-place{color:#f8c45a}.podium-card.p2 .podium-place{color:#d3dbef}.podium-card.p3 .podium-place{color:#e59a68}
.podium-card b{font-size:22px}
.podium-card strong{font-size:13px !important;text-shadow:0 0 14px var(--accent-glow)}
.podium-crown{position:absolute;top:6px;right:10px;font-size:20px;animation:crownB 1.6s ease-in-out infinite;filter:drop-shadow(0 0 8px #f8c45a)}
@keyframes crownB{50%{transform:translateY(-4px) rotate(8deg)}}
.ranking-row,.rank-row{border:2px solid #1a1f3d !important;background:linear-gradient(90deg,#10142e,#0a0c1c) !important;align-items:center;transition:transform .15s,border-color .15s;animation:rowIn .45s ease-out backwards}
.ranking-row:hover,.rank-row:hover{transform:translateX(5px);border-color:var(--accent) !important}
.ranking-row:nth-child(1),.rank-row:nth-child(1){border-left:5px solid #f8c45a !important}
.ranking-row:nth-child(2),.rank-row:nth-child(2){border-left:5px solid #c4cee6 !important}
.ranking-row:nth-child(3),.rank-row:nth-child(3){border-left:5px solid #d58a55 !important}
.ranking-row.me,.rank-row.me{background:linear-gradient(90deg,rgba(156,108,255,.22),#0a0c1c) !important}
@keyframes rowIn{from{opacity:0;transform:translateX(-14px)}}
.ranking-row.has-avatar{display:grid;grid-template-columns:54px 60px minmax(120px,1.3fr) 1fr 1fr auto !important;gap:14px;align-items:center;padding:10px 14px !important}
.ranking-stat{display:grid;gap:8px}.ranking-stat span{font:700 13px Rajdhani;color:#8d99ba;text-transform:uppercase;letter-spacing:.5px}.ranking-stat strong{font-size:13px}
.view-profile-btn{padding:10px 14px;border:2px solid #2a3158;background:#0d1124;font-weight:700;white-space:nowrap;transition:.15s}.view-profile-btn:hover{border-color:var(--accent);box-shadow:0 0 14px var(--accent-glow)}
.rank-row.has-avatar{grid-template-columns:44px 40px 1fr auto !important}
.ranking-tabs button{border:2px solid #1a1f3d !important;background:#0a0c1c !important;transition:.15s;font-weight:700}
.ranking-tabs button:hover{transform:translateY(-2px);border-color:var(--accent) !important}
.ranking-tabs button.active{background:linear-gradient(180deg,var(--accent),#4a2a9a) !important;color:#fff !important;border-color:#05060f !important;box-shadow:0 4px 0 #2a1a5e,0 0 18px var(--accent-glow)}
.ranking-stat{font-family:var(--px-font)}

@media (prefers-reduced-motion:reduce){
  .ph-svg *,.camp-svg *,.fx-layer *,.glass-panel *{animation:none !important}
}
@media(max-width:700px){
  .ph-knight{left:40px !important}
  .ranking-row.has-avatar{grid-template-columns:34px 48px 1fr auto !important}.ranking-row.has-avatar .ranking-stat:nth-of-type(2){display:none}.ranking-row.has-avatar .view-profile-btn{display:none}
}

/* ---------- Landing ---------- */
.scene .character{width:230px !important;height:276px !important;left:100px !important;top:40px !important;filter:drop-shadow(0 14px 22px rgba(0,0,0,.6)) !important;animation:none !important}
.scene .character > .ph-svg{width:100%;height:100%}
.character-stage .glow-ring{border:3px dashed rgba(165,100,255,.35) !important;animation:ringSpin 24s linear infinite !important;box-shadow:0 0 70px rgba(148,80,255,.2) inset,0 0 55px rgba(148,80,255,.2) !important}
.character-stage::before{content:'';position:absolute;left:70px;top:60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(160,100,255,.28),transparent 68%);animation:pulse 3s ease-in-out infinite}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.character-stage .floor-shadow{background:rgba(0,0,0,.6) !important}
h1{text-shadow:5px 5px 0 #2a2050,0 0 26px rgba(164,102,255,.35) !important}
h1 span{text-shadow:5px 5px 0 #3b265b,0 0 30px rgba(192,132,255,.6) !important;animation:titleGlow 3s ease-in-out infinite}
@keyframes titleGlow{50%{filter:brightness(1.25)}}
.hero-copy{max-width:440px !important}
.auth-card{background:linear-gradient(180deg,rgba(28,30,62,.96),rgba(11,13,28,.97)) !important;border:0 !important;
  box-shadow:inset 0 0 0 2px #05060f,inset 0 0 0 3px rgba(150,130,255,.4),0 26px 70px rgba(0,0,0,.55),0 0 50px rgba(120,70,220,.14) !important}
.auth-card::before{border:1px dashed rgba(153,113,255,.22) !important}
.card-deco{height:5px !important;background:var(--purple) !important;box-shadow:0 0 12px var(--purple)}
.tab{transition:.15s !important}
.tab:hover{color:#fff !important}
.tab.active{background:linear-gradient(180deg,#34305f,#201e3f) !important}
.input-shell{border:2px solid #232850 !important;background:#070913 !important}
.input-shell:focus-within{border-color:var(--purple) !important;box-shadow:0 0 0 3px rgba(158,92,255,.15),0 0 18px rgba(158,92,255,.2) !important}
.primary-btn{background:linear-gradient(180deg,#a461f0,#6a30c4) !important;box-shadow:0 6px 0 #3e1f73,0 0 30px rgba(142,73,223,.3) !important;position:relative;overflow:hidden}
.primary-btn::after{content:'';position:absolute;top:0;bottom:0;width:36px;left:-60px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:btnShine 3.2s linear infinite}
@keyframes btnShine{to{left:120%}}
.moon{background:radial-gradient(circle at 36% 34%,#fff,#dbe6ff 55%,#aebde8) !important;box-shadow:0 0 70px rgba(193,208,255,.35),0 0 140px rgba(150,170,255,.15),inset -26px -18px 0 rgba(112,117,157,.2) !important}
.mountains.m1{background:linear-gradient(#232a5a,#12152e) !important;opacity:.95 !important}

.profile-hero-frame{align-self:start;min-height:520px !important}

/* ==========================================================
   V5.2 — ataque con espada, auras con partículas, mascotas,
   marcos nuevos, campamento día/noche y etapas 8-10
   ========================================================== */

/* ---------- Marcos nuevos ---------- */
.hero-status.frame-ice::after,.profile-hero-frame.frame-ice::after{background:conic-gradient(from var(--fa),#bff6ff,#ffffff,#6fd0ff,#e8fbff,#bff6ff);animation:frameSpin 5s linear infinite;filter:drop-shadow(0 0 8px #8ae4ff);padding:5px}
.hero-status.frame-ice,.profile-hero-frame.frame-ice{background-image:radial-gradient(circle at 78% 55%,rgba(120,220,255,.22),transparent 40%),linear-gradient(180deg,#0f1c3a,#080d1e) !important}
.hero-status.frame-ice::before,.profile-hero-frame.frame-ice::before{background:radial-gradient(2px 2px at 20% 30%,#fff,transparent),radial-gradient(2px 2px at 70% 60%,#bff6ff,transparent),radial-gradient(1px 1px at 45% 80%,#fff,transparent),radial-gradient(2px 2px at 88% 20%,#fff,transparent) !important;background-size:220px 220px !important;animation:iceTw 2.6s steps(2) infinite}
@keyframes iceTw{50%{opacity:.35}}
.hero-status.frame-sakura::after,.profile-hero-frame.frame-sakura::after{background:conic-gradient(from var(--fa),#ff9ccf,#fff0f8,#ff6fb5,#ffd0ea,#ff9ccf);animation:frameSpin 5s linear infinite;filter:drop-shadow(0 0 8px #ff7ec0);padding:5px}
.hero-status.frame-sakura,.profile-hero-frame.frame-sakura{background-image:radial-gradient(circle at 78% 55%,rgba(255,130,200,.2),transparent 42%),linear-gradient(180deg,#2a1230,#0d0814) !important}
.hero-status.frame-sakura::before,.profile-hero-frame.frame-sakura::before{background:
  radial-gradient(4px 3px at 12% 10%,#ffb7dc,transparent),radial-gradient(4px 3px at 38% 40%,#fff0f8,transparent),radial-gradient(4px 3px at 64% 20%,#ffb7dc,transparent),radial-gradient(4px 3px at 86% 55%,#ff9ccf,transparent),radial-gradient(3px 3px at 25% 75%,#fff0f8,transparent) !important;
  background-size:260px 260px !important;animation:petalFall 9s linear infinite}
@keyframes petalFall{to{background-position:90px 260px}}
.hero-status.frame-cyber::after,.profile-hero-frame.frame-cyber::after{background:conic-gradient(from var(--fa),#00f0ff,#ff2bd6,#00f0ff,#7a2bff,#00f0ff);animation:frameSpin 2s steps(20) infinite;filter:drop-shadow(0 0 10px #00f0ff);padding:4px}
.hero-status.frame-cyber,.profile-hero-frame.frame-cyber{background-image:radial-gradient(circle at 78% 55%,rgba(0,240,255,.2),transparent 42%),linear-gradient(180deg,#071428,#05060f) !important}
.hero-status.frame-cyber::before,.profile-hero-frame.frame-cyber::before{background:
  linear-gradient(transparent 46%,rgba(0,255,240,.22) 50%,transparent 54%),
  repeating-linear-gradient(0deg,rgba(0,255,255,.07) 0 2px,transparent 2px 5px) !important;
  background-size:100% 160px,100% 100% !important;animation:scanMove 3s linear infinite}
@keyframes scanMove{from{background-position:0 -160px,0 0}to{background-position:0 400px,0 0}}

/* ---------- Campamento: día / noche y etapas nuevas ---------- */
.camp-cloud{animation:cloudDrift linear infinite}
@keyframes cloudDrift{from{transform:translateX(0)}to{transform:translateX(330px)}}
.camp-sun{animation:moonF 6s ease-in-out infinite}
.camp-rays{animation:raySpin 40s linear infinite}
@keyframes raySpin{to{transform:rotate(360deg)}}
.camp-island{animation:islandF 6s ease-in-out infinite}
@keyframes islandF{50%{transform:translateY(-2.5px)}}
.camp-fall{animation:fallDash .6s linear infinite;opacity:.8}
@keyframes fallDash{to{stroke-dashoffset:-6}}
.camp-aurora{animation:auroraW 9s ease-in-out infinite alternate}
@keyframes auroraW{0%{transform:translateX(-8px);opacity:.55}100%{transform:translateX(8px);opacity:1}}
.camp-aurora .a2{animation:auroraW2 7s ease-in-out infinite alternate}
@keyframes auroraW2{to{transform:translateY(4px)}}
.camp-rainbow{animation:rbow 6s ease-in-out infinite}
@keyframes rbow{50%{opacity:.55}}
.camp-spire{animation:spireP 2.6s ease-in-out infinite}
@keyframes spireP{50%{filter:brightness(1.4) drop-shadow(0 0 3px #7fe7ff)}}
.camp-sparkle{animation:spk 4s linear infinite;opacity:0}
@keyframes spk{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-34px);opacity:0}}
.camp-dragon{animation:dragonFly 24s linear infinite}
@keyframes dragonFly{0%{transform:translate(-70px,6px)}25%{transform:translate(10px,-4px)}50%{transform:translate(90px,8px)}75%{transform:translate(170px,-2px)}100%{transform:translate(270px,6px)}}
.dr-a{animation:wingA .5s steps(1) infinite}
.dr-b{animation:wingB .5s steps(1) infinite}
.camp-breath{animation:breath 6s steps(1) infinite;opacity:0}
@keyframes breath{0%,70%{opacity:0}72%,82%{opacity:1}85%,100%{opacity:0}}
.camp-fw rect{opacity:0;animation:fw 4.4s steps(14) infinite}
@keyframes fw{0%{transform:translate(0,0);opacity:0}6%{opacity:1}35%{transform:translate(calc(cos(var(--a))*15px),calc(sin(var(--a))*15px));opacity:1}50%{transform:translate(calc(cos(var(--a))*17px),calc(sin(var(--a))*17px + 4px));opacity:0}100%{opacity:0}}
.camp-beam{animation:beamP 3s ease-in-out infinite}
@keyframes beamP{50%{opacity:.45}}
.camp-rings{animation:raySpin 60s linear infinite;transform-origin:100px 44px;transform-box:view-box}
.camp-controls{display:flex;flex-wrap:wrap;gap:10px 16px;justify-content:space-between;margin-top:14px}
.camp-pips,.camp-phases{display:flex;gap:6px;flex-wrap:wrap}
.camp-controls button{min-width:34px;height:32px;padding:0 10px;background:#0a0c1c;border:2px solid #1c2140;color:#8d99ba;font:9px var(--px-font);cursor:pointer;transition:.15s}
.camp-phases button{font:700 13px Rajdhani,sans-serif;letter-spacing:.5px}
.camp-controls button:hover{border-color:var(--accent);color:#fff;transform:translateY(-2px)}
.camp-controls 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)}
.camp-pips button.locked:not(.on){opacity:.55;border-style:dashed}

/* ---------- Animaciones de interfaz ---------- */
@keyframes panelIn{from{opacity:0;transform:translateY(18px) scale(.985)}}
.glass-panel{animation:panelIn .65s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*70ms)}
.hero-character{transform:perspective(700px) rotateY(calc(var(--tx,0)*10deg)) rotateX(calc(var(--ty,0)*-7deg));transition:transform .18s ease-out}
.level-plate{overflow:hidden}
.level-plate::after{content:'';position:absolute;top:0;bottom:0;width:30px;left:-40px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);animation:btnShine 3.4s linear infinite}
.shop-item:hover .shop-icon{animation:iconWig .5s steps(4)}
@keyframes iconWig{25%{transform:rotate(-12deg) scale(1.1)}75%{transform:rotate(12deg) scale(1.1)}}
.streak-line strong{display:inline-block;animation:numPop .7s cubic-bezier(.3,1.6,.5,1) backwards .3s}
@keyframes numPop{from{transform:scale(.4);opacity:0}}
.nav-link.active::after{content:'';position:absolute;left:8px;right:8px;bottom:-5px;height:3px;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:navPulse 1.8s ease-in-out infinite}
@keyframes navPulse{50%{opacity:.4}}
@media(max-width:700px){.camp-controls button{min-width:30px;padding:0 6px}.ph-fxp{left:20px}}