/* ============================================================
   SAUCE — capa de jugo visual.
   Se carga LA ÚLTIMA (después incluso del tema de día) para poder
   pisar cualquier color fijo. Todo lo de acá es decorativo: si se
   borra el archivo, el juego sigue funcionando igual.

   Convención de nombres: todo lo que inyecta el motor usa prefijo
   .sx-  (sauce effect). Lo que es marcado permanente del HUD, no.
   ============================================================ */

:root{
  --fire1:#ffd24a;
  --fire2:#ff8c1a;
  --fire3:#ff3b1f;
  --ice:#6fd6ff;
}

/* ---------- Capa de partículas (fija, por encima de todo) ---------- */
#sauce-layer{position:fixed;inset:0;pointer-events:none;z-index:9990;overflow:hidden}
#sauce-layer *{pointer-events:none}
/* #app no estaba posicionado, así que los velos fijos de racha alta
   (body::after) le quedaban ENCIMA y apagaban el texto. */
#app{position:relative;z-index:2}

/* ============================================================
   1 · NÚMEROS QUE CAMBIAN
   ============================================================ */

/* Los <b> del HUD necesitan ser inline-block para poder escalarse. */
.statrow b,.meta-item b,.media-badge b,.hud-age b,.racha-num{display:inline-block}

@keyframes sx-bump-up{
  0%  {transform:scale(1) rotate(0)}
  22% {transform:scale(1.75) rotate(-5deg);color:var(--up);text-shadow:0 0 20px var(--up),0 0 6px var(--up)}
  55% {transform:scale(.92) rotate(2deg);color:var(--up);text-shadow:0 0 10px var(--up)}
  100%{transform:scale(1) rotate(0);text-shadow:none}
}
@keyframes sx-bump-down{
  0%  {transform:translateX(0)}
  15% {transform:translateX(-5px) scale(1.35);color:var(--down);text-shadow:0 0 16px var(--down)}
  35% {transform:translateX(5px) scale(1.2);color:var(--down)}
  55% {transform:translateX(-3px) scale(1.05);color:var(--down)}
  75% {transform:translateX(3px) scale(1)}
  100%{transform:translateX(0);text-shadow:none}
}
.sx-bump-up{animation:sx-bump-up .62s cubic-bezier(.2,1.4,.35,1)}
.sx-bump-down{animation:sx-bump-down .55s ease-out}

/* La fila entera se ilumina un instante cuando algo se mueve. */
@keyframes sx-row-up{
  0%{background:transparent;box-shadow:none}
  25%{background:rgba(61,220,132,.16);box-shadow:inset 0 0 0 1px rgba(61,220,132,.45)}
  100%{background:transparent;box-shadow:none}
}
@keyframes sx-row-down{
  0%{background:transparent}
  25%{background:rgba(255,90,90,.16);box-shadow:inset 0 0 0 1px rgba(255,90,90,.45)}
  100%{background:transparent;box-shadow:none}
}
.sx-row-up{animation:sx-row-up .9s ease-out;border-radius:8px}
.sx-row-down{animation:sx-row-down .9s ease-out;border-radius:8px}

/* Barritas: destello que barre de izquierda a derecha al subir. */
.bar i,.hpbar i,.progress-fill{position:relative;overflow:hidden}
.sx-shine::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.95) 50%,transparent 80%);
  animation:sx-shine .8s cubic-bezier(.3,0,.2,1);
}
@keyframes sx-shine{from{transform:translateX(-120%)}to{transform:translateX(220%)}}

