/* Squad effects — refinement layer, loaded after the base effect rules on every page that
   shows effects (index.html, /challenges/). It only adds on top of those rules:
   - every effect card: glass top-edge highlight, deeper coloured shadow, brighter on hover
   - metallic / spectrum gradient names that flow (gold, steel and all Pro effects)
   - Pro effects (galaxy, thunder, bullets, blade, legend): breathing aura, a PRO mark on
     the effect tag and one extra layer each (star drift, holo foil, ammo belt).
   Plays on every device like the base effects (they're bought), so no reduced-motion opt-out. */

/* ── all effect cards ── */
.sqfx{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 12px 30px -14px var(--fx1),0 0 0 1px rgba(0,0,0,.3);transition:filter .2s}
.sqfx:hover{filter:brightness(1.1) saturate(1.12)}
.sqfx .sq-av img,.sqfx .sqitem-nologo{box-shadow:0 0 0 1.5px var(--fx2),0 0 0 3px var(--fx1),0 0 20px var(--fx1)}

/* ── flowing gradient names ── */
@keyframes fxFlow{to{background-position:200% 50%}}
.sqfx-gold .fx-name,.sqfx-steel .fx-name,
.sqfx-galaxy .fx-name,.sq-fx-galaxy .fx-name,.sqfx-thunder .fx-name,.sq-fx-thunder .fx-name,
.sqfx-bullets .fx-name,.sq-fx-bullets .fx-name,.sqfx-blade .fx-name,.sq-fx-blade .fx-name,
.sqfx-legend .fx-name,.sq-fx-legend .fx-name{
  background:var(--fxt) 0 50%/200% auto;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;font-weight:800;
  animation:fxFlow var(--fxs,3s) linear infinite;filter:drop-shadow(0 0 5px var(--fxd,rgba(255,200,61,.5)))}
