#fx3dStage{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.2s ease;
}
#fx3dStage.fx3dReady{opacity:1}
#fx3dStage canvas{display:block;width:100%;height:100%}
/* In app: la scena resta dietro ai contenuti e pi\0000F9  tenue */
body.fx3dApp #fx3dStage{opacity:1}
/* In login: la scena sale sopra lo sfondo del gate, sotto al form */
body.fx3dAuth #fx3dStage{
  z-index:199999;opacity:1;
  background:
    radial-gradient(920px 640px at 50% -5%,rgba(47,174,255,.26),transparent 67%),
    radial-gradient(600px 500px at 8% 85%,rgba(73,88,255,.14),transparent 70%),
    linear-gradient(180deg,#051a42,#020817);
}
body.fx3dAuth.fx3dOn #authGate{background:transparent !important}
body.fx3dAuth.fx3dOn .authShell,
body.fx3dAuth.fx3dOn .marathonReferral{
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  backdrop-filter:blur(14px) saturate(1.25);
}
/* Il vecchio pavimento CSS viene sostituito da quello WebGL */
body.fx3dOn #neoFutureFX .fxGridFloor{opacity:0 !important}
/* Contatori animati */
.perfStat strong.fx3dCounting{font-variant-numeric:tabular-nums}
/* Reveal allo scroll per le card performance */
.fx3dReveal{opacity:0;translate:0 26px;filter:blur(6px);transition:opacity .7s ease,translate .7s cubic-bezier(.2,.8,.2,1),filter .7s ease}
.fx3dReveal.fx3dIn{opacity:1;translate:0 0;filter:none}
@media(prefers-reduced-motion:reduce){
  .fx3dReveal{opacity:1;translate:none;filter:none;transition:none}
}
/* ================= AREA PRIVATA SURREALE (attiva solo se il 3D \0000E8  partito) ================= */
@property --fx3dAng{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes fx3dSpin{to{--fx3dAng:360deg}}
@keyframes fx3dChrome{to{background-position:-250% 0}}
@keyframes fx3dFloat{0%,100%{translate:0 0}50%{translate:0 -3px}}
/* vetro scuro: il mondo 3D si intravede dietro pannelli e card */
body.fx3dOn.fx3dApp #appWrap .match,
body.fx3dOn.fx3dApp #appWrap .perfBestCard,
body.fx3dOn.fx3dApp #appWrap .perfRecentItem,
body.fx3dOn.fx3dApp #appWrap .perfStat{
  background:
    radial-gradient(440px 200px at 50% -60px,rgba(255,255,255,.035),transparent 70%),
    linear-gradient(180deg,rgba(6,10,20,.66),rgba(3,5,12,.80)) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.05);
  backdrop-filter:blur(18px) saturate(1.05);
}
body.fx3dOn.fx3dApp #appWrap .hero{
  background:linear-gradient(135deg,rgba(8,14,28,.58),rgba(3,6,14,.44)) !important;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