/* Deltas flotantes (+3, -12, ¡CRIT!) */
.sx-float{
  position:fixed;left:0;top:0;
  font-family:Impact,"Arial Black","Segoe UI",sans-serif;
  letter-spacing:.03em;text-transform:uppercase;
  font-size:19px;font-weight:900;white-space:nowrap;
  animation:sx-float 1.15s cubic-bezier(.15,.85,.3,1) forwards;
  will-change:transform,opacity;
}
.sx-float.up   {color:var(--up);   text-shadow:0 0 14px rgba(61,220,132,.85),0 2px 0 rgba(0,0,0,.55)}
.sx-float.down {color:var(--down); text-shadow:0 0 14px rgba(255,90,90,.85),0 2px 0 rgba(0,0,0,.55)}
.sx-float.gold {color:var(--gold); text-shadow:0 0 16px rgba(255,204,0,.9),0 2px 0 rgba(0,0,0,.55)}
.sx-float.fire {color:#fff;background:linear-gradient(180deg,var(--fire1),var(--fire3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 12px rgba(255,140,26,.9))}
.sx-float.crit{font-size:30px;animation-duration:1.4s}
.sx-float.big {font-size:34px}
@keyframes sx-float{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-8deg)}
  16% {opacity:1;transform:translate(-50%,-95%) scale(1.35) rotate(3deg)}
  32% {opacity:1;transform:translate(-50%,-118%) scale(1) rotate(0)}
  100%{opacity:0;transform:translate(-50%,-300%) scale(.85)}
}

/* ============================================================
   2 · JITTER — cuando un número está DEMASIADO alto (o bajo)
   ============================================================ */

@keyframes sx-jitter{
  0%,100%{transform:translate(0,0) rotate(0)}
  20%{transform:translate(-1px,.5px) rotate(-1.5deg)}
  40%{transform:translate(1px,-1px) rotate(1.5deg)}
  60%{transform:translate(-.5px,-1px) rotate(-1deg)}
  80%{transform:translate(1px,1px) rotate(1deg)}
}
@keyframes sx-jitter-hard{
  0%,100%{transform:translate(0,0) rotate(0) scale(1)}
  10%{transform:translate(-2px,1px) rotate(-3deg) scale(1.04)}
  25%{transform:translate(2px,-2px) rotate(3deg) scale(.98)}
  40%{transform:translate(-2px,-1px) rotate(-2deg) scale(1.05)}
  55%{transform:translate(2px,2px) rotate(2.5deg) scale(1)}
  70%{transform:translate(-1px,2px) rotate(-3deg) scale(1.03)}
  85%{transform:translate(2px,-1px) rotate(2deg) scale(.99)}
}
@keyframes sx-warm-pulse{
  from{text-shadow:0 0 6px rgba(255,204,0,.5)}
  to  {text-shadow:0 0 16px rgba(255,204,0,.95),0 0 30px rgba(255,140,26,.5)}
}
@keyframes sx-blaze-hue{
  0%  {filter:drop-shadow(0 0 8px rgba(255,140,26,.9))}
  50% {filter:drop-shadow(0 0 18px rgba(255,59,31,1))}
  100%{filter:drop-shadow(0 0 8px rgba(255,210,74,.9))}
}
@keyframes sx-danger-beat{
  0%,100%{transform:scale(1);text-shadow:0 0 6px rgba(255,90,90,.5)}
  12%{transform:scale(1.22);text-shadow:0 0 20px rgba(255,90,90,1)}
  24%{transform:scale(1)}
  36%{transform:scale(1.14)}
  48%{transform:scale(1)}
}

