/* Boss Story Mode: intro cinematica, banner, fumetti con foto, vittoria/sconfitta. Colore tematico per boss via --h (hue). */
.bx-intro,.bx-end{--a:hsl(var(--h,35) 95% 58%);--a2:hsl(calc(var(--h,35) + 28) 95% 62%);--ad:hsl(var(--h,35) 70% 18%)}
.bx-scene{position:absolute;inset:0;overflow:hidden auto;isolation:isolate;background:#07040f}
.bx-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:
  radial-gradient(70% 90% at 78% 40%,hsl(var(--h,35) 80% 28%) 0%,transparent 70%),
  radial-gradient(90% 70% at 10% 100%,hsl(calc(var(--h,35) + 40) 70% 20%) 0%,transparent 70%),#0a0614}
.bx-bg img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;opacity:0;filter:saturate(1.15) brightness(.55) contrast(1.05);transition:opacity 1.2s;animation:bxKen 22s ease-in-out infinite alternate}
.bx-bg.bx-ok img{opacity:1}
.bx-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(5,3,12,.92) 0%,rgba(5,3,12,.55) 45%,rgba(5,3,12,.1) 100%),
  radial-gradient(ellipse at 70% 45%,transparent 25%,rgba(0,0,0,.65) 100%)}
.bx-tint{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:color;background:linear-gradient(120deg,transparent 30%,hsl(var(--h,35) 90% 45% / .35))}
.bx-rays{position:absolute;right:-10%;top:50%;width:140vmax;aspect-ratio:1;z-index:1;transform:translateY(-50%);pointer-events:none;animation:bxSpin 60s linear infinite;
  background:repeating-conic-gradient(from 0deg,hsl(var(--h,35) 100% 60% / .16) 0 4deg,transparent 4deg 14deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 58%);mask:radial-gradient(circle,#000 0,transparent 58%)}
.bx-scene .fx-ember{z-index:2;background:radial-gradient(circle,#fff,var(--a2) 55%,var(--a));box-shadow:0 0 8px var(--a)}
.bx-bars::before,.bx-bars::after{content:"";position:absolute;left:0;right:0;height:6vh;background:#000;z-index:6;pointer-events:none;animation:bxBars 1.1s .1s cubic-bezier(.7,0,.3,1) both}
.bx-bars::before{top:0}.bx-bars::after{bottom:0}
.bx-grid{position:relative;z-index:3;min-height:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(8px,3vw,48px);padding:clamp(18px,6vh,64px) clamp(16px,6vw,90px)}
.bx-info{display:flex;flex-direction:column;gap:12px;align-items:flex-start;text-align:left}
.bx-stage{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-h,Impact);letter-spacing:.32em;font-size:clamp(12px,1.6vw,16px);color:#fff;text-transform:uppercase;padding:6px 16px 6px 12px;
  background:linear-gradient(90deg,var(--a),transparent);clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);animation:bxSlideL .7s .35s both;text-shadow:0 1px 6px #000}
.bx-stage::before{content:"";width:8px;height:8px;background:#fff;transform:rotate(45deg);box-shadow:0 0 10px #fff}
.bx-name{margin:0;line-height:.94;font-family:var(--font-h,Impact);font-weight:900;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(40px,7.4vw,98px);display:block;max-width:100%;overflow-wrap:normal;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.6)) drop-shadow(0 0 26px hsl(var(--h,35) 100% 55% / .55))}
.bx-name span{display:inline-block;background:linear-gradient(180deg,#fff 20%,var(--a2) 70%,var(--a));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px rgba(0,0,0,.35);
  animation:bxSlam .7s calc(.5s + var(--i)*70ms) cubic-bezier(.2,1.4,.3,1) both}
.bx-name .w{display:inline-block;white-space:nowrap;font-weight:900;margin-right:.18em}
.bx-gym{font-family:var(--font-h,Impact);letter-spacing:.2em;font-size:clamp(13px,2vw,20px);color:var(--a2);text-transform:uppercase;text-shadow:0 0 14px var(--a);animation:bxSlideL .7s .9s both;display:flex;align-items:center;gap:12px}
.bx-gym::before{content:"";width:46px;height:3px;background:var(--a);box-shadow:0 0 12px var(--a)}
.bx-chips{display:flex;flex-wrap:wrap;gap:8px;animation:bxSlideL .7s 1.05s both}
.bx-desc{max-width:520px;margin:2px 0 0;color:#e8def7;font-size:clamp(13px,1.6vw,16px);line-height:1.5;text-shadow:0 1px 8px #000;animation:bxSlideL .7s 1.2s both}
.bx-quote{position:relative;max-width:520px;margin:6px 0 0;padding:14px 18px 14px 20px;border-left:4px solid var(--a);background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.2));border-radius:0 14px 14px 0;animation:bxSlideL .7s 1.4s both}
.bx-quote b{display:block;font-family:var(--font-h,Impact);letter-spacing:.14em;color:var(--a2);font-size:12px;text-transform:uppercase;margin-bottom:4px}
.bx-quote i{font-family:Georgia,serif;font-size:clamp(15px,2vw,20px);line-height:1.4;color:#fff}
.bx-cta{display:flex;flex-direction:column;gap:6px;width:min(100%,360px);margin-top:10px;animation:bxSlideL .7s 1.6s both}
.bx-cta .s3d-btn{font-size:17px;letter-spacing:.04em;box-shadow:0 0 30px hsl(var(--h,35) 100% 55% / .5)}
.bx-hero{position:relative;height:clamp(300px,74vh,760px);display:flex;align-items:flex-end;justify-content:center}
.bx-vs{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:0;font-family:var(--font-h,Impact);font-size:clamp(120px,24vw,320px);line-height:1;color:transparent;-webkit-text-stroke:2px hsl(var(--h,35) 100% 65% / .4);text-shadow:0 0 50px hsl(var(--h,35) 100% 50% / .35);animation:bxVs 1.2s .6s both}
.bx-ring{position:absolute;left:50%;bottom:6%;width:min(78%,520px);aspect-ratio:1;border-radius:50%;transform:translateX(-50%);z-index:0;border:2px solid hsl(var(--h,35) 100% 60% / .45);box-shadow:0 0 60px hsl(var(--h,35) 100% 50% / .4),inset 0 0 60px hsl(var(--h,35) 100% 50% / .25);animation:bxRing 4s ease-in-out infinite}
.bx-port{position:relative;z-index:2;height:100%;width:100%;max-width:560px;display:flex;align-items:flex-end;justify-content:center;animation:bxHero 1s .3s cubic-bezier(.2,1.1,.3,1) both}
.bx-port img{position:absolute;bottom:0;max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;opacity:0;transition:opacity .8s;
  -webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,#000 86%,transparent 100%);
  filter:drop-shadow(0 0 32px hsl(var(--h,35) 100% 55% / .65)) drop-shadow(0 18px 18px rgba(0,0,0,.7));animation:bxIdle 5s ease-in-out infinite}
.bx-port.bx-ok img{opacity:1}
.bx-fb{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .5s}
.bx-ok>.bx-fb{opacity:0;pointer-events:none}
.bx-emblem{width:min(70%,300px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-family:var(--font-h,Impact);font-size:clamp(90px,16vw,200px);color:#fff;text-shadow:0 0 30px var(--a);
  background:radial-gradient(circle at 35% 30%,var(--a2),var(--ad) 70%);border:4px solid var(--a);box-shadow:0 0 70px hsl(var(--h,35) 100% 50% / .6),inset 0 0 50px rgba(0,0,0,.55)}
.bx-port .bx-fb{align-items:end}
.bx-medal{position:absolute;right:2%;bottom:3%;z-index:4;width:clamp(78px,11vw,118px);aspect-ratio:1;border-radius:50%;animation:bxPop .8s 1.7s cubic-bezier(.2,1.6,.3,1) both}
.bx-medal .bx-rim,.bx-coin .bx-rim{position:absolute;inset:0;border-radius:50%;overflow:hidden;border:4px solid #ffd86b;box-shadow:0 0 28px #ffb300,inset 0 0 18px rgba(0,0,0,.55);background:radial-gradient(circle,#4a3300,#1a1000)}
.bx-medal .bx-rim .bx-fb,.bx-coin .bx-rim .bx-fb{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .5s}
.bx-ok .bx-rim .bx-fb{opacity:0}
.bx-medal img,.bx-coin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.bx-medal.bx-ok img,.bx-coin.bx-ok img{opacity:1}
.bx-medal .bx-fb,.bx-coin .bx-fb{font-size:46px}
.bx-medal::after,.bx-coin::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);background-size:250% 100%;animation:bxShine 3s 2.4s ease-in-out infinite;mix-blend-mode:overlay}
.bx-medal small{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;font-weight:900;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#ffe29a;text-shadow:0 1px 6px #000}
.bx-flash{position:absolute;inset:0;z-index:7;pointer-events:none;background:radial-gradient(circle at 72% 50%,#fff,hsl(var(--h,35) 100% 60% / .8) 35%,transparent 70%);opacity:0;animation:bxFlash 1s .45s ease-out both}

/* banner in battaglia e fumetto con foto */
.bx-banner{position:fixed;left:10px;top:calc(58px + env(safe-area-inset-top));z-index:57;display:flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:999px;pointer-events:none;color:#fff;
  background:linear-gradient(90deg,rgba(10,6,24,.9),hsl(var(--h,35) 60% 16% / .9));border:1px solid hsl(var(--h,35) 90% 55% / .7);box-shadow:0 0 22px hsl(var(--h,35) 100% 50% / .35);animation:bxSlideL .7s .2s both;--a:hsl(var(--h,35) 95% 58%)}
.bx-banner b{display:block;font-family:var(--font-h,Impact);letter-spacing:.08em;font-size:14px;text-transform:uppercase;line-height:1.05}
.bx-banner small{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--a);font-weight:800}
.bx-bav{position:relative;width:44px;height:44px;border-radius:50%;overflow:hidden;border:2px solid var(--a);background:radial-gradient(circle at 35% 30%,var(--a),#1a0b30);display:grid;place-items:center;font-family:var(--font-h,Impact);font-size:20px;flex:none}
.bx-bav img,.s3d-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;opacity:0;transition:opacity .4s}
.bx-bav.bx-ok img,.s3d-avatar.bx-ok img{opacity:1}
.s3d-avatar{position:relative}
@media (max-width:720px){.bx-banner b{font-size:12px}.bx-bav{width:36px;height:36px}.bx-banner small{display:none}}

/* vittoria / sconfitta */
.bx-end{position:relative}
.bx-endbg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bx-endbg img{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;opacity:0;transition:opacity 1.2s;filter:brightness(.32) saturate(1.1);animation:bxKen 24s ease-in-out infinite alternate}
.bx-endbg.bx-ok img{opacity:1}
.bx-endbg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 20%,rgba(4,2,10,.85) 100%)}
.bx-end .s3d-in{position:relative;z-index:2}
.bx-endport{position:relative;height:clamp(150px,30vh,300px);aspect-ratio:3/4;margin:0 auto -6px;display:flex;align-items:flex-end;justify-content:center}
.bx-endport img{position:absolute;bottom:0;max-height:100%;max-width:100%;object-fit:contain;opacity:0;transition:opacity .6s;-webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent);mask-image:linear-gradient(to bottom,#000 84%,transparent)}
.bx-endport.bx-ok img{opacity:1}
.bx-endport .bx-emblem{width:clamp(110px,22vh,200px);font-size:clamp(54px,12vh,110px)}
.bx-endport.win img{filter:grayscale(1) brightness(.5) contrast(1.1) drop-shadow(0 0 18px #000);transform:rotate(-7deg) translateY(16px);animation:bxDown 1s .2s ease-out both}
.bx-endport.win .bx-emblem{filter:grayscale(1) brightness(.5);transform:rotate(-7deg)}
.bx-endport.lose img{filter:drop-shadow(0 0 30px hsl(var(--h,35) 100% 55% / .85)) drop-shadow(0 14px 14px rgba(0,0,0,.7));animation:bxLoom 3s ease-in-out infinite}
.bx-stamp{position:absolute;left:50%;top:44%;z-index:3;transform:translate(-50%,-50%) rotate(-14deg);font-family:var(--font-h,Impact);font-size:clamp(20px,5vw,40px);letter-spacing:.14em;color:#ff3b3b;border:4px solid #ff3b3b;padding:2px 14px;border-radius:6px;text-shadow:0 0 12px #f00;box-shadow:0 0 18px rgba(255,0,0,.5);background:rgba(20,0,0,.35);white-space:nowrap;animation:bxStamp .5s 1s cubic-bezier(.2,1.8,.3,1) both}
.bx-coin{position:relative;width:clamp(120px,22vh,170px);aspect-ratio:1;border-radius:50%;margin:4px auto;animation:bxCoin 1.4s .4s cubic-bezier(.2,1.2,.3,1) both}
.bx-coin small{display:none}
.bx-coinwrap{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative}
.bx-coinwrap::before{content:"";position:absolute;left:50%;top:50%;width:260px;aspect-ratio:1;transform:translate(-50%,-50%);background:repeating-conic-gradient(rgba(255,214,100,.28) 0 6deg,transparent 6deg 16deg);-webkit-mask:radial-gradient(circle,#000,transparent 66%);mask:radial-gradient(circle,#000,transparent 66%);animation:bxSpin 24s linear infinite;z-index:-1}

@keyframes bxKen{from{transform:scale(1) translate(0,0)}to{transform:scale(1.1) translate(-2%,1.5%)}}
@keyframes bxSpin{to{transform:translateY(-50%) rotate(360deg)}}
@keyframes bxSlideL{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:none}}
@keyframes bxSlideR{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
@keyframes bxSlam{0%{opacity:0;transform:translateY(-90px) scale(2.6) rotate(-8deg);filter:blur(10px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes bxHero{from{opacity:0;transform:translateX(110px) scale(.82)}to{opacity:1;transform:none}}
@keyframes bxIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes bxVs{from{opacity:0;transform:translate(-50%,-50%) scale(2.2)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes bxRing{0%,100%{transform:translateX(-50%) scale(.96);opacity:.7}50%{transform:translateX(-50%) scale(1.04);opacity:1}}
@keyframes bxPop{from{opacity:0;transform:scale(0) rotate(-120deg)}to{opacity:1;transform:none}}
@keyframes bxShine{0%{background-position:150% 0}60%,100%{background-position:-100% 0}}
@keyframes bxFlash{0%{opacity:0}15%{opacity:.95}100%{opacity:0}}
@keyframes bxBars{0%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes bxDown{from{transform:rotate(0) translateY(0)}to{transform:rotate(-7deg) translateY(16px)}}
@keyframes bxLoom{0%,100%{transform:scale(1)}50%{transform:scale(1.04) translateY(-4px)}}
@keyframes bxStamp{from{opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(3)}to{opacity:1;transform:translate(-50%,-50%) rotate(-14deg) scale(1)}}
@keyframes bxCoin{0%{opacity:0;transform:translateY(-120px) rotateY(0) scale(.3)}60%{opacity:1;transform:translateY(0) rotateY(900deg) scale(1.15)}100%{opacity:1;transform:rotateY(1080deg) scale(1)}}

@media (max-width:760px){
  .bx-name{font-size:clamp(34px,11vw,64px)}
  .bx-name .w{margin-right:.14em}
  .bx-grid{grid-template-columns:1fr;gap:4px;padding:5vh 16px 24px}
  .bx-hero{order:-1;height:36vh;min-height:230px}
  .bx-info{align-items:center;text-align:center}
  .bx-name{justify-content:center;font-size:clamp(38px,13vw,72px)}
  .bx-gym::before{display:none}.bx-chips{justify-content:center}.bx-quote{border-left:0;border-top:3px solid var(--a);border-radius:0 0 14px 14px;text-align:left}
  .bx-shade{background:linear-gradient(180deg,rgba(5,3,12,.35),rgba(5,3,12,.9) 60%)}
  .bx-medal{right:6%}
}
@media (prefers-reduced-motion:reduce){.bx-bg img,.bx-rays,.bx-port img,.bx-ring{animation:none!important}}