/* Finale Story Mode: cinematiche epiche (Nonno Mink render 3D statico, Bronx in fiamme, scambio di mazzi) */
.s3d-fin .fx-stage{position:relative;width:min(760px,100%);height:clamp(300px,50vh,460px);margin:6px auto 4px;border-radius:22px;overflow:hidden;isolation:isolate;
  border:1px solid rgba(255,190,120,.28);box-shadow:0 20px 70px rgba(0,0,0,.7),inset 0 0 80px rgba(0,0,0,.55);animation:fxIn .9s cubic-bezier(.2,.8,.2,1) both}
.fx-stage.fire{background:radial-gradient(120% 90% at 78% 100%,#b3300a 0%,#521006 38%,#10040a 80%)}
.fx-stage.dark{background:radial-gradient(120% 90% at 80% 100%,#40104f 0%,#1c0830 40%,#07030f 82%)}
.fx-stage.sky{background:radial-gradient(120% 90% at 50% 100%,#2c6fc6 0%,#14305f 45%,#060a1f 85%)}
.fx-stage.mirror{background:radial-gradient(90% 90% at 50% 50%,#2b1a5a 0%,#0b0822 75%)}
.fx-stage::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.62))}
.fx-ground{position:absolute;left:0;right:0;bottom:0;height:16%;z-index:1;background:linear-gradient(transparent,rgba(0,0,0,.65))}
.fx-rays{position:absolute;left:50%;top:50%;width:190%;aspect-ratio:1;z-index:0;transform:translate(-50%,-50%);animation:fxSpin 40s linear infinite;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.13) 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 62%);mask:radial-gradient(circle,#000 0,transparent 62%)}
.fx-stage.fire .fx-rays{background:repeating-conic-gradient(from 0deg,rgba(255,120,30,.2) 0 5deg,transparent 5deg 16deg)}
.fx-stage.dark .fx-rays{background:repeating-conic-gradient(from 0deg,rgba(170,90,255,.2) 0 5deg,transparent 5deg 16deg)}
.fx-stage.sky .fx-rays{background:repeating-conic-gradient(from 0deg,rgba(255,240,170,.28) 0 6deg,transparent 6deg 16deg)}

/* Nonno Mink (render statico del modello 3D) */
.fx-nonno{position:absolute;left:7%;bottom:3%;height:88%;z-index:4;display:flex;align-items:flex-end;transform-origin:50% 100%;animation:fxBreath 3.4s ease-in-out infinite}
.fx-nonno img{height:100%;width:auto;display:block;filter:drop-shadow(0 0 22px rgba(167,139,250,.55)) drop-shadow(0 12px 14px rgba(0,0,0,.7))}
.fx-nonno::after{content:"";position:absolute;left:50%;bottom:-2%;width:90%;height:8%;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(0,0,0,.65),transparent 70%);z-index:-1}
.fx-nonno.big{height:84%;animation:fxLoom 3s ease-in-out infinite}
.fx-nonno.big img{filter:drop-shadow(0 0 30px rgba(220,60,255,.85)) drop-shadow(0 0 60px rgba(255,40,70,.45)) drop-shadow(0 12px 14px rgba(0,0,0,.7)) saturate(1.1) contrast(1.05)}
/* colpito dalla fiammata: dopo 1.5s trema, si arroventa, si annerisce */
.fx-nonno.scorch{animation:fxBreath 3.4s ease-in-out infinite,fxHit 1.2s 1.5s both}
.fx-nonno.scorch img{animation:fxScorch 3.2s 1.5s ease-in forwards}
.fx-nonno.scorch::before{content:"";position:absolute;inset:6% 8% 0;z-index:3;border-radius:40%;mix-blend-mode:screen;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at 50% 40%,rgba(255,200,80,.95),rgba(255,70,0,.55) 45%,transparent 72%);animation:fxGlow 2.6s 1.5s ease-in-out forwards}
.fx-nonno.flee{animation:fxFlee 2.4s ease-in forwards}
.fx-nonno.mirror{left:4%;height:62%;bottom:18%}

/* Bronx: carta gigante in fiamme */
.fx-boss{position:absolute;right:8%;bottom:7%;z-index:3;display:flex;flex-direction:column;align-items:center;animation:fxBossIn 1.1s .2s cubic-bezier(.2,1.2,.3,1) both}
.fx-boss .card{--w:clamp(150px,30vw,230px);pointer-events:none;position:relative;z-index:2;animation:fxPulse 2.2s ease-in-out infinite;filter:drop-shadow(0 0 22px rgba(255,90,20,.8))}
.fx-boss.zody .card{filter:drop-shadow(0 0 28px rgba(120,200,255,.9));animation:fxFloat 3s ease-in-out infinite}
.fx-boss small,.fx-nonno-tag{position:absolute;bottom:-2px;z-index:6;text-shadow:0 1px 4px #000,0 0 10px #000;font-weight:900;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fde68a}
.fx-aura{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;z-index:0;transform:translate(-50%,-50%);border-radius:50%;filter:blur(8px);animation:fxAura 1.6s ease-in-out infinite;
  background:radial-gradient(circle,rgba(255,130,20,.85),rgba(255,40,0,.4) 45%,transparent 70%)}
.fx-boss.zody .fx-aura{background:radial-gradient(circle,rgba(190,235,255,.95),rgba(80,160,255,.45) 45%,transparent 70%)}
.fx-flames{position:absolute;left:-18%;right:-18%;bottom:-6%;height:70%;z-index:1;pointer-events:none;display:flex;justify-content:space-around;align-items:flex-end}
.fx-flames i{display:block;width:26%;height:100%;border-radius:50% 50% 38% 38%/70% 70% 30% 30%;transform-origin:50% 100%;filter:blur(2px);mix-blend-mode:screen;
  background:radial-gradient(ellipse at 50% 85%,#fff7c2 0,#ffc233 28%,#ff5a0a 58%,transparent 78%);animation:fxFlame calc(.55s + var(--r,0)*.5s) ease-in-out infinite alternate;animation-delay:calc(var(--r,0)*-1s)}
.fx-flames i:nth-child(2n){height:128%;width:30%}.fx-flames i:nth-child(3n){height:86%}

/* legame d'anima / getto di fuoco */
.fx-link{position:absolute;left:34%;right:34%;top:52%;height:14px;z-index:5;border-radius:12px;pointer-events:none;
  background:linear-gradient(90deg,#c4b5fd,#a78bfa 40%,#fb923c);box-shadow:0 0 20px #a78bfa,0 0 40px #f97316;transform-origin:100% 50%;animation:fxLink 1.2s .5s cubic-bezier(.2,.8,.2,1) both,fxLinkPulse .6s 1.7s ease-in-out infinite alternate}
.fx-jet{position:absolute;right:30%;left:26%;top:47%;height:64px;z-index:6;pointer-events:none;transform-origin:100% 50%;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(ellipse at 100% 50%,#fff 0,#ffd54a 22%,#ff6a00 55%,transparent 80%);filter:blur(1px);animation:fxJet 1.3s 1.5s ease-out both}
.fx-chain{position:absolute;left:30%;right:30%;top:56%;height:6px;z-index:5;opacity:0;border-radius:6px;pointer-events:none;
  background:repeating-linear-gradient(90deg,#d8b4fe 0 10px,transparent 10px 16px);box-shadow:0 0 14px #c084fc;animation:fxChain .8s 2.6s ease-out both}
.fx-flash{position:absolute;inset:0;z-index:10;pointer-events:none;background:radial-gradient(circle at 60% 55%,#fff,rgba(255,170,60,.8) 35%,transparent 70%);opacity:0;animation:fxFlash .9s var(--t,1.5s) ease-out both}
.fx-flash.blue{background:radial-gradient(circle at 70% 55%,#fff,rgba(120,200,255,.8) 35%,transparent 70%)}
.fx-flash.violet{background:radial-gradient(circle at 30% 55%,#fff,rgba(220,80,255,.85) 35%,transparent 70%)}
.fx-ember{position:absolute;bottom:-10px;z-index:7;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff6c4,#ff9a2a 55%,#ff3a00);box-shadow:0 0 8px #ff7a1a;animation:fxEmber var(--d) linear infinite;animation-delay:var(--dl)}
.fx-stage.sky .fx-ember,.fx-ember.blue{background:radial-gradient(circle,#fff,#bfe6ff 55%,#4da3ff);box-shadow:0 0 10px #7cc4ff}
.fx-ember.violet{background:radial-gradient(circle,#fff,#e0b0ff 55%,#a23cff);box-shadow:0 0 10px #c07cff}
.fx-rune{position:absolute;z-index:2;font-size:clamp(22px,4vw,34px);opacity:0;color:#d8b4fe;text-shadow:0 0 14px #a78bfa;animation:fxRune 5s ease-in-out infinite;animation-delay:var(--dl);left:var(--x);top:var(--y)}

/* il sacrificio */
.fx-burnbox{position:relative;width:min(760px,100%);border-radius:22px;padding:18px 10px 14px;overflow:hidden;isolation:isolate;border:1px solid rgba(255,140,60,.3);
  background:radial-gradient(100% 120% at 50% 100%,#8a2306 0%,#2b0a07 55%,#0c0408 90%);box-shadow:0 20px 70px rgba(0,0,0,.7),inset 0 0 70px rgba(0,0,0,.6)}
.fx-burnbox .fx-flames{left:0;right:0;bottom:-8%;height:48%;opacity:.85}
.fx-burnbox .fx-ember{z-index:1}
.fx-burngrid{position:relative;z-index:3;display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:12px 10px;max-height:44vh;overflow:auto;padding:6px 8px 12px;justify-items:center}
.fx-burngrid .card{--w:64px;pointer-events:none;position:relative;animation:fxCard 2.8s ease-in forwards;animation-delay:calc(var(--i,0)*170ms + .6s)}
.fx-bigcount{font-family:var(--font-h,Impact);font-size:clamp(46px,12vw,88px);line-height:1;color:#ffb347;text-shadow:0 0 24px #ff5a0a,0 0 60px #ff2a00;animation:fxCount 1.1s cubic-bezier(.2,1.4,.3,1) both;margin:0}
.fx-bigcount small{display:block;font-size:.2em;letter-spacing:.3em;color:#ffd9a0;text-shadow:none;margin-top:4px}
.fx-spark{position:absolute;inset:0;z-index:2;pointer-events:none}

/* scambio di campo: specchio */
.fx-deck{position:absolute;top:50%;width:clamp(70px,17vw,110px);aspect-ratio:3/4.2;z-index:5;transform:translateY(-50%)}
.fx-deck i{position:absolute;inset:0;border-radius:9px;background:var(--bk) center/cover,#222;border:1px solid rgba(255,255,255,.4);box-shadow:0 6px 14px rgba(0,0,0,.6);transform:translate(calc(var(--k)*3px),calc(var(--k)*-3px))}
.fx-deck.a{left:6%;animation:fxSwapA 2.6s 1.1s cubic-bezier(.6,0,.3,1) both}
.fx-deck.b{right:6%;animation:fxSwapB 2.6s 1.1s cubic-bezier(.6,0,.3,1) both}
.fx-deck.a i{--bk:url(../img/back-p.webp)}.fx-deck.b i{--bk:url(../img/back-m.webp)}
.fx-swapicon{position:absolute;left:50%;top:50%;z-index:6;font-size:clamp(40px,9vw,72px);transform:translate(-50%,-50%) scale(0);text-shadow:0 0 30px #c084fc,0 0 60px #7c3aed;animation:fxSwapIcon 2.6s 1s ease-in-out both}
.fx-ring{position:absolute;left:50%;top:50%;width:30px;height:30px;border-radius:50%;z-index:4;border:3px solid #c4b5fd;box-shadow:0 0 30px #a78bfa,inset 0 0 30px #a78bfa;transform:translate(-50%,-50%) scale(0);opacity:0;animation:fxRing 1.8s var(--t,1.8s) ease-out both}
.fx-mirror-line{position:absolute;left:50%;top:6%;bottom:6%;width:2px;z-index:3;background:linear-gradient(transparent,#e9d5ff,transparent);box-shadow:0 0 18px #c084fc;opacity:.7}
.fx-who{position:absolute;top:10px;z-index:8;font-family:var(--font-h,Impact);letter-spacing:2px;font-size:13px;color:#fde68a;text-shadow:0 0 8px #000}
.fx-who.l{left:5%}.fx-who.r{right:5%}
.fx-shake{animation:fxShake .6s 1.5s both}

@keyframes fxIn{from{opacity:0;transform:scale(.94) translateY(14px)}to{opacity:1;transform:none}}
@keyframes fxSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes fxBreath{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.012)}}
@keyframes fxLoom{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.035) translateY(-6px)}}
@keyframes fxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes fxPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes fxBossIn{from{opacity:0;transform:translateX(90px) scale(.6)}to{opacity:1;transform:none}}
@keyframes fxAura{0%,100%{opacity:.65;transform:translate(-50%,-50%) scale(.95)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}
@keyframes fxFlame{0%{transform:scaleY(.78) scaleX(1.06) rotate(-4deg);opacity:.85}100%{transform:scaleY(1.1) scaleX(.9) rotate(5deg);opacity:1}}
@keyframes fxLink{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes fxLinkPulse{from{filter:brightness(1)}to{filter:brightness(1.7)}}
@keyframes fxJet{0%{opacity:0;transform:scaleX(0)}15%{opacity:1}60%{opacity:1;transform:scaleX(1.05)}100%{opacity:.0;transform:scaleX(1.1)}}
@keyframes fxChain{from{opacity:0;transform:scaleX(.2)}to{opacity:.95;transform:scaleX(1)}}
@keyframes fxFlash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
@keyframes fxHit{0%,100%{transform:translateX(0)}10%{transform:translateX(-9px) rotate(-1.5deg)}25%{transform:translateX(9px) rotate(1.5deg)}40%{transform:translateX(-7px)}55%{transform:translateX(7px)}70%{transform:translateX(-4px)}85%{transform:translateX(3px)}}
@keyframes fxScorch{0%{filter:drop-shadow(0 0 22px rgba(167,139,250,.55))}35%{filter:drop-shadow(0 0 30px #ff7a1a) sepia(1) saturate(6) hue-rotate(-25deg) brightness(1.5)}100%{filter:drop-shadow(0 0 16px #ff3a00) grayscale(.8) brightness(.55) contrast(1.2)}}
@keyframes fxGlow{0%{opacity:0}30%{opacity:1}100%{opacity:.5}}
@keyframes fxFlee{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-120%) scale(.8) skewX(8deg);opacity:0}}
@keyframes fxEmber{0%{opacity:0;transform:translate(0,0) scale(1)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-440px) scale(.2)}}
@keyframes fxRune{0%,100%{opacity:0;transform:translateY(10px) scale(.7)}50%{opacity:.85;transform:translateY(-14px) scale(1.1)}}
@keyframes fxCard{0%{transform:scale(1);filter:none;opacity:1}18%{transform:scale(1.18) translateY(-4px);filter:brightness(1.3) drop-shadow(0 0 12px #ffb347)}42%{transform:scale(1.1);filter:sepia(1) saturate(7) hue-rotate(-25deg) brightness(1.3) drop-shadow(0 0 18px #ff4a00)}72%{transform:scale(.95) translateY(-6px);filter:grayscale(1) brightness(.18) drop-shadow(0 0 10px #ff2a00);opacity:.9}100%{transform:scale(.6) translateY(-46px);filter:grayscale(1) brightness(0);opacity:0}}
@keyframes fxCount{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes fxSwapA{0%{transform:translateY(-50%)}45%{transform:translate(calc(var(--w,260px)*.8),-110%) scale(1.15) rotate(10deg)}100%{transform:translate(var(--dx,520px),-50%) rotate(0)}}
@keyframes fxSwapB{0%{transform:translateY(-50%)}45%{transform:translate(calc(var(--w,260px)*-.8),10%) scale(1.15) rotate(-10deg)}100%{transform:translate(calc(var(--dx,520px)*-1),-50%) rotate(0)}}
@keyframes fxSwapIcon{0%{transform:translate(-50%,-50%) scale(0) rotate(0)}30%{transform:translate(-50%,-50%) scale(1.2) rotate(180deg)}70%{transform:translate(-50%,-50%) scale(1) rotate(360deg)}100%{transform:translate(-50%,-50%) scale(0) rotate(540deg)}}
@keyframes fxRing{0%{opacity:1;transform:translate(-50%,-50%) scale(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(18)}}
@keyframes fxShake{0%,100%{transform:translate(0)}15%{transform:translate(-7px,4px)}30%{transform:translate(8px,-5px)}45%{transform:translate(-6px,-3px)}60%{transform:translate(6px,4px)}80%{transform:translate(-3px,2px)}}
@media (max-width:560px){.fx-nonno{left:2%}.fx-boss{right:4%}.fx-link{left:30%;right:30%}}
@media (prefers-reduced-motion:reduce){.fx-rays,.fx-flames i,.fx-ember,.fx-nonno,.fx-boss .card{animation:none!important}}