/* nivel 1 · caliente: brilla dorado, todavía no tiembla */
.sx-warm{color:var(--gold)!important;animation:sx-warm-pulse 1.1s ease-in-out infinite alternate}
/* nivel 2 · muy alto: tiembla */
.sx-hot{
  color:var(--gold)!important;
  animation:sx-jitter .26s steps(2,end) infinite,sx-warm-pulse .9s ease-in-out infinite alternate;
}
/* nivel 3 · roto: tiembla feo y arde */
.sx-blaze{
  background:linear-gradient(180deg,var(--fire1) 10%,var(--fire3) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
  animation:sx-jitter-hard .22s steps(2,end) infinite,sx-blaze-hue .7s ease-in-out infinite alternate;
}
.sx-blaze::after{content:"🔥";-webkit-text-fill-color:initial;font-size:.62em;margin-left:.18em;vertical-align:super}
/* valores peligrosamente bajos: latido rojo */
.sx-danger{color:var(--down)!important;animation:sx-danger-beat 1.15s ease-in-out infinite}
/* dinero en negativo: tembleque nervioso */
.sx-broke{color:var(--down)!important;animation:sx-jitter .3s steps(2,end) infinite}

/* Insignia de media al rojo vivo */
.media-badge.sx-hot-badge{
  animation:sx-jitter .3s steps(2,end) infinite;
  border-color:var(--gold)!important;
  box-shadow:0 0 18px rgba(255,204,0,.6),inset 0 0 14px rgba(255,140,26,.35)!important;
}

/* ============================================================
   3 · RACHA DE VICTORIAS — el fuego
   ============================================================ */
.racha-bar{
  display:none;align-items:center;gap:10px;
  margin-top:10px;padding:9px 14px;position:relative;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  transition:border-color .4s ease,box-shadow .4s ease;
}
.racha-bar.on{display:flex;animation:sx-racha-in .55s cubic-bezier(.16,1.4,.3,1)}
@keyframes sx-racha-in{
  0%{opacity:0;transform:translateY(-14px) scaleY(.5)}
  60%{opacity:1;transform:translateY(0) scaleY(1.08)}
  100%{transform:none}
}
.racha-ico{font-size:22px;line-height:1;position:relative;z-index:2;flex:0 0 auto}
.racha-num{
  font-family:Impact,"Arial Black",sans-serif;font-size:30px;line-height:1;
  font-variant-numeric:tabular-nums;position:relative;z-index:2;min-width:1.2em;text-align:center;
}
.racha-txt{display:flex;flex-direction:column;line-height:1.15;position:relative;z-index:2;min-width:0}
.racha-txt b{font-family:Impact,"Arial Black",sans-serif;letter-spacing:.14em;text-transform:uppercase;font-size:13px;transition:color .4s ease}
.racha-txt small{font-size:11px;color:var(--dim)}
.racha-best{
  margin-left:auto;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);position:relative;z-index:2;white-space:nowrap;
}
/* llamas: <i> generados por JS, suben desde el borde inferior */
.racha-fire{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .5s ease}
.racha-fire i{
  position:absolute;bottom:-14px;width:26px;height:26px;border-radius:50% 50% 46% 46%;
  background:radial-gradient(circle at 50% 75%,var(--fire1),var(--fire2) 45%,rgba(255,59,31,0) 72%);
  filter:blur(3px);animation:sx-flame 1.5s ease-in infinite;
}
@keyframes sx-flame{
  0%  {opacity:0;transform:translateY(0) scale(.5)}
  25% {opacity:.85}
  100%{opacity:0;transform:translateY(-46px) scale(1.5) rotate(12deg)}
}