body.fx3dOn.fx3dApp .hero3dOrb{opacity:0 !important}
/* filo di luce sottile che percorre lentamente il bordo */
body.fx3dOn .fx3dHolo{
  position:absolute !important;inset:0 !important;z-index:6 !important;
  border-radius:inherit;padding:1px;pointer-events:none;transform:none !important;
  background:conic-gradient(from var(--fx3dAng),transparent 0deg,transparent 250deg,rgba(255,255,255,.35) 300deg,transparent 350deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:fx3dSpin 14s linear infinite;opacity:.7;
}
body.fx3dOn .topPickCard>.fx3dHolo{
  background:conic-gradient(from var(--fx3dAng),transparent 0deg,transparent 230deg,rgba(232,196,120,.55) 290deg,transparent 350deg);
}
/* risultato esatto: argento satinato, niente glow */
body.fx3dOn.fx3dApp #matches .scoreValue{
  background:linear-gradient(180deg,#ffffff 0%,#dfe5ee 45%,#9aa6b8 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.6)) drop-shadow(0 8px 14px rgba(0,0,0,.45));
}
body.fx3dOn.fx3dApp #heroTitle{
  background:linear-gradient(100deg,#ffffff 0%,#cfd6e0 40%,#ffffff 50%,#cfd6e0 60%,#ffffff 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:fx3dChrome 12s linear infinite;
}
/* ingresso dalla profondit\0000E0  + fluttuazione in gravit\0000E0  zero */
body.fx3dOn .fx3dDepth{opacity:.01;rotate:x 38deg;translate:0 70px;scale:.9;transition:opacity .9s ease,rotate 1.1s cubic-bezier(.16,.9,.2,1),translate 1.1s cubic-bezier(.16,.9,.2,1),scale 1.1s cubic-bezier(.16,.9,.2,1)}
body.fx3dOn .fx3dDepth.fx3dIn{opacity:1;rotate:x 0deg;translate:0 0;scale:1}
body.fx3dOn.fx3dApp #matches .match.fx3dFloat{animation:fx3dFloat 9s ease-in-out infinite}
/* telefono: niente sfocatura pesante, vetro un po' pi\0000F9  pieno */
@media (pointer:coarse),(max-width:760px){
  body.fx3dOn.fx3dApp #appWrap .match,
  body.fx3dOn.fx3dApp #appWrap .perfBestCard,
  body.fx3dOn.fx3dApp #appWrap .perfRecentItem,
  body.fx3dOn.fx3dApp #appWrap .perfStat{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:
      radial-gradient(440px 200px at 50% -60px,rgba(255,255,255,.03),transparent 70%),
      linear-gradient(180deg,rgba(5,8,16,.86),rgba(2,4,10,.92)) !important;
  }
}
@media(prefers-reduced-motion:reduce){
  body.fx3dOn .fx3dHolo,body.fx3dOn.fx3dApp #heroTitle,body.fx3dOn.fx3dApp #matches .match.fx3dFloat{animation:none}
  body.fx3dOn .fx3dDepth{opacity:1;rotate:none;translate:none;scale:none;transition:none}
}
/* ================= INTERFACCIA 3D: lastre, tasti, tabellone ================= */
body.fx3dOn.fx3dApp #heroTitle,
body.fx3dOn.fx3dApp #sectionTitle,
body.fx3dOn.fx3dApp #perfTitleText,
body.fx3dOn.fx3dApp #perfHistoryTitleText{
  font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif !important;
  font-weight:800 !important;letter-spacing:.01em !important;
}
body.fx3dOn.fx3dApp #matches .scoreValue,
body.fx3dOn.fx3dApp #perfStats .perfStat strong,
body.fx3dOn.fx3dApp .perfBestResult b,
body.fx3dOn.fx3dApp .perfRecentValue{
  font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif !important;
  font-weight:800 !important;font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
body.fx3dOn.fx3dApp #matches .scoreValue{font-size:1.18em}
body.fx3dOn.fx3dApp #matches .team b,
body.fx3dOn.fx3dApp .perfBestTeams,
body.fx3dOn.fx3dApp .perfRecentTeams,
body.fx3dOn.fx3dApp #brandTitle,
body.fx3dOn.fx3dApp .privateModeNav .privateBtn{
  font-family:"Big Shoulders Display","Arial Narrow",Impact,sans-serif !important;
  font-weight:800 !important;letter-spacing:.04em !important;
}
body.fx3dOn.fx3dApp #matches .team b{font-size:1.12em}
/* card = lastra spessa: il bordo inferiore mostra lo spessore */
body.fx3dOn.fx3dApp #appWrap .match,
body.fx3dOn.fx3dApp #appWrap .perfBestCard{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 1px 0 #1d2533,0 2px 0 #19202c,0 3px 0 #151b26,0 4px 0 #121722,0 5px 0 #0f131c,0 6px 0 #0c1017,0 7px 0 #0a0d13,
    0 34px 60px rgba(0,0,0,.55) !important;
}
body.fx3dOn.fx3dApp #appWrap .match:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 1px 0 #222b3a,0 2px 0 #1d2533,0 3px 0 #19202c,0 4px 0 #151b26,0 5px 0 #121722,0 6px 0 #0f131c,0 7px 0 #0c1017,0 8px 0 #0a0d13,0 9px 0 #080a10,
    0 46px 80px rgba(0,0,0,.62) !important;
}
body.fx3dOn.fx3dApp #appWrap .hero,
body.fx3dOn.fx3dApp #appWrap .perfStat,
body.fx3dOn.fx3dApp #appWrap .perfRecentItem{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 0 #1a2130,0 2px 0 #151b26,0 3px 0 #11161f,0 4px 0 #0d1118,0 26px 46px rgba(0,0,0,.5) !important;
}
/* pulsanti di navigazione = tasti che si abbassano */
body.fx3dOn.fx3dApp .privateModeNav .privateBtn{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 0 #1e2634,0 2px 0 #19202c,0 3px 0 #141a24,0 4px 0 #10141c,0 10px 18px rgba(0,0,0,.45) !important;
  transition:translate .12s ease,box-shadow .12s ease;
}
body.fx3dOn.fx3dApp .privateModeNav .privateBtn:active,
body.fx3dOn.fx3dApp .privateModeNav .privateBtn.active{
  translate:0 3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 1px 0 #19202c,0 4px 10px rgba(0,0,0,.4) !important;
}
/* ================= CORREZIONE CRASH iPhone =================
   Il sito originale anima il "filter" di tutto il <body> (pageGlow) e un alone sfocato gigante (body::after).
   Cos\0000EC  il browser ridisegna l'intera pagina in un livello separato a ogni fotogramma: su iPhone esaurisce la memoria
   e Safari ricarica la pagina ("si \0000E8  verificato ripetutamente un errore"). Su telefono li spegniamo sempre. */
