/* ===== SLM SOFT · pantalla de carga de los juegos ===== */
#slmL{--c1:120,255,60;--c2:60,180,255;--c3:170,255,120;--c4:202,255,154;--bar:linear-gradient(90deg,#1a8cff,#3dffb0 55%,#8aff1a);position:fixed;inset:0;z-index:2147483000;background:#000;overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:Sora,Outfit,system-ui,sans-serif;color:#fff;
  opacity:1;transition:opacity .55s ease .12s;-webkit-user-select:none;user-select:none;touch-action:none}
#slmL.out{opacity:0;pointer-events:none}
#slmL canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#slmL .sl-glow{position:absolute;left:50%;top:46%;width:150vmax;height:150vmax;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(var(--c1),.20) 0,rgba(var(--c2),.10) 18%,rgba(0,0,0,0) 42%);opacity:0;animation:slGlow 4s ease-in-out .1s infinite alternate}
#slmL.go .sl-glow{opacity:1}
@keyframes slGlow{0%{transform:translate(-50%,-50%) scale(.85);filter:hue-rotate(0)}100%{transform:translate(-50%,-50%) scale(1.08);filter:hue-rotate(-25deg)}}
#slmL .sl-rays{position:absolute;left:50%;top:44%;width:180vmax;height:180vmax;transform:translate(-50%,-50%);pointer-events:none;opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(var(--c1),.07) 0deg 4deg,rgba(0,0,0,0) 4deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 14%,transparent 40%);mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 14%,transparent 40%);transition:opacity 1s .8s}
#slmL.go .sl-rays{opacity:1;animation:slRot 40s linear infinite}
@keyframes slRot{to{transform:translate(-50%,-50%) rotate(360deg)}}
#slmL .sl-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.85) 100%)}
#slmL .sl-stage{position:relative;z-index:2;width:min(84vw,720px);display:flex;flex-direction:column;align-items:center;margin-top:-4vh}
#slmL.shake .sl-stage{animation:slShake .42s cubic-bezier(.3,.7,.4,1)}
@keyframes slShake{0%{transform:translate(0,0)}15%{transform:translate(-7px,5px)}30%{transform:translate(6px,-6px)}45%{transform:translate(-5px,-3px)}60%{transform:translate(4px,4px)}75%{transform:translate(-2px,2px)}100%{transform:translate(0,0)}}
#slmL .sl-by{font-size:clamp(10px,1.6vw,14px);font-weight:700;letter-spacing:1.4em;padding-left:1.4em;color:#bfc6d4;opacity:0;margin-bottom:clamp(14px,3vh,30px);white-space:nowrap}
#slmL.go .sl-by{animation:slBy 1.1s cubic-bezier(.2,.8,.2,1) .1s forwards}
@keyframes slBy{0%{opacity:0;letter-spacing:1.4em;filter:blur(6px)}100%{opacity:.85;letter-spacing:.55em;padding-left:.55em;filter:blur(0)}}
#slmL .sl-logo{position:relative;width:100%;aspect-ratio:1282/719}
#slmL .sl-slm,#slmL .sl-soft{position:absolute;display:block;opacity:0;will-change:transform,opacity,filter}
#slmL .sl-slm{left:0;top:0;width:100%;height:auto}
#slmL .sl-soft{left:6.4%;top:50.35%;width:79%;height:auto}
#slmL.go .sl-slm{animation:slSlam .62s cubic-bezier(.16,1.25,.3,1) .32s forwards}
@keyframes slSlam{0%{opacity:0;transform:scale(2.6) translateY(-4%);filter:blur(22px) brightness(3)}55%{opacity:1;filter:blur(0) brightness(1.6)}100%{opacity:1;transform:scale(1);filter:blur(0) brightness(1)}}
#slmL.go .sl-soft{animation:slNeon 1.1s steps(1,end) 1.02s forwards}
@keyframes slNeon{0%{opacity:0}8%{opacity:1}14%{opacity:.1}22%{opacity:.9}30%{opacity:.25}38%{opacity:1}52%{opacity:.6}60%,100%{opacity:1}}
#slmL .sl-soft.on{filter:drop-shadow(0 0 14px rgba(110,255,40,.55));animation:slSoftPulse 2.2s ease-in-out infinite alternate!important;opacity:1}
@keyframes slSoftPulse{to{filter:drop-shadow(0 0 26px rgba(110,255,40,.85)) brightness(1.12)}}
/* barrido de luz sobre el cromo (usa el propio logo como máscara) */
#slmL .sl-sheen{position:absolute;left:0;top:0;width:100%;aspect-ratio:1282/332;pointer-events:none;opacity:0;mix-blend-mode:screen;
  -webkit-mask:url(slm.webp) center/100% 100% no-repeat;mask:url(slm.webp) center/100% 100% no-repeat;
  background:linear-gradient(105deg,transparent 0,transparent 38%,rgba(255,255,255,.95) 47%,rgba(var(--c4),.9) 50%,rgba(255,255,255,.95) 53%,transparent 62%,transparent 100%) no-repeat;background-size:250% 100%;background-position:120% 0}