.sqfx-gold{--fxt:linear-gradient(90deg,#fff6d6,#ffd24a 25%,#c98a00 50%,#ffd24a 75%,#fff6d6);--fxd:rgba(255,200,61,.55);--fxs:2.6s}
.sqfx-steel{--fxt:linear-gradient(90deg,#ffffff,#9aa6b8 25%,#eef3f8 50%,#7d8898 75%,#ffffff);--fxd:rgba(207,216,227,.35);--fxs:4s}
.sqfx-galaxy,.sq-fx-galaxy{--fxt:linear-gradient(90deg,#e6dcff,#8f6bff 25%,#5fd3ff 50%,#ff9be6 75%,#e6dcff);--fxd:rgba(143,107,255,.7);--fxs:4s}
.sqfx-thunder,.sq-fx-thunder{--fxt:linear-gradient(90deg,#ffffff,#9eeaff 30%,#4fd8ff 50%,#9eeaff 70%,#ffffff);--fxd:rgba(79,216,255,.75);--fxs:1.6s}
.sqfx-bullets,.sq-fx-bullets{--fxt:linear-gradient(90deg,#fff2c0,#ffb347 30%,#ff7a1a 50%,#ffb347 70%,#fff2c0);--fxd:rgba(255,154,61,.7);--fxs:1.4s}
.sqfx-blade,.sq-fx-blade{--fxt:linear-gradient(90deg,#ffffff,#c9d2de 30%,#ff5a6a 50%,#c9d2de 70%,#ffffff);--fxd:rgba(255,90,106,.6);--fxs:2.6s}
.sqfx-legend,.sq-fx-legend{--fxt:linear-gradient(90deg,#ffe38a,#fff6d6 20%,#ffc2f0 40%,#c4f3ff 60%,#9ff5c8 80%,#ffe38a);--fxd:rgba(255,210,74,.65);--fxs:3s}
/* thunder names still flash with the lightning */
@keyframes fxBolt{0%,84%,89%,93%,100%{filter:drop-shadow(0 0 5px rgba(79,216,255,.75))}86%,91%{filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 14px #4fd8ff)}}
.sqfx-thunder .fx-name,.sq-fx-thunder .fx-name{animation:fxFlow 1.6s linear infinite,fxBolt 3.4s linear infinite}

/* ── Pro effects ── */
@keyframes fxAura{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 30px -14px var(--fx1),0 0 0 1px rgba(0,0,0,.3)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 14px 40px -8px var(--fx1),0 0 26px -6px var(--fx2),0 0 0 1px rgba(0,0,0,.3)}}
.sqfx-galaxy{animation:chipIn .4s ease forwards,sqSpin 5s linear infinite,fxAura 4s ease-in-out infinite}
.sqfx-thunder{animation:chipIn .4s ease forwards,sqSpin 1.8s linear infinite,fxAura 3.4s ease-in-out infinite}
.sqfx-bullets{animation:chipIn .4s ease forwards,sqSpin 1.3s linear infinite,fxAura 2.4s ease-in-out infinite}
.sqfx-blade{animation:chipIn .4s ease forwards,sqSpin 2.6s linear infinite,fxAura 2.6s ease-in-out infinite}
.sqfx-legend{animation:chipIn .4s ease forwards,sqSpin 3s linear infinite,fxAura 3s ease-in-out infinite}
/* PRO mark on the effect tag (challenge cards use .fxt, the squad list uses .sqfx-tag) */
.sqfx-galaxy .fxt,.sqfx-thunder .fxt,.sqfx-bullets .fxt,.sqfx-blade .fxt,.sqfx-legend .fxt,
.sqfx-galaxy .sqfx-tag,.sqfx-thunder .sqfx-tag,.sqfx-bullets .sqfx-tag,.sqfx-blade .sqfx-tag,.sqfx-legend .sqfx-tag{
  border:1px solid transparent;background:linear-gradient(rgba(6,8,14,.72),rgba(6,8,14,.72)) padding-box,linear-gradient(90deg,var(--fx1),var(--fx2),var(--fx1)) border-box;
  box-shadow:0 0 12px -3px var(--fx1)}
.sqfx-galaxy .fxt::before,.sqfx-thunder .fxt::before,.sqfx-bullets .fxt::before,.sqfx-blade .fxt::before,.sqfx-legend .fxt::before,
.sqfx-galaxy .sqfx-tag::before,.sqfx-thunder .sqfx-tag::before,.sqfx-bullets .sqfx-tag::before,.sqfx-blade .sqfx-tag::before,.sqfx-legend .sqfx-tag::before{
  content:'PRO';display:inline-block;margin-right:5px;padding:1px 4px;border-radius:4px;font-size:.52rem;font-weight:900;letter-spacing:.06em;line-height:1.3;
  color:#07090f;background:linear-gradient(90deg,var(--fx1),var(--fx2));vertical-align:1px}
/* Galaxy — a slow drifting star field behind the nebula */
@keyframes fxDrift{to{background-position:140px 0,90px 0,60px 0}}
.sqfx-galaxy::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;opacity:.7;
  background:radial-gradient(1px 1px at 12% 30%,#fff,transparent 60%) 0 0/140px 70px,radial-gradient(1px 1px at 55% 70%,#d9ccff,transparent 60%) 0 0/90px 50px,radial-gradient(1.5px 1.5px at 80% 20%,#c4f3ff,transparent 60%) 0 0/60px 60px;
  animation:fxDrift 14s linear infinite}
/* Legend — holographic foil sheen sliding across the card */
@keyframes fxFoil{from{background-position:120% 0}to{background-position:-20% 0}}
.sqfx-legend::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 25%,rgba(255,107,214,.16) 38%,rgba(95,211,255,.18) 46%,rgba(255,227,138,.22) 54%,rgba(84,224,160,.14) 62%,transparent 75%) 0 0/250% 100%;
  animation:fxFoil 5s ease-in-out infinite alternate}
/* Bullet Storm — an ammo belt running along the bottom edge */
@keyframes fxBelt{to{background-position:12px 0}}
.sqfx-bullets::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;z-index:0;pointer-events:none;opacity:.7;
  background:repeating-linear-gradient(90deg,#ffcf7a 0 5px,#b8651d 5px 7px,transparent 7px 12px);animation:fxBelt .45s linear infinite}

/* ── name-only effects: podiums, results tables, winner banners — places with no card
   around the squad, so the name itself carries the effect (fxn + fxn-<key>) ── */
.fxn{font-weight:800}
.fxn-fire{animation:fireTextColor 1.4s ease-in-out infinite}
.fxn-ice{animation:iceTextColor 2s ease-in-out infinite}
.fxn-neon{animation:neonTextColor 2.8s linear infinite}
.fxn-rainbow{animation:rainbowTextColor 4s linear infinite}
.fxn-glow{color:#ffe9b0;animation:glowText 2.8s ease-in-out infinite}
.fxn-gold,.fxn-steel,.fxn-galaxy,.fxn-thunder,.fxn-bullets,.fxn-blade,.fxn-legend{
  background:var(--fxt) 0 50%/200% auto;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;
  animation:fxFlow var(--fxs,3s) linear infinite;filter:drop-shadow(0 0 5px var(--fxd,rgba(255,200,61,.5)))}
.fxn-gold{--fxt:linear-gradient(90deg,#fff6d6,#ffd24a 25%,#c98a00 50%,#ffd24a 75%,#fff6d6);--fxd:rgba(255,200,61,.55);--fxs:2.6s}
.fxn-steel{--fxt:linear-gradient(90deg,#ffffff,#9aa6b8 25%,#eef3f8 50%,#7d8898 75%,#ffffff);--fxd:rgba(207,216,227,.35);--fxs:4s}
.fxn-galaxy{--fxt:linear-gradient(90deg,#e6dcff,#8f6bff 25%,#5fd3ff 50%,#ff9be6 75%,#e6dcff);--fxd:rgba(143,107,255,.7);--fxs:4s}
.fxn-thunder{--fxt:linear-gradient(90deg,#ffffff,#9eeaff 30%,#4fd8ff 50%,#9eeaff 70%,#ffffff);--fxd:rgba(79,216,255,.75);--fxs:1.6s;animation:fxFlow 1.6s linear infinite,fxBolt 3.4s linear infinite}
.fxn-bullets{--fxt:linear-gradient(90deg,#fff2c0,#ffb347 30%,#ff7a1a 50%,#ffb347 70%,#fff2c0);--fxd:rgba(255,154,61,.7);--fxs:1.4s}
.fxn-blade{--fxt:linear-gradient(90deg,#ffffff,#c9d2de 30%,#ff5a6a 50%,#c9d2de 70%,#ffffff);--fxd:rgba(255,90,106,.6);--fxs:2.6s}
.fxn-legend{--fxt:linear-gradient(90deg,#ffe38a,#fff6d6 20%,#ffc2f0 40%,#c4f3ff 60%,#9ff5c8 80%,#ffe38a);--fxd:rgba(255,210,74,.65);--fxs:3s}
.fxn-tag{display:inline-block;vertical-align:middle;margin-left:6px;font-size:.58rem;font-weight:800;letter-spacing:.01em;line-height:1.2;padding:2px 7px;border-radius:999px;color:#fff1b8;background:rgba(0,0,0,.4);border:1px solid rgba(255,200,61,.55);-webkit-text-fill-color:currentColor}
/* avatar ring in the effect's colour (podium / winner logo) */
.fxa-fire{box-shadow:0 0 0 2px #ff6b3d,0 0 20px rgba(255,107,61,.7)!important}
.fxa-ice{box-shadow:0 0 0 2px #5fd3ff,0 0 20px rgba(95,211,255,.7)!important}
.fxa-neon{box-shadow:0 0 0 2px #c86bff,0 0 20px rgba(255,95,210,.7)!important}
.fxa-rainbow{animation:rainbowCycle 4s linear infinite}
.fxa-glow,.fxa-gold,.fxa-legend{box-shadow:0 0 0 2px #ffd24a,0 0 22px rgba(255,210,74,.75)!important}
.fxa-steel{box-shadow:0 0 0 2px #cfd8e3,0 0 16px rgba(207,216,227,.5)!important}
.fxa-galaxy{box-shadow:0 0 0 2px #8f6bff,0 0 22px rgba(95,211,255,.6)!important}
.fxa-thunder{box-shadow:0 0 0 2px #4fd8ff,0 0 22px rgba(79,216,255,.8)!important}
.fxa-bullets{box-shadow:0 0 0 2px #ff9a3d,0 0 20px rgba(255,154,61,.75)!important}
.fxa-blade{box-shadow:0 0 0 2px #ff5a6a,0 0 20px rgba(255,90,106,.7)!important}

/* ── Pro layer v2 (30 Oct 2026): Pro effects look a level above the rest wherever they appear ──
   names: a bright sweep + breathing glow · logos: pulsing aura · tags: PRO mark */
@keyframes fxProGlow{0%,100%{filter:drop-shadow(0 0 4px var(--fxd,rgba(255,200,61,.5)))}50%{filter:drop-shadow(0 0 10px var(--fxd,rgba(255,200,61,.8))) drop-shadow(0 0 2px #fff)}}
@keyframes fxSweep{0%,62%{background-position:-60% 0,0 50%}100%{background-position:160% 0,200% 50%}}
.fxn-galaxy,.fxn-bullets,.fxn-blade,.fxn-legend{
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%) -60% 0/45% 100% no-repeat,var(--fxt) 0 50%/200% auto;
  -webkit-background-clip:text;background-clip:text;
  animation:fxSweep 3.2s ease-in-out infinite,fxProGlow 2.4s ease-in-out infinite}
.fxn-thunder{background:linear-gradient(105deg,transparent 40%,#fff 50%,transparent 60%) -60% 0/45% 100% no-repeat,var(--fxt) 0 50%/200% auto;
  -webkit-background-clip:text;background-clip:text;animation:fxSweep 2.2s ease-in-out infinite,fxBolt 3.4s linear infinite}
@keyframes fxRingPulse{0%,100%{filter:drop-shadow(0 0 3px var(--rc)) saturate(1.05)}50%{filter:drop-shadow(0 0 12px var(--rc)) drop-shadow(0 0 4px #fff) saturate(1.25)}}
.fxa-galaxy{--rc:#8f6bff}.fxa-thunder{--rc:#4fd8ff}.fxa-bullets{--rc:#ff9a3d}.fxa-blade{--rc:#ff5a6a}.fxa-legend{--rc:#ffd24a}
.fxa-galaxy,.fxa-thunder,.fxa-bullets,.fxa-blade,.fxa-legend{animation:fxRingPulse 2.2s ease-in-out infinite}
.fxn-galaxy+.fxn-tag,.fxn-thunder+.fxn-tag,.fxn-bullets+.fxn-tag,.fxn-blade+.fxn-tag,.fxn-legend+.fxn-tag{
  color:#fff;border-color:transparent;background:linear-gradient(rgba(6,8,14,.8),rgba(6,8,14,.8)) padding-box,linear-gradient(90deg,#ff6bd6,#5fd3ff,#ffd24a,#ff6bd6) border-box;
  box-shadow:0 0 10px -2px rgba(95,211,255,.6)}
.fxn-galaxy+.fxn-tag::before,.fxn-thunder+.fxn-tag::before,.fxn-bullets+.fxn-tag::before,.fxn-blade+.fxn-tag::before,.fxn-legend+.fxn-tag::before{
  content:'PRO';margin-right:4px;padding:0 4px;border-radius:3px;font-size:.5rem;font-weight:900;letter-spacing:.06em;color:#07090f;background:linear-gradient(90deg,#ffd24a,#ff9be6)}
/* same bright sweep on Pro names inside cards */
.sqfx-galaxy .fx-name,.sq-fx-galaxy .fx-name,.sqfx-bullets .fx-name,.sq-fx-bullets .fx-name,
.sqfx-blade .fx-name,.sq-fx-blade .fx-name,.sqfx-legend .fx-name,.sq-fx-legend .fx-name{
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%) -60% 0/45% 100% no-repeat,var(--fxt) 0 50%/200% auto;
  -webkit-background-clip:text;background-clip:text;animation:fxSweep 3.2s ease-in-out infinite,fxProGlow 2.4s ease-in-out infinite}
.sqfx-thunder .fx-name,.sq-fx-thunder .fx-name{
  background:linear-gradient(105deg,transparent 40%,#fff 50%,transparent 60%) -60% 0/45% 100% no-repeat,var(--fxt) 0 50%/200% auto;
  -webkit-background-clip:text;background-clip:text;animation:fxSweep 2.2s ease-in-out infinite,fxBolt 3.4s linear infinite}
/* Thunder — a lightning flash over the whole card */
@keyframes fxFlash{0%,82%,87%,91%,100%{opacity:0}84%,89%{opacity:.55}}
.sqfx-thunder::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(120% 90% at 70% 0%,rgba(190,240,255,.55),transparent 60%);animation:fxFlash 3.4s linear infinite}
/* Blade — a sword slash cutting across the card */
@keyframes fxSlash{0%,70%{transform:translateX(-120%) skewX(-24deg);opacity:0}74%{opacity:1}86%,100%{transform:translateX(220%) skewX(-24deg);opacity:0}}
.sqfx-blade::after{content:'';position:absolute;top:0;bottom:0;left:0;width:45%;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 40%,rgba(255,255,255,.85) 50%,rgba(255,90,106,.35) 54%,transparent 64%);animation:fxSlash 3.6s ease-in infinite}

/* ── season leaderboard: Pro squads get a moving rainbow-edge border and a PRO badge ── */
@keyframes ssProEdge{to{background-position:300% 0}}
.ss-pro{border-color:transparent;background:linear-gradient(100deg,color-mix(in srgb,var(--fxc) 26%,#0d1320),#0d1320 64%) padding-box,
  linear-gradient(90deg,var(--fxc),#ff9be6,#5fd3ff,#ffd24a,var(--fxc)) 0 0/300% 100% border-box;border:1.5px solid transparent;
  animation:ssProEdge 6s linear infinite;box-shadow:0 0 26px -4px color-mix(in srgb,var(--fxc) 45%,transparent)}
.ss-pro .ss-badge{background:linear-gradient(90deg,#ffd24a,#ff9be6,#5fd3ff);box-shadow:0 0 12px -2px var(--fxc)}
.ss-pro .ss-badge::before{content:'PRO · ';font-weight:900}
.ss-pro .ss-pts b{color:#fff;text-shadow:0 0 12px var(--fxc)}

/* ── fxchip: a squad name inside a small effect card, for places with no squad card around the name
   (podiums, Champions banner, winner spotlight, Winner label). Same .sqfx classes, so fx-engine.js
   draws the same live layer as on the event roster ── */
.fxchip{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:5px 13px;border-radius:999px;vertical-align:middle;line-height:1.15;position:relative;overflow:hidden;isolation:isolate}
.fxchip>*:not(.fxc):not(.sqp):not(.sqfx-shine){position:relative;z-index:1}
.fxchip .fx-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fxchip .sqfx-tag{margin:0;flex:none}
.fxchip::before{border-radius:inherit}