@media (pointer:coarse),(max-width:760px){
  html body{animation:none !important;filter:none !important}
  html body::after{animation:none !important;filter:none !important;display:none !important}
  html body::before{animation:none !important}
  .wrap::before,.wrap::after{animation:none !important;filter:none !important}
  .neoBoot.neoBootOff{filter:none !important}
  #neoFutureFX{display:none !important}
}
/* sul computer, con il 3D attivo, il filtro sul body \0000E8  solo lavoro sprecato */
body.fx3dOn{animation:none !important;filter:none !important}
body.fx3dOn::after{animation:none !important}
/* ================= CARD IA ================= */
@keyframes fx3dDialSpin{to{transform:rotate(360deg)}}
body #matches .match>.fx3dGrid{
  position:absolute !important;inset:0 !important;z-index:0 !important;pointer-events:none;border-radius:inherit;
  background:radial-gradient(rgba(160,210,255,.10) 1px,transparent 1.4px) 0 0/13px 13px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 38%,transparent 72%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 38%,transparent 72%);
}
.fx3dDial{
  position:absolute;z-index:-1;left:50%;top:48%;width:146px;height:146px;
  margin:-73px 0 0 -73px;pointer-events:none;border-radius:50%;
}
.fx3dDial::before{       /* corona di tacche */
  content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(rgba(180,220,255,.30) 0deg .7deg,transparent .7deg 6deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));
  animation:fx3dDialSpin 48s linear infinite;
}
.fx3dDial::after{        /* arco della probabilit\0000E0  */
  content:"";position:absolute;inset:10px;border-radius:50%;
  background:conic-gradient(from -90deg,color-mix(in srgb,var(--accent) 80%,#fff) 0 calc(var(--conf) * 1%),rgba(255,255,255,.06) calc(var(--conf) * 1%) 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 55%,transparent));
}
.topPickCard .fx3dDial::after{
  background:conic-gradient(from -90deg,#f2cf7e 0 calc(var(--conf) * 1%),rgba(255,255,255,.06) calc(var(--conf) * 1%) 100%);
  filter:drop-shadow(0 0 6px rgba(242,207,126,.45));
}
.fx3dMeter{
  display:grid;grid-template-columns:repeat(20,1fr);gap:3px;
  width:min(230px,78%);height:6px;margin:9px auto 2px;
}
.fx3dMeter i{border-radius:1.5px;background:rgba(255,255,255,.07)}
.fx3dMeter i.on{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 55%,#fff),var(--accent));opacity:.55}
.fx3dMeter i.on.tip{opacity:1;box-shadow:0 0 8px color-mix(in srgb,var(--accent) 70%,transparent)}
.topPickCard .fx3dMeter i.on{background:linear-gradient(180deg,#fff1cf,#e9be62)}
body #matches .scoreAlternative{position:relative;overflow:hidden}
.fx3dAltBar{
  position:absolute;left:12px;bottom:5px;height:2px;border-radius:2px;pointer-events:none;
  width:calc((100% - 24px) * var(--w) / 100);
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 40%,#fff));opacity:.65;
}
@media (max-width:560px){
  .fx3dDial{width:136px;height:136px;margin:-68px 0 0 -68px;top:47%}
}
@media(prefers-reduced-motion:reduce){.fx3dDial::before{animation:none}}
/* cerchi centrati sul risultato, senza pallini e linee di troppo */
body #matches .scoreValue>.neoScoreCore{top:50% !important;left:50% !important;transform:translate(-50%,-50%) !important;z-index:-1 !important}
body #matches .scoreValue>.fx3dDial{top:50% !important;width:128px !important;height:128px !important;margin:-64px 0 0 -64px !important}
body #matches .scoreValue>.neoScoreCore{width:104px !important;height:104px !important}
body #matches .match .score .scoreValue{margin:20px 0 26px !important}
body #matches .neoScoreCore i:nth-child(2),
body #matches .neoScoreCore i:nth-child(4),
body #matches .matchBody::after{display:none !important}
/* riga NODE / CONF: allineata ai bordi interni della card */
body #matches .match>.neoCardTelemetry{left:0 !important;right:0 !important}
/* ================= CARD PIATTE (niente inclinazioni n\0000E9  livelli 3D interni) ================= */
body #matches .match,
body .perfBestCard,
body .perfRecentItem,
body .hero.scene3d{
  transform:none !important;transform-style:flat !important;will-change:auto !important;
  rotate:none !important;translate:none !important;scale:none !important;animation:none !important;
}
body #matches .match *{transform-style:flat !important}
body #matches .match .matchMeta,body #matches .match .matchBody,body #matches .match .formBlock,
body #matches .match .marketIntel,body #matches .match .pickFooter,body #matches .match .score,
body #matches .match .teamLogo,body #matches .match .fallback{transform:none !important}
@media (hover:hover) and (pointer:fine){
  body #matches .match{transition:translate .2s ease,box-shadow .2s ease !important}
  body #matches .match:hover{translate:0 -4px !important}
}
/* ================= TELEFONO: modalit\0000E0  leggera ================= */
/* niente sfocature dello sfondo: sopra una scena 3D in movimento costano un ricalcolo a ogni fotogramma */
body.fx3dOn.fx3dMobile *,
body.fx3dOn.fx3dMobile *::before,
body.fx3dOn.fx3dMobile *::after{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
body.fx3dOn.fx3dMobile .authShell{background:rgba(4,12,30,.88) !important}
body.fx3dOn.fx3dMobile #neoFutureFX{display:none !important}
body.fx3dOn.fx3dMobile .fx3dHolo{animation:none !important}
body.fx3dOn.fx3dMobile.fx3dApp #matches .match.fx3dFloat{animation:none !important}
body.fx3dOn.fx3dMobile.fx3dApp #appWrap .match,
body.fx3dOn.fx3dMobile.fx3dApp #appWrap .perfBestCard,
body.fx3dOn.fx3dMobile.fx3dApp #appWrap .match:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 0 #171d29,0 4px 0 #0f131c,0 16px 28px rgba(0,0,0,.5) !important;
}
body.fx3dOn.fx3dMobile.fx3dApp #appWrap .hero,
body.fx3dOn.fx3dMobile.fx3dApp #appWrap .perfStat,
body.fx3dOn.fx3dMobile.fx3dApp #appWrap .perfRecentItem{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 3px 0 #11161f,0 14px 24px rgba(0,0,0,.45) !important;
}