#slmL.go .sl-sheen{opacity:1;animation:slSheen 2.6s cubic-bezier(.45,0,.2,1) .95s infinite}
@keyframes slSheen{0%{background-position:130% 0}45%,100%{background-position:-30% 0}}
/* onda de choque, destello horizontal y flash */
#slmL .sl-ring{position:absolute;left:50%;top:23%;width:30%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(0);border:3px solid rgba(var(--c3),.9);box-shadow:0 0 40px rgba(var(--c1),.8),inset 0 0 30px rgba(var(--c2),.6);opacity:0;pointer-events:none}
#slmL .sl-ring.b{border-color:rgba(var(--c2),.8);border-width:2px}
#slmL.hit .sl-ring{animation:slRing .9s cubic-bezier(.1,.7,.3,1) forwards}
#slmL.hit .sl-ring.b{animation-delay:.09s}
@keyframes slRing{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(5.5)}}
#slmL .sl-flare{position:absolute;left:50%;top:23%;width:220%;height:5px;transform:translate(-50%,-50%) scaleX(0);pointer-events:none;border-radius:50%;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(var(--c1),0) 10%,rgba(var(--c3),.9) 40%,#fff 50%,rgba(var(--c2),.9) 60%,transparent 90%);filter:blur(1px);box-shadow:0 0 30px rgba(var(--c1),.8)}
#slmL.hit .sl-flare{animation:slFlare 1s cubic-bezier(.1,.8,.3,1) forwards}
@keyframes slFlare{0%{opacity:1;transform:translate(-50%,-50%) scaleX(.05)}35%{opacity:1;transform:translate(-50%,-50%) scaleX(1)}100%{opacity:0;transform:translate(-50%,-50%) scaleX(1.2) scaleY(.4)}}
#slmL .sl-flash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.95),rgba(var(--c3),.45) 30%,transparent 65%);opacity:0;z-index:3}
#slmL.hit .sl-flash{animation:slFlash .55s ease-out forwards}
@keyframes slFlash{0%{opacity:.95}100%{opacity:0}}
/* barra de carga */
#slmL .sl-load{width:min(100%,520px);margin-top:clamp(18px,4vh,40px);opacity:0;transform:translateY(12px)}
#slmL.go .sl-load{animation:slUp .6s cubic-bezier(.2,.8,.2,1) 1.25s forwards}
@keyframes slUp{to{opacity:1;transform:none}}
#slmL .sl-track{position:relative;height:6px;border-radius:6px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 18px rgba(var(--c1),.08);overflow:visible}
#slmL .sl-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:6px;background:var(--bar);box-shadow:0 0 12px rgba(var(--c1),.8),0 0 28px rgba(var(--c2),.4);overflow:hidden}
#slmL .sl-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:slShim 1.1s linear infinite}
@keyframes slShim{from{background-position:-60% 0}to{background-position:160% 0}}
#slmL .sl-dot{position:absolute;top:50%;left:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle,#fff 0,rgb(var(--c4)) 30%,rgba(var(--c1),0) 70%);box-shadow:0 0 18px 6px rgba(var(--c1),.6)}
#slmL .sl-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;font-size:clamp(10px,1.5vw,12px);font-weight:700;letter-spacing:.28em;color:#9aa3b5}
#slmL .sl-row b{font-size:clamp(13px,2vw,16px);letter-spacing:.06em;color:rgb(var(--c4));font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(var(--c1),.6)}
#slmL.ready .sl-row span{color:rgb(var(--c4))}
#slmL .sl-url{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;font-size:10px;letter-spacing:.35em;color:rgba(255,255,255,.28);z-index:2}
/* salida: el logo se acerca y todo se desvanece */
#slmL.out .sl-stage{transition:transform .6s cubic-bezier(.5,0,.2,1),filter .6s;transform:scale(1.12);filter:blur(8px)}
/* ===== con logo propio (sección, GANAMOS o imagen subida): mismos efectos, colores sacados del logo ===== */
#slmL.slb .sl-stage{margin-top:-2vh}
#slmL .sl-blogo{--ar:3;aspect-ratio:var(--ar);width:min(100%,calc(34vh * var(--ar)));max-width:100%}
#slmL .sl-bimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;opacity:0;will-change:transform,opacity,filter}
#slmL .sl-btxt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;opacity:0;font-family:Cinzel,'Trajan Pro',Georgia,serif;font-weight:900;
  font-size:clamp(28px,7.2vw,74px);line-height:1.05;letter-spacing:.06em;text-transform:uppercase;color:#ffe9a8;padding:0 4%;
  background:linear-gradient(180deg,#fff7d6 0,#ffd75e 45%,#e09a1c 58%,#ffe28a 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 0 rgba(90,40,0,.85)) drop-shadow(0 0 18px rgba(var(--c1),.35))}
#slmL.slb .sl-sheen{aspect-ratio:auto;height:100%;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
#slmL.slb .sl-ring,#slmL.slb .sl-flare{top:50%}
#slmL.slb .sl-ring{width:22%}
#slmL.go .sl-bimg{animation:slSlam .62s cubic-bezier(.16,1.25,.3,1) .32s forwards}
#slmL.go .sl-btxt{animation:slSlamT .62s cubic-bezier(.16,1.25,.3,1) .32s forwards}
@keyframes slSlamT{0%{opacity:0;transform:scale(2.6) translateY(-4%);filter:blur(22px) brightness(3) drop-shadow(0 3px 0 rgba(90,40,0,0))}55%{opacity:1;filter:blur(0) brightness(1.6) drop-shadow(0 3px 0 rgba(90,40,0,.85))}100%{opacity:1;transform:scale(1);filter:blur(0) brightness(1) drop-shadow(0 3px 0 rgba(90,40,0,.85))}}
#slmL .sl-bimg.on{opacity:1;animation:slBrandPulse 2.4s ease-in-out infinite alternate!important}
@keyframes slBrandPulse{0%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 10px rgba(var(--c1),.45))}100%{opacity:1;transform:scale(1.025);filter:drop-shadow(0 0 24px rgba(var(--c1),.8)) brightness(1.08)}}
#slmL .sl-btxt.on{opacity:1;animation:slTxtPulse 2.4s ease-in-out infinite alternate!important}
@keyframes slTxtPulse{0%{opacity:1;transform:scale(1);filter:drop-shadow(0 3px 0 rgba(90,40,0,.85)) drop-shadow(0 0 10px rgba(var(--c1),.4))}100%{opacity:1;transform:scale(1.025);filter:drop-shadow(0 3px 0 rgba(90,40,0,.85)) drop-shadow(0 0 24px rgba(var(--c1),.75)) brightness(1.08)}}
/* ===== versión simple (GANAMOS.NET o imagen subida): fondo negro, el logo y la barra ===== */
#slmL.slmin{background:#000}
#slmL.slmin canvas{display:none}
#slmL.slmin .sl-stage{margin-top:-1vh}
#slmL.slmin .sl-blogo{width:min(100%,calc(30vh * var(--ar)))}
#slmL.slmin.go .sl-bimg{animation:slFadeIn .9s cubic-bezier(.2,.8,.2,1) .1s forwards}
@keyframes slFadeIn{0%{opacity:0;transform:scale(.94);filter:blur(10px)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
#slmL.slmin .sl-bimg.on{animation:slSoftGlow 2.6s ease-in-out infinite alternate!important}
@keyframes slSoftGlow{0%{opacity:1;filter:drop-shadow(0 0 0 rgba(var(--c1),0))}100%{opacity:1;filter:drop-shadow(0 0 18px rgba(var(--c1),.38))}}
#slmL.slmin.go .sl-load{animation-delay:.55s}
#slmL.slmin .sl-track{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
#slmL.slmin .sl-fill{box-shadow:0 0 10px rgba(var(--c1),.55)}
#slmL.slmin .sl-dot{width:12px;height:12px;margin:-6px 0 0 -6px;box-shadow:0 0 12px 3px rgba(var(--c1),.5)}
#slmL.slgn .sl-row b{color:#ffe39a;text-shadow:0 0 12px rgba(245,196,81,.45)}
#slmL.slgn.ready .sl-row span{color:#ffe39a}
#slmL.slgn .sl-dot{background:radial-gradient(circle,#fff 0,#ffe39a 35%,rgba(245,196,81,0) 70%)}
#slmL.slmin.out .sl-stage{transform:scale(1.04);filter:blur(4px)}
@media (prefers-reduced-motion:reduce){#slmL *{animation-duration:.01s!important;animation-delay:0s!important}}