/* --- niveles --- */
.racha-bar.r1{border-color:#3a5bb5}
.racha-bar.r1 .racha-num{color:#8fb2ff}

.racha-bar.r2{border-color:var(--fire2);box-shadow:0 0 18px rgba(255,140,26,.28)}
.racha-bar.r2 .racha-num{color:var(--fire1)}
.racha-bar.r2 .racha-fire{opacity:.55}
.racha-bar.r2 .racha-tit{color:var(--fire1)}
.racha-bar.r2 .racha-ico{animation:sx-jitter .32s steps(2,end) infinite}

.racha-bar.r3{border-color:var(--fire3);box-shadow:0 0 26px rgba(255,59,31,.42);animation:sx-racha-breathe 1.1s ease-in-out infinite alternate}
.racha-bar.r3 .racha-num{background:linear-gradient(180deg,var(--fire1),var(--fire3));-webkit-background-clip:text;background-clip:text;color:transparent;animation:sx-jitter .26s steps(2,end) infinite}
.racha-bar.r3 .racha-fire{opacity:.85}
.racha-bar.r3 .racha-tit{color:var(--fire2)}
.racha-bar.r3 .racha-ico{animation:sx-jitter-hard .24s steps(2,end) infinite}

.racha-bar.r4{border-color:#fff0a8;box-shadow:0 0 34px rgba(255,140,26,.6),inset 0 0 26px rgba(255,59,31,.25);animation:sx-racha-breathe .8s ease-in-out infinite alternate}
.racha-bar.r4 .racha-num{background:linear-gradient(180deg,#fff,var(--fire2));-webkit-background-clip:text;background-clip:text;color:transparent;animation:sx-jitter-hard .2s steps(2,end) infinite}
.racha-bar.r4 .racha-fire{opacity:1}
.racha-bar.r4 .racha-tit{color:#fff0a8}
.racha-bar.r4 .racha-ico{animation:sx-jitter-hard .18s steps(2,end) infinite}

.racha-bar.r5{
  border-color:transparent;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,
             linear-gradient(90deg,var(--fire1),var(--fire3),var(--epic),var(--rare),var(--fire1)) border-box;
  border:2px solid transparent;
  background-size:auto,300% 100%;
  animation:sx-goat-border 2.4s linear infinite,sx-racha-breathe .65s ease-in-out infinite alternate;
  box-shadow:0 0 40px rgba(255,140,26,.7);
}
.racha-bar.r5 .racha-num{
  background:linear-gradient(90deg,var(--fire1),#fff,var(--fire3),var(--epic),var(--fire1));
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sx-goat-border 1.6s linear infinite,sx-jitter-hard .16s steps(2,end) infinite;
}
.racha-bar.r5 .racha-fire{opacity:1}
.racha-bar.r5 .racha-tit{color:var(--gold)}
.racha-bar.r5 .racha-ico{font-size:26px;animation:sx-jitter-hard .16s steps(2,end) infinite}
@keyframes sx-goat-border{from{background-position:0 0,0% 50%}to{background-position:0 0,300% 50%}}
@keyframes sx-racha-breathe{from{transform:scale(1)}to{transform:scale(1.012)}}

/* Racha rota: ceniza y desplome */
@keyframes sx-racha-break{
  0%{transform:none;filter:none}
  15%{transform:translateX(-8px) rotate(-1.5deg);filter:grayscale(.4)}
  30%{transform:translateX(8px) rotate(1.5deg);filter:grayscale(.7)}
  45%{transform:translateX(-5px);filter:grayscale(1)}
  100%{transform:translateY(6px) scaleY(.9);opacity:.25;filter:grayscale(1)}
}
.racha-bar.rota{animation:sx-racha-break .9s ease-in forwards!important}

/* Vibra el fondo de la página entera con racha alta */
body.sx-inferno::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 120% 45% at 50% 118%,rgba(255,80,20,.30),transparent 65%);
  animation:sx-inferno-pulse 1.5s ease-in-out infinite alternate;
}
body.sx-goat::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(ellipse 120% 45% at 50% 118%,rgba(255,80,20,.42),transparent 62%),
    radial-gradient(ellipse 90% 40% at 50% -12%,rgba(168,85,247,.30),transparent 62%);
  animation:sx-inferno-pulse .9s ease-in-out infinite alternate;
}
@keyframes sx-inferno-pulse{from{opacity:.55}to{opacity:1}}

/* ============================================================
   4 · EFECTOS DE PANTALLA
   ============================================================ */
@keyframes sx-shake-1{0%,100%{transform:translate(0,0)}25%{transform:translate(-3px,1px)}50%{transform:translate(3px,-1px)}75%{transform:translate(-2px,-1px)}}
@keyframes sx-shake-2{0%,100%{transform:translate(0,0) rotate(0)}15%{transform:translate(-8px,3px) rotate(-.4deg)}30%{transform:translate(8px,-3px) rotate(.4deg)}45%{transform:translate(-6px,-2px)}60%{transform:translate(6px,2px)}80%{transform:translate(-3px,1px)}}
@keyframes sx-shake-3{0%,100%{transform:translate(0,0) rotate(0) scale(1)}10%{transform:translate(-14px,6px) rotate(-1deg) scale(1.01)}22%{transform:translate(14px,-6px) rotate(1deg)}34%{transform:translate(-12px,-5px) rotate(-.8deg) scale(1.008)}46%{transform:translate(12px,5px) rotate(.8deg)}58%{transform:translate(-8px,3px)}70%{transform:translate(8px,-3px)}84%{transform:translate(-4px,1px)}}
#app.sx-shake-1{animation:sx-shake-1 .3s ease}
#app.sx-shake-2{animation:sx-shake-2 .45s cubic-bezier(.36,.07,.19,.97)}
#app.sx-shake-3{animation:sx-shake-3 .75s cubic-bezier(.36,.07,.19,.97)}

/* Lavado de color a pantalla completa */
.sx-wash{position:fixed;inset:0;pointer-events:none;z-index:9985;opacity:0;animation:sx-wash .5s ease-out forwards}
@keyframes sx-wash{0%{opacity:0}18%{opacity:.6}100%{opacity:0}}

/* Onda expansiva */
.sx-wave{
  position:fixed;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%);border:3px solid currentColor;
  animation:sx-wave .75s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes sx-wave{
  0%{width:0;height:0;opacity:.95;border-width:8px}
  100%{width:min(150vw,1400px);height:min(150vw,1400px);opacity:0;border-width:1px}
}

/* Cartel gigante que entra de golpe */
.sx-slam{
  position:fixed;left:50%;top:36%;z-index:9995;pointer-events:none;text-align:center;
  transform:translate(-50%,-50%);
  font-family:Impact,"Arial Black",sans-serif;letter-spacing:.03em;text-transform:uppercase;
  font-size:clamp(38px,10vw,104px);line-height:.95;
  animation:sx-slam 1.7s cubic-bezier(.16,1,.3,1) forwards;
}
.sx-slam small{display:block;font-family:"Segoe UI",sans-serif;font-size:clamp(12px,2.6vw,17px);letter-spacing:.24em;margin-top:10px;opacity:.9;text-transform:uppercase}
.sx-slam.gold{background:linear-gradient(180deg,#fff 25%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 26px rgba(255,204,0,.75))}
.sx-slam.fire{background:linear-gradient(180deg,var(--fire1) 15%,var(--fire3));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px rgba(255,80,20,.9))}
.sx-slam.bad {background:linear-gradient(180deg,#fff 20%,var(--down));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(255,90,90,.7))}
.sx-slam.cool{background:linear-gradient(180deg,#fff 20%,var(--rare));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(61,169,252,.7))}
.sx-slam small{color:var(--txt);-webkit-text-fill-color:currentColor}
@keyframes sx-slam{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(3.2) rotate(-9deg);filter:blur(14px)}
  12% {opacity:1;transform:translate(-50%,-50%) scale(.92) rotate(1.5deg);filter:blur(0)}
  20% {transform:translate(-50%,-50%) scale(1.06) rotate(-1deg)}
  28% {transform:translate(-50%,-50%) scale(1) rotate(0)}
  72% {opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-165%) scale(.78)}
}

/* Confeti / partículas */
.sx-bit{position:fixed;left:0;top:0;will-change:transform,opacity;animation:sx-bit-fall 1.9s cubic-bezier(.25,.6,.4,1) forwards}
.sx-bit.emoji{font-size:22px;line-height:1}
@keyframes sx-bit-fall{
  0%  {opacity:1;transform:translate(-50%,-50%) rotate(0) scale(.4)}
  12% {transform:translate(calc(-50% + var(--dx)*.28),calc(-50% + var(--dy)*.5)) rotate(140deg) scale(1.1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + 78vh)) rotate(var(--rot)) scale(.85)}
}
/* chispas rápidas que no caen: estallan y mueren */
.sx-spark{position:fixed;left:0;top:0;border-radius:50%;will-change:transform,opacity;animation:sx-spark .7s cubic-bezier(.1,.8,.3,1) forwards}
@keyframes sx-spark{
  0%  {opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.15)}
}

/* ============================================================
   5 · ENTRADAS DE PANTALLA Y CONTENIDO
   ============================================================ */
.screen.on{animation:sx-screen-in .42s cubic-bezier(.16,1,.3,1)}
@keyframes sx-screen-in{
  0%{opacity:0;transform:translateY(18px) scale(.985)}
  100%{opacity:1;transform:none}
}
.sx-stagger > *{animation:sx-rise .5s cubic-bezier(.16,1,.3,1) backwards}
@keyframes sx-rise{
  0%{opacity:0;transform:translateY(16px) scale(.97)}
  100%{opacity:1;transform:none}
}
/* Aparición de contenido inyectado (resultados de evento, etc.) */
.sx-reveal{animation:sx-reveal .55s cubic-bezier(.16,1.3,.3,1)}
@keyframes sx-reveal{
  0%{opacity:0;transform:translateY(14px) scale(.96)}
  60%{opacity:1;transform:translateY(-3px) scale(1.015)}
  100%{transform:none}
}
/* Golpe de énfasis para líneas importantes (título, ascenso, muerte) */
.title-win{animation:sx-title-win .9s cubic-bezier(.16,1.5,.3,1)}
@keyframes sx-title-win{
  0%{opacity:0;transform:scale(.7) rotate(-2deg);box-shadow:0 0 0 rgba(255,204,0,0)}
  45%{opacity:1;transform:scale(1.04) rotate(.6deg);box-shadow:0 0 40px rgba(255,204,0,.6)}
  100%{transform:none}
}

/* ============================================================
   6 · MICRO-INTERACCIÓN
   ============================================================ */
button{transition:transform .12s cubic-bezier(.2,1.6,.4,1),box-shadow .16s ease,border-color .16s ease,filter .16s ease}
button:hover:not(:disabled){transform:translateY(-2px) scale(1.018)}
button:active:not(:disabled){transform:translateY(2px) scale(.97)}
.opt:hover:not(:disabled),.shop-item:hover:not(:disabled),.movecard:hover,.move-btn:hover{transform:translateX(4px) scale(1.006)}
.buff:hover{transform:translateY(-6px) scale(1.03) rotate(-.6deg)}
.mode-card:hover{transform:translateY(-4px) scale(1.02)}
.qte-opt:hover:not(:disabled){transform:scale(1.06)}

/* Ripple del click, plantado por JS */
.sx-ripple{position:absolute;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);
  animation:sx-ripple .55s ease-out forwards}
@keyframes sx-ripple{0%{width:0;height:0;opacity:.8}100%{width:320px;height:320px;opacity:0}}

/* El logo respira */
@keyframes sx-logo{
  0%,100%{filter:drop-shadow(0 0 18px rgba(232,17,45,.5));transform:none}
  50%{filter:drop-shadow(0 0 34px rgba(232,17,45,.85));transform:scale(1.015)}
}
h1.logo{animation:sx-logo 3.4s ease-in-out infinite}

/* La carta CABRA no solo brilla: flota */
@keyframes sx-cabra-float{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-6px) rotate(.5deg)}}
.buff.r-cabra{animation:glow 1.6s ease-in-out infinite alternate,sx-cabra-float 2.6s ease-in-out infinite}
.buff.r-cabra:hover{animation-play-state:paused}
.buff.r-epico{animation:sx-epic-pulse 2s ease-in-out infinite alternate}
@keyframes sx-epic-pulse{from{box-shadow:0 0 12px rgba(168,85,247,.2)}to{box-shadow:0 0 28px rgba(168,85,247,.55)}}

/* QTE: el reloj se pone nervioso cuando queda poco */
.qte-timer i{transition:width .1s linear}
.qte-timer.apurate i{animation:sx-jitter .16s steps(2,end) infinite}
.qte-word{animation:sx-word-in .4s cubic-bezier(.16,1.6,.3,1)}
@keyframes sx-word-in{0%{opacity:0;transform:scale(.5) rotate(-4deg)}100%{opacity:1;transform:none}}
.qte-opt.hit{animation:sx-hit .45s cubic-bezier(.16,1.6,.3,1)}
.qte-opt.miss{animation:sx-miss .4s ease-out}
@keyframes sx-hit{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes sx-miss{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.flash-count{animation:sx-count-beat .5s ease-out infinite}
@keyframes sx-count-beat{0%{transform:scale(1.12);opacity:1}60%{transform:scale(1);opacity:.85}100%{transform:scale(1);opacity:1}}

/* UPA: el panel del que come el golpe parpadea y se sacude */
@keyframes sx-mon-hit{
  0%,100%{transform:translateX(0);filter:none}
  15%{transform:translateX(-9px);filter:brightness(2.4) saturate(.3)}
  30%{transform:translateX(9px);filter:brightness(.7)}
  45%{transform:translateX(-6px);filter:brightness(2)}
  60%{transform:translateX(6px);filter:none}
  80%{transform:translateX(-3px)}
}
.mon.sx-hit{animation:sx-mon-hit .5s ease-out}
.mon.sx-crit{animation:sx-mon-hit .7s ease-out}
.mon.sx-heal{animation:sx-mon-heal .8s ease-out}
@keyframes sx-mon-heal{0%,100%{box-shadow:none}40%{box-shadow:0 0 0 3px rgba(61,220,132,.55),0 0 30px rgba(61,220,132,.4)}}
.mon.sx-down{animation:sx-mon-down 1s cubic-bezier(.4,0,.6,1) forwards}
@keyframes sx-mon-down{0%{transform:none;opacity:1}100%{transform:translateY(22px) rotate(-2.5deg);opacity:.35;filter:grayscale(1)}}
/* HP crítico: la barra late */
.hpbar i.low{animation:sx-hp-low .55s ease-in-out infinite alternate}
@keyframes sx-hp-low{from{filter:brightness(1)}to{filter:brightness(1.9) drop-shadow(0 0 8px rgba(232,17,45,.9))}}
.bar.salud i.low{animation:sx-hp-low .55s ease-in-out infinite alternate}

/* Casino: los rodillos giran antes de parar */
@keyframes sx-reel{0%{transform:translateY(-14px);opacity:0;filter:blur(4px)}100%{transform:none;opacity:1;filter:none}}
.sx-reel{display:inline-block;animation:sx-reel .4s cubic-bezier(.16,1.4,.3,1) backwards}

/* Veredicto final */
.verdict{animation:sx-verdict 1.4s cubic-bezier(.16,1,.3,1)}
@keyframes sx-verdict{
  0%{opacity:0;transform:scale(2.6) rotate(-6deg);filter:blur(16px)}
  35%{opacity:1;transform:scale(.96);filter:blur(0)}
  55%{transform:scale(1.03)}
  100%{transform:none}
}
.dice{animation:roll .8s ease,sx-cabra-float 2.4s ease-in-out .8s infinite}

/* ============================================================
   7 · AJUSTES DEL TEMA DE DÍA
   Los degradados de fuego sobre blanco necesitan bajar un punto.
   ============================================================ */
body[data-theme="day"] .sx-float.up{text-shadow:0 0 10px rgba(15,122,74,.5),0 1px 0 rgba(255,255,255,.8)}
body[data-theme="day"] .sx-float.down{text-shadow:0 0 10px rgba(192,57,43,.5),0 1px 0 rgba(255,255,255,.8)}
body[data-theme="day"] .sx-float.gold{text-shadow:0 0 10px rgba(168,110,0,.5),0 1px 0 rgba(255,255,255,.8)}
body[data-theme="day"] .sx-float.fire{background:linear-gradient(180deg,#e08900,#c0392b);-webkit-background-clip:text;background-clip:text}
body[data-theme="day"] .sx-warm,
body[data-theme="day"] .sx-hot{text-shadow:0 0 8px rgba(224,168,0,.55)}
body[data-theme="day"] .sx-blaze{background:linear-gradient(180deg,#e08900,#b3261e);-webkit-background-clip:text;background-clip:text}
body[data-theme="day"] .racha-bar.r2{box-shadow:0 0 0 1px rgba(224,137,0,.4),var(--card-shadow)}
body[data-theme="day"] .racha-bar.r3{box-shadow:0 0 0 2px rgba(192,57,43,.35),var(--card-shadow)}
body[data-theme="day"] .racha-bar.r4{border-color:#e08900;box-shadow:0 0 0 3px rgba(224,137,0,.35),var(--card-shadow)}
body[data-theme="day"] .racha-bar.r5{box-shadow:0 0 0 3px rgba(224,137,0,.4),var(--card-shadow)}
/* Los degradados de fuego arrancan en blanco: sobre el panel blanco del
   tema de día el número se volvía invisible. Acá van versiones oscuras. */
body[data-theme="day"] .racha-bar.r3 .racha-num,
body[data-theme="day"] .racha-bar.r4 .racha-num{background:linear-gradient(180deg,#e08900,#b3261e);-webkit-background-clip:text;background-clip:text}
body[data-theme="day"] .racha-bar.r5 .racha-num{background:linear-gradient(90deg,#c47700,#b3261e,#7b3fb5,#c47700);background-size:300% 100%;-webkit-background-clip:text;background-clip:text}
body[data-theme="day"] .racha-bar.r4 .racha-tit{color:#a8560a}
body[data-theme="day"] .racha-ico{filter:drop-shadow(0 1px 3px rgba(8,55,73,.5))}
body[data-theme="day"] .racha-fire i{filter:blur(4px);opacity:.75}
body[data-theme="day"].sx-inferno::after{background:radial-gradient(ellipse 120% 45% at 50% 118%,rgba(255,120,40,.32),transparent 65%)}
body[data-theme="day"] .sx-slam.gold{background:linear-gradient(180deg,#0e5e7b 10%,#a86e00);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 3px 10px rgba(8,55,73,.35))}
body[data-theme="day"] .sx-slam.fire{background:linear-gradient(180deg,#e08900,#b3261e);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 3px 10px rgba(8,55,73,.35))}
body[data-theme="day"] .sx-slam.bad{background:linear-gradient(180deg,#7a1c14,#c0392b);-webkit-background-clip:text;background-clip:text;filter:none}
body[data-theme="day"] .sx-slam.cool{background:linear-gradient(180deg,#0e3f52,#1668a8);-webkit-background-clip:text;background-clip:text;filter:none}
body[data-theme="day"] .sx-ripple{background:radial-gradient(circle,rgba(8,55,73,.25),rgba(8,55,73,0) 70%)}
body[data-theme="day"] h1.logo{animation:sx-logo-day 3.4s ease-in-out infinite}
@keyframes sx-logo-day{
  0%,100%{filter:drop-shadow(0 3px 10px rgba(5,50,68,.45));transform:none}
  50%{filter:drop-shadow(0 5px 18px rgba(5,50,68,.6));transform:scale(1.015)}
}

/* ============================================================
   8 · prefers-reduced-motion: IGNORADO A PROPÓSITO
   Windows manda "reduce" apenas se apagan los efectos de animación
   del sistema, y eso dejaba el juego entero sin jugo. El motor
   (sauce.js) también fuerza reduced=false.
   ============================================================ */