/* v2.5 — poderes especiales, cuenta y juego blindado */

/* ---------- selector de especiales ---------- */
.sp-top{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;width:100%;max-width:520px}
.sp-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.sp-info b{font-family:"Luckiest Guy";font-weight:400;font-size:24px;color:var(--yl);text-shadow:0 3px 0 var(--ink)}
.sp-info span{font-family:"Lilita One";font-size:15px;text-shadow:0 2px 0 var(--ink)}
.sp-info small{font-family:"Baloo 2";font-weight:800;font-size:13px;opacity:.92}
.sp-slots{display:flex;gap:8px}
.sp-slot{position:relative;width:60px;height:60px;border-radius:16px;display:grid;place-items:center;background:rgba(10,5,30,.55);box-shadow:inset 0 0 0 3px rgba(255,255,255,.25);cursor:pointer}
.sp-slot i{font-style:normal;font-family:"Lilita One";font-size:28px;color:rgba(255,255,255,.4)}
.sp-slot.on{background:radial-gradient(circle at 50% 35%,#fff 0,var(--sc) 55%,#1a0f2e 120%);box-shadow:0 0 0 3px var(--ink),0 0 16px var(--sc);animation:spPop .25s}
.sp-slot kbd,.sp-btn kbd,.sp-keys kbd{font-family:"Lilita One";font-size:12px;line-height:1;padding:3px 6px;border-radius:6px;background:#fff;color:var(--ink);box-shadow:0 0 0 2px var(--ink),0 2px 0 2px var(--ink)}
.sp-slot kbd{position:absolute;right:-6px;bottom:-6px}
.sp-keys{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;margin:0;font-family:"Baloo 2";font-weight:800;font-size:14px;text-align:center;text-shadow:0 1px 0 var(--ink)}
.sp-keys svg{width:20px;height:20px}
.sp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:520px}
@media (min-width:640px){.sp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sp-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 8px 10px;border-radius:18px;color:#fff;text-align:center;background:linear-gradient(180deg,var(--sc2),#1a1046);box-shadow:0 0 0 3px var(--ink),0 5px 0 3px var(--ink),inset 0 2px 0 rgba(255,255,255,.25);transition:transform .1s;min-width:0}
.sp-card:active{transform:translateY(2px)}
.sp-card b{font-family:"Lilita One";font-weight:400;font-size:17px;line-height:1.05;text-shadow:0 2px 0 var(--ink)}
.sp-card small{font-family:"Baloo 2";font-weight:700;font-size:12px;line-height:1.2;opacity:.92}
.sp-ic{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.95),rgba(255,255,255,.25) 60%,transparent 72%)}
.sp-svg{filter:drop-shadow(0 2px 0 var(--ink))}
.sp-have{margin-top:4px;font-family:"Lilita One";font-size:13px;padding:2px 10px;border-radius:10px;background:rgba(0,0,0,.35)}
.sp-card.on{background:linear-gradient(180deg,var(--sc),var(--sc2));box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink),0 0 22px var(--sc)}
.sp-card.on .sp-have{background:#fff;color:var(--ink)}
.sp-check{position:absolute;top:6px;right:6px;font-family:"Lilita One";font-size:12px;padding:2px 7px;border-radius:9px;background:#fff;color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.sp-card.none{filter:saturate(.35) brightness(.85)}
.sp-card.none .sp-have{background:var(--yl);color:var(--ink)}
.sp-card.off{opacity:.45}
@keyframes spPop{0%{transform:scale(.6)}70%{transform:scale(1.12)}100%{transform:scale(1)}}

/* ---------- botones en la partida ---------- */
.sp-bar{position:absolute;left:calc(6px + env(safe-area-inset-left,0px));top:38%;display:flex;flex-direction:column;gap:10px;z-index:6;pointer-events:none}
body.lefty .sp-bar{left:auto;right:calc(6px + env(safe-area-inset-right,0px))}
.sp-btn{pointer-events:auto;touch-action:none;position:relative;width:clamp(52px,13.5vw,62px);height:clamp(52px,13.5vw,62px);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;color:#fff;background:linear-gradient(var(--sc),var(--sc2));box-shadow:0 0 0 3px var(--ink),0 4px 0 3px var(--ink),0 0 14px var(--sc);animation:spReady 1.4s infinite}
.sp-btn .sp-svg{width:30px;height:30px;position:relative;z-index:1}
.sp-btn span{position:relative;z-index:1;font-family:"Lilita One";font-size:9px;letter-spacing:.3px;text-shadow:0 1px 0 var(--ink);margin-top:-1px}
.sp-btn kbd{position:absolute;top:2px;left:2px;z-index:2;font-size:10px;padding:1px 4px}
.sp-btn .sp-t{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(255,255,255,.45);z-index:0;transition:height .1s linear}
.sp-btn.act{animation:none;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink),0 0 24px var(--sc)}
.sp-btn.used{animation:none;background:linear-gradient(#4a4f6e,#2a2d48);box-shadow:0 0 0 3px var(--ink);opacity:.6}
.sp-btn.used.act{opacity:1;background:linear-gradient(var(--sc2),#2a2d48)}
.sp-btn.busy{opacity:.7;animation:none}
.sp-btn:active{transform:translateY(2px)}
@keyframes spReady{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
body.sp-slow #game::after,body.sp-slow::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:5;box-shadow:inset 0 0 140px rgba(63,168,255,.6);background:radial-gradient(ellipse at center,transparent 55%,rgba(40,110,255,.18))}

/* ---------- tienda: paquetes de especiales ---------- */
.sp-shop{display:flex;flex-direction:column;gap:10px;width:100%;max-width:520px}
.sp-pk{display:grid;grid-template-columns:58px minmax(0,1fr);gap:8px 10px;align-items:center;padding:10px 12px;border-radius:18px;background:linear-gradient(180deg,var(--sc2),#1a1046);box-shadow:0 0 0 3px var(--ink),0 5px 0 3px var(--ink)}
.sp-pk-t{display:flex;flex-direction:column;min-width:0}
.sp-pk-t b{font-family:"Lilita One";font-weight:400;font-size:18px;text-shadow:0 2px 0 var(--ink)}
.sp-pk-t small{font-family:"Baloo 2";font-weight:700;font-size:12px;opacity:.9}
.sp-pk-t em{font-style:normal;font-family:"Lilita One";font-size:13px;color:var(--yl)}
.sp-pk-b{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sp-pk-b .p-btn{min-height:44px;font-size:15px;padding:6px 8px}
.sp-pk-b .p-btn svg{width:22px;height:22px}
.sp-hero{display:grid;grid-template-columns:repeat(3,34px);gap:4px}

/* ---------- cuenta ---------- */
.ac-st{display:flex;gap:12px;align-items:flex-start;max-width:520px}
.ac-st>svg{width:42px;height:42px;flex:none}
.ac-st b{display:block;font-family:"Luckiest Guy";font-weight:400;font-size:21px;color:var(--yl);text-shadow:0 3px 0 var(--ink)}
.ac-st small{display:block;font-family:"Baloo 2";font-weight:700;font-size:14px;line-height:1.3}
.ac-st small b{display:inline;font-family:inherit;font-size:inherit;color:#fff;text-shadow:none}
.ac-st em{display:inline-block;margin-top:6px;font-style:normal;font-family:"Lilita One";font-size:13px}
.ac-st em.on{color:#5dff7a}.ac-st em.off{color:#ffb21a}
.ac-acts{width:100%;max-width:520px}
.ac-g{display:flex;justify-content:center;min-height:44px;width:100%;max-width:320px;margin:0 auto}
.ac-gload{font-family:"Baloo 2";font-weight:700;font-size:13px;opacity:.8;align-self:center}
.ac-safe{display:flex;gap:10px;align-items:flex-start;width:100%;max-width:520px;font-family:"Baloo 2";font-weight:700;font-size:13px;line-height:1.3}
.ac-safe svg{width:28px;height:28px;flex:none}
.ac-safe b{display:block;font-family:"Lilita One";font-weight:400;font-size:16px;color:var(--yl)}
.ac-form{display:flex;flex-direction:column;gap:10px;width:100%;max-width:420px}
.ac-form .p-inp{width:100%}
.ac-form a{color:var(--yl);font-weight:800}
.ac-show{font-family:"Baloo 2";font-weight:700;font-size:13px;display:flex;gap:6px;align-items:center}
.ac-err{min-height:1em;margin:0;color:#ffb0bd;font-family:"Baloo 2";font-weight:800;font-size:14px;text-shadow:0 1px 0 var(--ink)}
.p-modal .ac-err{color:#c4294a;text-shadow:none}
.p-btn.off{filter:grayscale(.6) brightness(.85)}
.p-modal.ac-wel{z-index:150;background:rgba(8,4,24,.8)}
.p-modal.ac-wel .p-card{max-width:400px;width:calc(100% - 32px)}
.ac-opts{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.ac-opts .p-btn{font-size:18px}
.ac-opts .p-btn small{text-shadow:none}

/* ---------- ranking ---------- */
.rk-you{width:100%;max-width:520px;box-shadow:0 0 0 3px var(--yl)!important}
.rk-safe{display:flex;align-items:center;gap:6px;justify-content:center;font-size:12px;margin:0}
.rk-safe svg{width:18px;height:18px}
.rk-p.me b{color:var(--yl)}

/* ---------- v2.5.2 · velocidad (mantener saltar 1.7 s) ---------- */
.btn-jump{position:relative}
.btn-jump::before{content:"";position:absolute;inset:-9px;border-radius:50%;pointer-events:none;background:conic-gradient(#7fe8ff var(--sp,100%),rgba(20,10,50,.55) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));opacity:.95}
.btn-jump.sp-charge::before{background:conic-gradient(#9aa0c0 var(--sp,0%),rgba(20,10,50,.55) 0)}
.btn-jump.sp-on::before{background:conic-gradient(#ffe14a var(--sp,100%),rgba(20,10,50,.55) 0);filter:drop-shadow(0 0 8px #ffe14a)}
.btn-jump.sp-hold::before{animation:spHold .3s infinite alternate}
.btn-jump.sp-on{box-shadow:0 0 0 4px var(--ink),0 0 0 7px #ffe14a,0 6px 0 7px #10226b,0 0 34px #ffe14a}
@keyframes spHold{to{filter:drop-shadow(0 0 10px #7fe8ff)}}
.btn-rocket{position:relative}
.rk-key{position:absolute;top:-8px;right:-8px;font-family:"Lilita One";font-size:11px;line-height:1;padding:3px 6px;border-radius:6px;background:#fff;color:var(--ink);box-shadow:0 0 0 2px var(--ink),0 2px 0 2px var(--ink);pointer-events:none}
.sp-meter{display:flex!important;margin-top:.25em;box-shadow:0 0 0 2px var(--ink),inset 0 0 0 1.5px rgba(127,232,255,.55)}
.sp-meter .sp-mi{width:1em;height:1em;background:none;position:relative}
.sp-meter .sp-mi::before{content:"";position:absolute;inset:0;background:#7fe8ff;clip-path:polygon(0 10%,55% 50%,0 90%,20% 50%);}
.sp-meter .sp-mi::after{content:"";position:absolute;inset:0;background:#7fe8ff;clip-path:polygon(40% 10%,100% 50%,40% 90%,60% 50%)}
.sp-meter span{color:#7fe8ff}
.sp-meter b{font:.6em/1 "Lilita One";color:#fff;min-width:2.4em}
.sp-meter .hm-bar div{background:linear-gradient(90deg,#3fa8ff,#7fe8ff);transition:width .1s}
.sp-meter.on{box-shadow:0 0 0 2px var(--ink),inset 0 0 0 1.5px #ffe14a,0 0 12px #ffe14a}
.sp-meter.on .hm-bar div{background:linear-gradient(90deg,#ffb21a,#ffe14a)}
.sp-meter.on b{color:#ffe14a}
.sp-meter.charge .hm-bar div{background:linear-gradient(90deg,#5a6488,#9aa0c0)}

/* ---------- v2.5.4 · banco: monedas que vuelan, +10 / −250 ---------- */
#bankFx{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.bk-coin{position:fixed;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6c0,#ffd84a 45%,#ffb21a 70%,#c46a00);box-shadow:0 0 0 2px #1a0f2e,0 0 10px rgba(255,216,74,.9);transform:translate(-50%,-50%)}
.bk-coin.out{background:radial-gradient(circle at 35% 30%,#fff6c0,#ffd84a 45%,#ff8a3a 70%,#a8143a)}
.bk-tag{position:fixed;transform:translateX(-50%);font:18px/1 "Lilita One",sans-serif;letter-spacing:.5px;text-shadow:0 2px 0 #1a0f2e,0 0 6px rgba(0,0,0,.4);-webkit-text-stroke:1px #1a0f2e;animation:bkTag 1.1s ease-out forwards}
.bk-tag.pos{color:#ffe14a}
.bk-tag.neg{color:#ff5a6a;font-size:22px}
@keyframes bkTag{0%{opacity:0;transform:translate(-50%,6px) scale(.7)}15%{opacity:1;transform:translate(-50%,0) scale(1.15)}100%{opacity:0;transform:translate(-50%,26px) scale(1)}}
.hud-cur.bk-up{animation:bkUp .25s}
.hud-cur.bk-down{animation:bkDown .5s}
@keyframes bkUp{50%{transform:scale(1.12);filter:drop-shadow(0 0 6px #ffe14a)}}
@keyframes bkDown{20%,60%{transform:translateX(-3px);filter:drop-shadow(0 0 8px #ff3a4a)}40%,80%{transform:translateX(3px)}}

/* ---------- v2.5.4 · comprar poder durante la partida ---------- */
.sp-buy-btn{position:absolute;left:calc(6px + env(safe-area-inset-left,0px));top:calc(38% - 64px);z-index:6;pointer-events:auto;touch-action:none;width:clamp(52px,13.5vw,62px);height:54px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;color:#fff;background:linear-gradient(#ffcf3a,#e07a00);box-shadow:0 0 0 3px var(--ink),0 4px 0 3px var(--ink)}
body.lefty .sp-buy-btn{left:auto;right:calc(6px + env(safe-area-inset-right,0px))}
.sp-buy-btn .sb-ic svg{width:22px;height:22px}
.sp-buy-btn b{font:10px/1 "Lilita One";text-shadow:0 1px 0 var(--ink)}
.sp-buy-btn small{font:10px/1 "Lilita One";color:#1a0f2e;margin-top:1px}
.sp-buy-btn kbd{position:absolute;top:-7px;right:-7px;font:11px/1 "Lilita One";padding:2px 5px;border-radius:6px;background:#fff;color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.sp-buy-btn.off{filter:grayscale(1) brightness(.7)}
.sp-shop-run{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;background:rgba(8,4,24,.62)}
.ssr-card{width:min(420px,100%);border-radius:22px;padding:16px 14px 14px;background:linear-gradient(180deg,#3a2a9a,#1a1250);box-shadow:0 0 0 3px var(--ink),0 7px 0 3px var(--ink);color:#fff;text-align:center}
.ssr-card h3{margin:0;font:400 24px/1 "Luckiest Guy";color:var(--yl);text-shadow:0 3px 0 var(--ink)}
.ssr-sub{margin:6px 0 12px;font:700 13px/1.3 "Baloo 2"}
.ssr-sub b{color:var(--yl)}
.ssr-sub em{color:#ffb0bd;font-style:normal}
.ssr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.ssr-it{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:14px;color:#fff;background:linear-gradient(180deg,var(--sc2),#1a1046);box-shadow:0 0 0 2.5px var(--ink),0 4px 0 2.5px var(--ink);min-width:0}
.ssr-it b{font:400 12px/1.05 "Lilita One"}
.ssr-it span{display:flex;align-items:center;gap:3px;font:400 13px/1 "Lilita One";color:var(--yl)}
.ssr-it span svg{width:15px;height:15px}
.ssr-it.off{filter:grayscale(.8) brightness(.7)}
.ssr-it.busy{opacity:.6}
.ssr-it:active{transform:translateY(2px)}

/* ---------- v2.5.5 · pila de poderes y espera de 3 s ---------- */
.sp-btn .sp-n{position:absolute;top:2px;right:3px;z-index:3;font:400 13px/1 "Lilita One";color:#fff;text-shadow:0 2px 0 var(--ink),0 0 4px var(--ink)}
.sp-btn .sp-cd{position:absolute;inset:0;z-index:2;display:grid;place-items:center;font:400 26px/1 "Luckiest Guy";font-style:normal;color:#fff;text-shadow:0 3px 0 var(--ink);pointer-events:none}
.sp-btn .sp-cd:empty{display:none}
.sp-btn.wait{animation:none}
.sp-btn.wait::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(10,5,30,.5)}