/* ============================================================
   FIGHTERS ACADEMY � DESIGN SYSTEM
   Signature motif: scorecard corner brackets (� �) � a nod to
   the judges' scorecards that decide every fight. Used on the
   hero frame, section eyebrows, card hover states, and photos.
   ============================================================ */

:root{
  /* ---- brand core (kept from existing FA brand kit) ---- */
  --gold:#CFAC42; --gold-light:#EACD58; --gold-dim:#8A6F22;
  --gold-glow:rgba(207,172,66,.35);
  --red:#C0392B; --red-bright:#E74C3C;

  /* ---- dark theme surfaces ---- */
  --dk-void:#0A0A0A; --dk-canvas:#0D0D0C; --dk-surface:#141414;
  --dk-surface-2:#1B1A17; --dk-line:rgba(207,172,66,.16);
  --dk-line-strong:rgba(207,172,66,.32); --dk-ink:#F0EDE8;
  --dk-ink-dim:rgba(240,237,232,.64); --dk-ink-faint:rgba(240,237,232,.38);

  /* ---- light theme surfaces ---- */
  --lt-void:#F5F3EE; --lt-canvas:#FFFFFF; --lt-surface:#FFFFFF;
  --lt-surface-2:#F7F4EC; --lt-line:rgba(20,16,4,.10);
  --lt-line-strong:rgba(20,16,4,.18); --lt-ink:#16140F;
  --lt-ink-dim:rgba(22,20,15,.62); --lt-ink-faint:rgba(22,20,15,.42);

  --font-display:'Bebas Neue', 'Noto Sans Arabic', sans-serif;
  --font-body:'Inter', 'Noto Sans Arabic', sans-serif;
  --ease:cubic-bezier(.16,.8,.22,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --radius:14px; --radius-sm:9px; --radius-lg:24px;
  --wrap:1260px;
}
[data-theme="dark"]{
  --void:var(--dk-void); --canvas:var(--dk-canvas); --surface:var(--dk-surface);
  --surface-2:var(--dk-surface-2); --line:var(--dk-line); --line-strong:var(--dk-line-strong);
  --ink:var(--dk-ink); --ink-dim:var(--dk-ink-dim); --ink-faint:var(--dk-ink-faint);
  --shadow:0 20px 60px -20px rgba(0,0,0,.7); --nav-bg:rgba(10,10,10,.82);
  --grain-op:.05;
}
[data-theme="light"]{
  --void:var(--lt-void); --canvas:var(--lt-canvas); --surface:var(--lt-surface);
  --surface-2:var(--lt-surface-2); --line:var(--lt-line); --line-strong:var(--lt-line-strong);
  --ink:var(--lt-ink); --ink-dim:var(--lt-ink-dim); --ink-faint:var(--lt-ink-faint);
  --shadow:0 20px 60px -24px rgba(20,16,4,.25); --nav-bg:rgba(245,243,238,.86);
  --grain-op:.025;
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body); background:var(--void); color:var(--ink);
  line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased;
  transition:background .35s var(--ease), color .35s var(--ease);
}
[dir="rtl"] body{font-family:'Noto Sans Arabic','Inter',sans-serif;}
img{max-width:100%; display:block;}
a{color:inherit;}
ul{list-style:none;}
button,input,select{font-family:inherit; color:inherit;}
::selection{background:var(--gold); color:#0A0A0A;}

/* focus visibility (a11y) */
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;}

/* skip link */
.skip-link{
  position:fixed; top:-60px; left:16px; z-index:5000;
  background:var(--gold); color:#0A0A0A; padding:10px 18px;
  font-weight:700; font-size:13px; border-radius:8px; transition:top .2s var(--ease);
}
.skip-link:focus{top:16px;}

/* film-grain overlay for cinematic depth */
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:var(--grain-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(20px,4vw,48px);}
.section{padding:clamp(72px,10vw,132px) 0; position:relative;}
.section-alt{background:var(--canvas);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

/* ---- scorecard corner brackets (signature motif) ---- */
.brackets{position:relative;}
.brackets::before,.brackets::after{
  content:''; position:absolute; width:16px; height:16px; opacity:0; transition:opacity .35s var(--ease), transform .35s var(--ease);
  border:2px solid var(--gold); pointer-events:none;
}
.brackets::before{top:-6px; left:-6px; border-right:0; border-bottom:0; transform:translate(4px,4px);}
.brackets::after{bottom:-6px; right:-6px; border-left:0; border-top:0; transform:translate(-4px,-4px);}
.brackets:hover::before,.brackets:hover::after,.brackets:focus-within::before,.brackets:focus-within::after{opacity:1; transform:translate(0,0);}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11.5px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold); margin-bottom:16px; position:relative; padding-left:0;
}
.eyebrow::before{content:''; display:inline-block; width:22px; height:1px; background:var(--gold);}
[dir="rtl"] .eyebrow{letter-spacing:1px;}
[dir="rtl"] .eyebrow::before{order:2;}

.section-title{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(32px,4.6vw,56px); letter-spacing:.5px; line-height:1.02; color:var(--ink);
}
[dir="rtl"] .section-title{font-family:'Noto Sans Arabic',sans-serif; font-weight:800; letter-spacing:0;}
.section-desc{font-size:15.5px; color:var(--ink-dim); max-width:620px; line-height:1.8; margin-top:16px;}
.section-head{margin-bottom:52px;}
.section-head.center{text-align:center; margin-left:auto; margin-right:auto;}
.section-head.center .section-desc{margin-left:auto; margin-right:auto;}
.section-head.center .eyebrow::before{display:none;}

.rule{height:1px; background:linear-gradient(90deg,var(--gold) 0%,transparent 70%); width:120px; margin-top:20px; opacity:.7;}
.section-head.center .rule{margin-left:auto; margin-right:auto;}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  padding:16px 30px; border-radius:999px; text-decoration:none; cursor:pointer;
  border:1px solid transparent; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
  white-space:nowrap;
}
.btn-primary{background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:#151004; box-shadow:0 10px 30px -10px var(--gold-glow);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 38px -12px var(--gold-glow);}
.btn-outline{background:transparent; border-color:var(--line-strong); color:var(--ink);}
.btn-outline:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-2px);}
.btn-sm{padding:10px 18px; font-size:11px;}

.btn-icon{
  background:none; border:1px solid var(--line); color:var(--ink);
  cursor:pointer; width:38px; height:38px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; font-size:15px;
  transition:border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.btn-icon:hover{border-color:var(--gold); transform:translateY(-1px); background:var(--surface);}

/* ---- nav ---- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(20px,4vw,48px); height:76px;
  background:var(--nav-bg); backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line); transition:background .35s var(--ease), border-color .35s var(--ease), height .3s var(--ease);
}
nav.scrolled{height:64px;}
.nav-logo{display:flex; align-items:center; gap:11px; text-decoration:none;}
.nav-logo-mark{
  width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,var(--gold-light),var(--gold-dim)); color:#120E03;
  font-family:var(--font-display); font-size:17px; letter-spacing:.5px; flex:none;
  box-shadow:0 6px 18px -6px var(--gold-glow);
}
.nav-logo img.loaded{width:38px; height:38px; border-radius:9px; object-fit:cover;}
.nav-logo-mark.hide-when-logo{display:flex;}
.nav-logo img:not(.loaded){display:none;}
.nav-logo-text{font-family:var(--font-display); font-size:19px; letter-spacing:2px; color:var(--ink); line-height:1;}
.nav-logo-text span{display:block; font-family:var(--font-body); font-size:9.5px; font-weight:600; letter-spacing:2px; color:var(--gold); margin-top:3px;}
.nav-links{display:flex; align-items:center; gap:30px;}
.nav-links a{
  font-size:12.5px; font-weight:600; letter-spacing:.7px; text-transform:uppercase;
  text-decoration:none; color:var(--ink-dim); position:relative; padding:8px 0;
  transition:color .25s var(--ease);
}
.nav-links a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--gold); transition:width .3s var(--ease);}
.nav-links a:hover,.nav-links a.active{color:var(--ink);}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-controls{display:flex; align-items:center; gap:10px;}
.lang-btn{
  background:none; border:1px solid var(--line); color:var(--ink); cursor:pointer;
  font-size:12px; font-weight:700; padding:8px 14px; border-radius:9px; letter-spacing:.5px;
  transition:border-color .25s var(--ease);
}
.lang-btn:hover{border-color:var(--gold);}
.burger{
  display:none; width:38px; height:38px; border-radius:9px; border:1px solid var(--line);
  background:none; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition:background .2s var(--ease);
}
.burger:hover{background:var(--surface);}
.burger span{width:16px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease), opacity .3s var(--ease);}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.mobile-overlay{
  display:none; position:fixed; inset:0; z-index:998; background:rgba(0,0,0,.5);
}
.mobile-overlay.open{display:block;}
@media (max-width:900px){
  .nav-links{display:none;}
  .burger{display:flex;}
  .nav-links.open{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:fixed; top:0; left:0; right:0; bottom:0; z-index:999;
    background:var(--void); padding:80px clamp(20px,4vw,48px) 40px;
    overflow-y:auto;
  }
  .nav-links.open li{border-bottom:1px solid var(--line);}
  .nav-links.open a{padding:16px 0; font-size:15px; border-bottom:none;}
}

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:150px 24px 60px; overflow:hidden; isolation:isolate;
}
.hero-canvas{
  position:absolute; inset:0; z-index:-2; background:
    radial-gradient(ellipse 60% 50% at 78% 8%, rgba(207,172,66,.16), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 100%, rgba(192,57,43,.10), transparent 60%),
    var(--void);
}
.hero-lines{
  position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 78%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 78%);
}
.hero-sweep{
  position:absolute; inset:-20%; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg, transparent 40%, rgba(207,172,66,.14) 50%, transparent 60%);
  animation:sweep 9s ease-in-out infinite;
}
@keyframes sweep{ 0%,100%{transform:translateX(-18%);} 50%{transform:translateX(18%);} }
.hero-frame{position:relative; padding:52px clamp(18px,6vw,90px);}
.hero-frame::before,.hero-frame::after{
  content:''; position:absolute; width:34px; height:34px; border:1.5px solid var(--gold); opacity:.55;
}
.hero-frame::before{top:0; left:0; border-right:0; border-bottom:0;}
.hero-frame::after{bottom:0; right:0; border-left:0; border-top:0;}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:26px;
}
.hero-eyebrow::before,.hero-eyebrow::after{content:''; width:26px; height:1px; background:var(--gold);}
.hero-title{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(52px,10.5vw,138px); line-height:.92; letter-spacing:1px; color:var(--ink);
}
.hero-title .accent{
  display:block; background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-dim));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
[dir="rtl"] .hero-title{font-family:'Noto Sans Arabic',sans-serif; font-weight:800; letter-spacing:0;}
.hero-subtitle{
  font-size:clamp(15px,1.6vw,18px); color:var(--ink-dim); max-width:640px;
  margin:26px auto 0; line-height:1.85;
}
.hero-cta{display:flex; gap:16px; justify-content:center; margin-top:38px; flex-wrap:wrap;}

/* tale-of-the-tape stat strip */
.hero-stats{
  display:flex; align-items:stretch; justify-content:center; gap:0; margin-top:64px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.hero-stat{padding:22px 34px; text-align:center; min-width:130px;}
.hero-stat-num{
  font-family:var(--font-display); font-size:clamp(30px,3.6vw,44px); color:var(--gold); line-height:1;
  font-variant-numeric:tabular-nums;
}
.hero-stat-label{font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--ink-faint); margin-top:8px; font-weight:600;}
.hero-divider{width:1px; background:var(--line); align-self:stretch;}
.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  width:22px; height:36px; border:1.5px solid var(--line-strong); border-radius:14px;
}
.scroll-hint::before{
  content:''; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:3px; height:8px; border-radius:2px; background:var(--gold);
  animation:scrolldot 1.8s ease-in-out infinite;
}
@keyframes scrolldot{ 0%{opacity:1; top:6px;} 70%{opacity:0; top:18px;} 100%{opacity:0; top:6px;} }

/* ============ TICKER / RECORD MARQUEE ============ */
.ticker{
  background:var(--gold); color:#151004; overflow:hidden; white-space:nowrap;
  padding:13px 0; position:relative; z-index:5;
}
.ticker-track{display:inline-flex; gap:48px; animation:tickerScroll 34s linear infinite; will-change:transform;}
.ticker:hover .ticker-track{animation-play-state:paused;}
@keyframes tickerScroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.ticker-item{display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;}
.ticker-item b{font-weight:800;}
.ticker-dot{width:5px; height:5px; border-radius:50%; background:#151004; opacity:.55; margin:0 4px;}
[dir="rtl"] .ticker-track{animation-name:tickerScrollRTL;}
@keyframes tickerScrollRTL{ from{transform:translateX(0);} to{transform:translateX(50%);} }

/* ============ ABOUT ============ */
.about-grid{display:block; max-width:720px;}
.about-feature{display:flex; gap:16px; margin-top:26px; align-items:flex-start;}
.about-icon{
  width:44px; height:44px; border-radius:11px; background:var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:19px; flex:none;
}
.about-feature-title{font-weight:700; font-size:14.5px; margin-bottom:4px;}
.about-feature-desc{font-size:13.5px; color:var(--ink-dim); line-height:1.7;}

.coach-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:44px 36px; text-align:center; position:relative; box-shadow:var(--shadow);
}
.coach-avatar{
  width:96px; height:96px; border-radius:50%; margin:0 auto 20px;
  background:linear-gradient(150deg,var(--gold-light),var(--gold-dim));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:30px; color:#151004; overflow:hidden;
  box-shadow:0 12px 32px -10px var(--gold-glow); border:3px solid var(--surface-2);
}
.coach-avatar img{width:100%; height:100%; object-fit:cover;}
.coach-name{font-family:var(--font-display); font-size:24px; letter-spacing:1.5px; color:var(--ink);}
[dir="rtl"] .coach-name{font-family:'Noto Sans Arabic',sans-serif; font-weight:800;}
.coach-title{font-size:11.5px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); font-weight:700; margin:6px 0 18px;}
.coach-bio{font-size:13.5px; color:var(--ink-dim); line-height:1.8;}
.coach-contact{display:flex; gap:10px; justify-content:center; margin-top:24px; flex-wrap:wrap;}
.contact-pill{
  display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  padding:10px 16px; border-radius:999px; border:1px solid var(--line); text-decoration:none;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.contact-pill:hover{border-color:var(--gold); color:var(--gold);}

@media (max-width:860px){ .about-grid{max-width:none;} }

/* ============ SQUADS / TEAMS ============ */
.squads-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
.squad-card{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:40px 34px; overflow:hidden; transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.squad-card:hover{border-color:var(--line-strong); transform:translateY(-4px);}
.squad-badge{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:2px; padding:6px 14px;
  border-radius:999px; margin-bottom:18px;
}
.squad-badge.a{background:rgba(207,172,66,.14); color:var(--gold-light); border:1px solid rgba(207,172,66,.3);}
.squad-badge.b{background:rgba(192,57,43,.14); color:#EE8A7C; border:1px solid rgba(192,57,43,.32);}
.squad-name{font-family:var(--font-display); font-size:30px; letter-spacing:1px; margin-bottom:14px;}
[dir="rtl"] .squad-name{font-family:'Noto Sans Arabic',sans-serif; font-weight:800;}
.squad-desc{font-size:13.5px; color:var(--ink-dim); line-height:1.8; max-width:92%;}
.squad-meta{display:flex; gap:28px; margin-top:28px; padding-top:24px; border-top:1px solid var(--line); flex-wrap:wrap;}
.squad-meta-item strong{display:block; font-family:var(--font-display); font-size:26px; color:var(--gold);}
.squad-meta-item span{font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-faint);}
.squad-card > *:not(.squad-watermark){position:relative; z-index:1;}
.squad-watermark{
  position:absolute; right:-6px; bottom:-38px; font-family:var(--font-display); font-size:180px;
  color:var(--line); line-height:1; z-index:0; user-select:none; pointer-events:none;
}
[dir="rtl"] .squad-watermark{right:auto; left:-6px;}
@media (max-width:780px){ .squads-grid{grid-template-columns:1fr;} }

/* ============ BADGES ============ */
.badge{
  display:inline-flex; align-items:center; font-size:10.5px; font-weight:700; letter-spacing:.4px;
  padding:5px 10px; border-radius:6px; white-space:nowrap; border:1px solid transparent;
}
.badge-world{background:rgba(207,172,66,.16); color:var(--gold-light); border-color:rgba(207,172,66,.35);}
.badge-continent{background:rgba(192,57,43,.16); color:#F0958A; border-color:rgba(192,57,43,.35);}
.badge-arab{background:rgba(120,150,200,.16); color:#9DB7E0; border-color:rgba(120,150,200,.35);}
.badge-national{background:rgba(90,170,120,.16); color:#8FD3A6; border-color:rgba(90,170,120,.35);}
.badge-default{background:var(--surface-2); color:var(--ink-dim); border-color:var(--line);}
.national-flag{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:#8FD3A6;}

/* ============ RANKINGS / SCORECARD ============ */
.rankings-toolbar{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:30px; flex-wrap:wrap;}
.filter-row{display:flex; gap:8px; flex-wrap:wrap;}
.filter-chip{
  padding:9px 18px; border-radius:999px; border:1px solid var(--line); background:transparent;
  font-size:12px; font-weight:600; letter-spacing:.4px; cursor:pointer; color:var(--ink-dim);
  transition:all .25s var(--ease);
}
.filter-chip:hover{border-color:var(--gold);color:var(--ink);}
.filter-chip.active{background:var(--gold); border-color:var(--gold); color:#151004;}

/* podium */
.podium{display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-bottom:44px; align-items:end;}
.podium-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 18px 22px;
  text-align:center; position:relative; cursor:pointer; transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.podium-card:hover{transform:translateY(-6px); border-color:var(--line-strong);}
.podium-card.rank-1{order:2; padding-top:34px; border-color:rgba(207,172,66,.5); background:linear-gradient(180deg,rgba(207,172,66,.09),var(--surface) 60%);}
.podium-card.rank-2{order:1;}
.podium-card.rank-3{order:3;}
.podium-medal{
  width:52px; height:52px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:20px; border:2px solid;
}
.rank-1 .podium-medal{width:64px; height:64px; font-size:24px; background:linear-gradient(150deg,var(--gold-light),var(--gold-dim)); border-color:var(--gold-light); color:#151004; box-shadow:0 10px 26px -8px var(--gold-glow);}
.rank-2 .podium-medal{background:linear-gradient(150deg,#E4E4E4,#9A9A9A); border-color:#CFCFCF; color:#151004;}
.rank-3 .podium-medal{background:linear-gradient(150deg,#D8A377,#8C5A34); border-color:#D8A377; color:#151004;}
.podium-photo{
  width:74px; height:74px; border-radius:50%; margin:0 auto 12px; overflow:hidden;
  background:var(--surface-2); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:22px; color:var(--gold); border:2px solid var(--line-strong);
}
.rank-1 .podium-photo{width:88px; height:88px; font-size:26px;}
.podium-photo img{width:100%; height:100%; object-fit:cover;}
.podium-name{font-weight:700; font-size:14px; margin-bottom:3px;}
.podium-team{font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:1px; margin-bottom:10px;}
.podium-score{font-family:var(--font-display); font-size:26px; color:var(--gold);}
.podium-score small{font-family:var(--font-body); font-size:10px; color:var(--ink-faint); font-weight:600; margin-left:2px;}

.scorecard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
}
.scorecard-table{width:100%; border-collapse:collapse;}
.scorecard-table th{
  text-align:left; font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink-faint);
  font-weight:700; padding:16px 20px; border-bottom:1px solid var(--line); background:var(--surface-2);
}
[dir="rtl"] .scorecard-table th{text-align:right;}
.scorecard-table td{padding:16px 20px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle;}
.scorecard-table tbody tr{cursor:pointer; transition:background .2s var(--ease);}
.scorecard-table tbody tr:hover{background:var(--surface-2);}
.scorecard-table tbody tr:last-child td{border-bottom:0;}
.rank-num{
  width:30px; height:30px; border-radius:8px; background:var(--surface-2); display:flex; align-items:center;
  justify-content:center; font-family:var(--font-display); font-size:14px; color:var(--ink-dim);
}
.player-cell{display:flex; align-items:center; gap:12px;}
.player-avatar{
  width:40px; height:40px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center;
  justify-content:center; font-family:var(--font-display); font-size:15px; color:var(--gold); overflow:hidden; flex:none;
  border:1px solid var(--line);
}
.player-avatar img{width:100%; height:100%; object-fit:cover;}
.player-name{font-weight:700; font-size:13.5px;}
.player-id{font-size:11px; color:var(--ink-faint); font-variant-numeric:tabular-nums;}
.team-tag{font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:6px; letter-spacing:.4px;}
.team-tag.a{background:rgba(207,172,66,.14); color:var(--gold-light);}
.team-tag.b{background:rgba(192,57,43,.14); color:#EE8A7C;}
.score-points{font-family:var(--font-display); font-size:19px; color:var(--gold); font-variant-numeric:tabular-nums;}
.empty-state{text-align:center; padding:70px 24px; color:var(--ink-faint);}
.empty-state .glyph{font-size:34px; margin-bottom:16px;}
.empty-state p:first-of-type{font-size:15px; font-weight:700; color:var(--ink-dim); margin-bottom:6px;}
.empty-state p{font-size:13px;}
@media (max-width:700px){
  .podium{grid-template-columns:1fr; gap:12px;}
  .podium-card.rank-1,.podium-card.rank-2,.podium-card.rank-3{order:0;}
  .scorecard{overflow-x:auto;}
  .scorecard-table{min-width:640px;}
}

/* ============ ACHIEVEMENT LEVELS ============ */
.levels-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.level-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px 22px;
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.level-card:hover{transform:translateY(-4px); border-color:var(--line-strong);}
.level-icon{font-size:26px; margin-bottom:14px;}
.level-name{font-weight:800; font-size:14px; letter-spacing:.3px; margin-bottom:4px;}
.level-desc{font-size:12px; color:var(--ink-faint); margin-bottom:18px;}
.level-places{display:flex; flex-direction:column; gap:8px;}
.place-row{display:flex; align-items:center; justify-content:space-between; font-size:12px;}
.place-tag{font-weight:700; letter-spacing:.4px;}
.place-tag.p1{color:var(--gold-light);}
.place-tag.p2{color:#CFCFCF;}
.place-tag.p3{color:#D8A377;}
.place-val{font-family:var(--font-display); font-size:15px; color:var(--ink-dim);}
@media (max-width:900px){ .levels-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .levels-grid{grid-template-columns:1fr;} }

/* ============ FIGHTERS ============ */
.fighters-toolbar{display:flex; gap:12px; margin-bottom:36px; flex-wrap:wrap;}
.search-input{
  flex:1; min-width:220px; background:var(--surface); border:1px solid var(--line); color:var(--ink);
  padding:14px 18px; border-radius:11px; font-size:13.5px; transition:border-color .25s var(--ease);
}
.search-input:focus{border-color:var(--gold);}
select.search-input{cursor:pointer; max-width:180px;}

.fighters-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:22px;}
.fighter-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  cursor:pointer; transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  position:relative;
}
.fighter-card:hover{transform:translateY(-6px); border-color:var(--line-strong); box-shadow:var(--shadow);}
.fighter-photo-wrap{
  position:relative; aspect-ratio:4/3.4; background:
    radial-gradient(ellipse 120% 90% at 50% -10%, rgba(207,172,66,.16), transparent 60%), var(--surface-2);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.fighter-photo-wrap img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease);}
.fighter-card:hover .fighter-photo-wrap img{transform:scale(1.06);}
.fighter-initial{font-family:var(--font-display); font-size:56px; color:var(--line-strong);}
.fighter-national-tag{
  position:absolute; top:12px; left:12px; background:rgba(10,10,10,.72); backdrop-filter:blur(6px);
  color:#8FD3A6; font-size:10px; font-weight:700; padding:5px 10px; border-radius:999px; letter-spacing:.4px;
}
[dir="rtl"] .fighter-national-tag{left:auto; right:12px;}
.fighter-gallery-tag{
  position:absolute; bottom:12px; right:12px; background:rgba(10,10,10,.72); backdrop-filter:blur(6px);
  color:var(--ink); font-size:10.5px; font-weight:700; padding:5px 10px; border-radius:999px;
  display:flex; align-items:center; gap:5px;
}
[dir="rtl"] .fighter-gallery-tag{right:auto; left:12px;}
.fighter-body{padding:20px 20px 22px;}
.fighter-id-tag{display:inline-block; font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:1.2px; color:var(--gold); background:rgba(207,172,66,.1); border:1px solid rgba(207,172,66,.25); border-radius:6px; padding:3px 8px; margin-bottom:6px;}
.fighter-name{font-weight:700; font-size:16px; margin-bottom:2px;}
.fighter-meta-line{font-size:11.5px; color:var(--ink-faint); margin-bottom:4px;}
.fighter-games-line{font-size:10.5px; color:var(--gold); opacity:.8; margin-bottom:14px; letter-spacing:.2px;}
.fighter-badges{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; min-height:24px;}
.fighter-stats-row{display:flex; justify-content:space-between; align-items:center; padding-top:14px; border-top:1px solid var(--line);}
.fighter-stat{text-align:left;}
[dir="rtl"] .fighter-stat{text-align:right;}
.fighter-stat-label{font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint);}
.fighter-stat-val{font-family:var(--font-display); font-size:16px; margin-top:2px;}
.fighter-score{font-family:var(--font-display); font-size:22px; color:var(--gold);}
.fighter-score small{font-family:var(--font-body); font-size:10px; color:var(--ink-faint); font-weight:700;}

/* ---- elite tier (A / A+) � carries the Elite Card look onto the grid card itself ---- */
.fighter-card.tier-elite{
  border-color:rgba(207,172,66,.35);
  border-color:color-mix(in srgb, var(--elite-c,var(--gold)) 40%, var(--line-strong));
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.fighter-card.tier-elite:hover{
  border-color:var(--elite-c,var(--gold));
  box-shadow:0 18px 44px -16px var(--gold-glow);
  box-shadow:0 18px 44px -16px color-mix(in srgb, var(--elite-c,var(--gold)) 55%, transparent);
}
.fighter-card.tier-elite .fighter-photo-wrap{
  background:
    radial-gradient(ellipse 130% 95% at 50% -15%, rgba(207,172,66,.28), transparent 62%), var(--surface-2);
  background:
    radial-gradient(ellipse 130% 95% at 50% -15%, color-mix(in srgb, var(--elite-c,var(--gold)) 38%, transparent), transparent 62%), var(--surface-2);
}
.fighter-card.tier-elite .fighter-initial{color:var(--elite-c,var(--gold)); opacity:.55;}
.fighter-card.tier-elite .fighter-score{color:var(--elite-c,var(--gold));}
.tier-medallion{
  position:absolute; bottom:12px; right:12px; z-index:2; width:34px; height:34px; border-radius:50%;
  background:var(--elite-c,var(--gold));
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--elite-c,var(--gold)) 65%, #fff), var(--elite-c,var(--gold)));
  border:2px solid var(--surface); display:flex; align-items:center; justify-content:center; font-size:15px;
  box-shadow:0 0 16px var(--gold-glow);
  box-shadow:0 0 16px color-mix(in srgb, var(--elite-c,var(--gold)) 60%, transparent);
}
[dir="rtl"] .tier-medallion{right:auto; left:12px;}
.tier-ribbon{
  position:absolute; top:12px; right:12px; z-index:2; display:flex; align-items:center; gap:5px;
  font-size:10.5px; font-weight:800; letter-spacing:.6px; padding:5px 10px 5px 8px; border-radius:999px;
  background:rgba(10,10,10,.72); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.14);
}
[dir="rtl"] .tier-ribbon{right:auto; left:12px;}
.elite-btn{
  margin-top:12px; width:100%; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:11px; border-radius:10px; font-size:11.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  cursor:pointer; border:1px solid var(--elite-c,var(--gold)); color:var(--elite-c,var(--gold)); background:transparent;
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.elite-btn:hover{background:var(--elite-c,var(--gold)); color:#0A0A0A; transform:translateY(-1px);}

/* ---- ELITE CARD MODAL (Discord-style banner + avatar + rank emblem) ---- */
.elite-modal{max-width:560px; padding-bottom:4px;}
.elite-banner{
  position:relative; height:172px; flex:none; overflow:hidden;
  background:var(--elite-banner, linear-gradient(135deg, var(--elite-c,var(--gold)), #0A0A0A 75%));
  background:var(--elite-banner, linear-gradient(135deg, color-mix(in srgb, var(--elite-c,var(--gold)) 55%, #0A0A0A), #0A0A0A 75%));
  background-size:cover; background-position:center;
}
.elite-banner::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 40%, var(--surface) 100%), radial-gradient(ellipse 70% 100% at 15% 100%, rgba(0,0,0,.55), transparent 60%);
}
.elite-banner-glow{
  position:absolute; width:220px; height:220px; border-radius:50%; filter:blur(50px); opacity:.55;
  background:var(--elite-c,var(--gold)); top:-90px; right:-60px; pointer-events:none;
}
.elite-modal-close{
  position:absolute; top:16px; right:16px; z-index:5; width:34px; height:34px; border-radius:9px;
  background:rgba(10,10,10,.55); border:1px solid rgba(255,255,255,.18); color:#fff; cursor:pointer; font-size:14px;
  backdrop-filter:blur(6px); transition:transform .25s var(--ease), border-color .25s var(--ease);
}
[dir="rtl"] .elite-modal-close{right:auto; left:16px;}
.elite-modal-close:hover{transform:rotate(90deg); border-color:var(--elite-c,var(--gold));}
.elite-id-row{position:relative; padding:0 28px; margin-top:-52px; z-index:10;}
.elite-avatar-wrap{display:flex; align-items:flex-end; gap:16px; overflow:visible;}
.elite-avatar{
  width:104px; height:104px; border-radius:50%; background:var(--surface-2); border:5px solid var(--surface);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:34px;
  color:var(--elite-c,var(--gold)); overflow:hidden; flex:none; position:relative; z-index:2;
  box-shadow:0 0 0 2px var(--elite-c,var(--gold)), 0 14px 34px -10px var(--elite-c,var(--gold));
}
.elite-avatar img{width:100%; height:100%; object-fit:cover;}
.elite-rank-badge{
  position:absolute; right:-6px; bottom:-6px; width:38px; height:38px; border-radius:50%;
  background:var(--elite-c,var(--gold));
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--elite-c,var(--gold)) 70%, #fff), var(--elite-c,var(--gold)));
  border:3px solid var(--surface); display:flex; align-items:center; justify-content:center; font-size:16px;
  box-shadow:0 0 18px var(--elite-c,var(--gold));
}
[dir="rtl"] .elite-rank-badge{right:auto; left:-6px;}
.elite-name-block{padding:0 28px; margin-top:16px;}
.elite-name{font-family:var(--font-display); font-size:27px; letter-spacing:.5px; line-height:1;}
[dir="rtl"] .elite-name{font-family:'Noto Sans Arabic',sans-serif; font-weight:800;}
.elite-tier-pill{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:5px 13px; border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:1px; color:#0A0A0A; background:var(--elite-c,var(--gold));
}
.elite-meta-line{font-size:12px; color:var(--ink-faint); margin-top:8px;}
.elite-body{padding:22px 28px 28px; max-height:52vh; overflow-y:auto;}
.elite-section-title{font-size:10.5px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--ink-faint); margin:20px 0 10px;}
.elite-section-title:first-child{margin-top:0;}
.elite-bio{font-size:13.5px; color:var(--ink-dim); line-height:1.8;}
.elite-stats-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.elite-stat-box{background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:12px 10px; text-align:center;}
.elite-stat-box .v{font-family:var(--font-display); font-size:18px; color:var(--elite-c,var(--gold));}
.elite-stat-box .k{font-size:9px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-faint); margin-top:2px;}
.elite-fight-panel{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); position:relative;
  aspect-ratio:16/8; background:var(--surface-2);
  background:
    radial-gradient(ellipse 90% 100% at 20% 100%, color-mix(in srgb, var(--elite-c,var(--gold)) 22%, transparent), transparent),
    var(--surface-2);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
}
.elite-fight-panel img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.elite-fight-panel .glyph{font-size:34px; position:relative;}
.elite-fight-panel .caption{font-size:11.5px; color:var(--ink-faint); position:relative; font-weight:600;}
.elite-note{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--line); font-size:11px; color:var(--ink-faint);
  display:flex; align-items:center; gap:7px;
}
@media (max-width:560px){
  .elite-avatar{width:84px; height:84px; font-size:28px;}
  .elite-stats-grid{grid-template-columns:repeat(2,1fr);}
}

/* ---- elite card inline editor ---- */
.elite-edit-panel{
  display:none; margin:18px 28px 0; padding:18px; border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--surface-2);
}
.elite-edit-panel.open{display:block;}
.elite-edit-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px dashed var(--line);}
.elite-edit-row:last-of-type{border-bottom:0;}
.elite-edit-label{font-size:12.5px; font-weight:600; color:var(--ink-dim);}
.elite-color-input{width:44px; height:32px; border-radius:8px; border:1px solid var(--line); background:none; cursor:pointer; padding:2px;}
.elite-upload-btn{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:8px 14px;
  border-radius:8px; border:1px solid var(--line); cursor:pointer; transition:border-color .25s var(--ease);
}
.elite-upload-btn:hover{border-color:var(--gold);}
.elite-edit-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:14px;}

/* ---- device support strip ---- */
.device-strip{
  display:flex; align-items:center; justify-content:center; gap:clamp(20px,5vw,52px); flex-wrap:wrap;
  padding:36px 24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.device-item{display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:600; color:var(--ink-dim);}
.device-item .ic{font-size:20px;}

/* ============ COACHES ============ */
.coaches-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:22px;}
.staff-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  text-align:center; transition:transform .3s var(--ease), border-color .3s var(--ease); position:relative;
  display:flex; flex-direction:column;
}
.staff-card:hover{transform:translateY(-4px); border-color:var(--line-strong);}
.staff-banner{
  height:80px; position:relative;
  background:var(--staff-banner, linear-gradient(135deg, var(--staff-c,var(--gold)), #0A0A0A 75%));
  background:var(--staff-banner, linear-gradient(135deg, color-mix(in srgb, var(--staff-c,var(--gold)) 55%, #0A0A0A), #0A0A0A 75%));
  background-size:cover; background-position:center;
  flex:none;
}
.staff-share-btn{
  position:absolute; top:8px; right:8px; z-index:2; width:28px; height:28px; border-radius:8px;
  background:rgba(10,10,10,.5); border:1px solid rgba(255,255,255,.16); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .25s var(--ease);
}
[dir="rtl"] .staff-share-btn{ right:auto; left:8px; }
.staff-share-btn:hover{ background:rgba(10,10,10,.75); }
.staff-share-btn svg{ width:14px; height:14px; }
.staff-body{ padding:0 24px 32px; flex:1; display:flex; flex-direction:column; align-items:center; position:relative; z-index:1; }
.staff-avatar{
  width:76px; height:76px; border-radius:50%; margin:-38px auto 12px; overflow:hidden;
  background:linear-gradient(150deg,var(--surface-2),var(--surface)); border:3px solid var(--surface);
  box-shadow:0 0 0 1px var(--line-strong);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:24px; color:var(--staff-c,var(--gold));
}
.staff-avatar img{width:100%; height:100%; object-fit:cover;}
.staff-name{font-weight:700; font-size:15px;}
.staff-role{font-size:11px; color:var(--staff-c,var(--gold)); text-transform:uppercase; letter-spacing:1px; font-weight:700; margin:5px 0 12px;}
.staff-bio{font-size:12.5px; color:var(--ink-dim); line-height:1.7;}
.staff-creds{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:14px;}
.staff-cred{font-size:10px; background:var(--surface-2); border:1px solid var(--line); padding:4px 9px; border-radius:6px; color:var(--ink-faint);}

/* ============ NEWS & EVENTS ============ */
.news-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px;}
.news-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; transition:transform .3s var(--ease), border-color .3s var(--ease);}
.news-card:hover{transform:translateY(-4px); border-color:var(--line-strong);}
.news-media{
  aspect-ratio:16/10; background:
    radial-gradient(ellipse 100% 80% at 30% 0%, rgba(207,172,66,.14), transparent 60%), var(--surface-2);
  position:relative; display:flex; align-items:end; padding:16px;
}
.news-tag{font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:5px 11px; border-radius:999px;}
.news-tag.event{background:rgba(192,57,43,.16); color:#F0958A;}
.news-tag.news{background:rgba(207,172,66,.16); color:var(--gold-light);}
.news-body{padding:20px 22px 24px;}
.news-date{font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:1px; font-weight:700; margin-bottom:8px;}
.news-title{font-weight:700; font-size:16px; line-height:1.4; margin-bottom:10px;}
.news-excerpt{font-size:13px; color:var(--ink-dim); line-height:1.7;}

/* ============ SCHEDULE & LOCATIONS ============ */
.split-2{display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:start;}
@media (max-width:900px){ .split-2{grid-template-columns:1fr;} }
.schedule-table{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;}
.schedule-table th{background:var(--surface-2); text-align:left; padding:14px 18px; font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-faint); border-bottom:1px solid var(--line);}
[dir="rtl"] .schedule-table th{text-align:right;}
.schedule-day{padding:16px 18px; border-bottom:1px solid var(--line); vertical-align:top;}
.schedule-day-name{font-family:var(--font-display); font-size:16px; letter-spacing:.5px; color:var(--gold); white-space:nowrap;}
[dir="rtl"] .schedule-day-name{font-family:'Noto Sans Arabic',sans-serif; font-weight:800;}
.schedule-sessions{padding:16px 18px; border-bottom:1px solid var(--line);}
.schedule-session{display:flex; justify-content:space-between; gap:12px; font-size:12.5px; padding:6px 0; flex-wrap:wrap;}
.schedule-session + .schedule-session{border-top:1px dashed var(--line);}
.schedule-time{color:var(--ink-faint); font-variant-numeric:tabular-nums; white-space:nowrap;}
.schedule-class{font-weight:600;}
.schedule-level{font-size:10px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.5px;}
.schedule-table tbody tr:last-child .schedule-day,.schedule-table tbody tr:last-child .schedule-sessions{border-bottom:0;}

.locations-list{display:flex; flex-direction:column; gap:18px;}
.location-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:flex; gap:16px;}
.location-pin{
  width:44px; height:44px; border-radius:11px; background:rgba(207,172,66,.12); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:19px; flex:none;
}
.location-name{font-weight:700; font-size:15px; margin-bottom:4px;}
.location-addr{font-size:13px; color:var(--ink-dim); line-height:1.6;}
.location-meta{display:flex; gap:14px; margin-top:10px; flex-wrap:wrap;}
.location-meta span{font-size:11.5px; color:var(--ink-faint); display:flex; align-items:center; gap:5px;}

/* ============ CONTACT / SOCIALS ============ */
.socials-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px;}
.social-card{
  display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px; text-decoration:none; transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.social-card:hover{transform:translateY(-3px); border-color:var(--gold);}
.social-icon{
  width:42px; height:42px; border-radius:11px; background:var(--surface-2); display:flex; align-items:center;
  justify-content:center; font-size:18px; flex:none;
}
.social-info label{font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint); font-weight:700;}
.social-info p{font-size:13.5px; font-weight:600; margin-top:3px; word-break:break-word;}

/* ============ FOOTER ============ */
footer{padding:70px 24px 34px; text-align:center; border-top:1px solid var(--line); position:relative;}
.footer-logo{font-family:var(--font-display); font-size:26px; letter-spacing:2px;}
[dir="rtl"] .footer-logo{font-family:'Noto Sans Arabic',sans-serif; font-weight:800;}
.footer-tagline{font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-top:8px; font-weight:700;}
.footer-links{display:flex; gap:26px; justify-content:center; flex-wrap:wrap; margin:32px 0 26px;}
.footer-links a{font-size:12.5px; color:var(--ink-dim); text-decoration:none; font-weight:600; transition:color .25s var(--ease);}
.footer-links a:hover{color:var(--gold);}
.footer-copy{font-size:11.5px; color:var(--ink-faint);}

/* ============ MODAL ============ */
.modal-overlay{
  position:fixed; inset:0; z-index:2000; background:rgba(6,5,3,.78); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease);
}
.modal-overlay.open{opacity:1; visibility:visible;}
.modal{
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  width:100%; max-width:680px; max-height:88vh; overflow:hidden; display:flex; flex-direction:column;
  transform:translateY(24px) scale(.98); transition:transform .4s var(--ease-out); box-shadow:0 40px 100px -20px rgba(0,0,0,.6);
}
.modal-overlay.open .modal{transform:translateY(0) scale(1);}
.modal-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:26px 28px;
  border-bottom:1px solid var(--line); flex:none; background:
    radial-gradient(ellipse 80% 140% at 0% 0%, rgba(207,172,66,.10), transparent 60%);
}
.modal-header-info{display:flex; align-items:center; gap:16px;}
.modal-avatar{
  width:64px; height:64px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center;
  justify-content:center; font-family:var(--font-display); font-size:22px; color:var(--gold); overflow:hidden;
  border:2px solid var(--line-strong); flex:none;
}
.modal-avatar img{width:100%; height:100%; object-fit:cover;}
.modal-name{font-family:var(--font-display); font-size:23px; letter-spacing:.5px;}
[dir="rtl"] .modal-name{font-family:'Noto Sans Arabic',sans-serif; font-weight:800;}
.modal-id{font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:1.4px; color:var(--gold); font-variant-numeric:tabular-nums; margin-top:2px;}
.modal-close{
  width:36px; height:36px; border-radius:9px; border:1px solid var(--line); background:none; color:var(--ink);
  cursor:pointer; font-size:15px; flex:none; transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.modal-close:hover{border-color:var(--gold); transform:rotate(90deg);}

.modal-tabs{display:flex; gap:4px; padding:14px 24px 0; flex:none; overflow-x:auto;}
.modal-tab{
  padding:10px 16px; font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  background:none; border:none; color:var(--ink-faint); cursor:pointer; position:relative; white-space:nowrap;
}
.modal-tab::after{content:''; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; background:transparent; transition:background .25s var(--ease);}
.modal-tab.active{color:var(--ink);}
.modal-tab.active::after{background:var(--gold);}
.modal-body{padding:24px 28px 30px; overflow-y:auto;}
.modal-pane{display:none;}
.modal-pane.active{display:block;}
.modal-section-title{font-size:10.5px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--ink-faint); margin:22px 0 12px;}
.modal-section-title:first-child{margin-top:0;}
.modal-achievements{display:flex; flex-wrap:wrap; gap:7px;}
.modal-stats-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.modal-stat-box{background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:14px 16px;}
.modal-stat-label{font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:var(--ink-faint); font-weight:700;}
.modal-stat-val{font-family:var(--font-display); font-size:19px; margin-top:4px;}
.modal-bio{font-size:13.5px; color:var(--ink-dim); line-height:1.8;}

/* record tab */
.record-tally{display:flex; gap:12px; margin-bottom:20px;}
.record-pill{flex:1; text-align:center; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:14px 8px;}
.record-pill b{display:block; font-family:var(--font-display); font-size:24px;}
.record-pill.w b{color:#8FD3A6;} .record-pill.l b{color:#F0958A;} .record-pill.d b{color:var(--ink-dim);}
.record-pill span{font-size:9.5px; text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint);}
.fight-row{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:12.5px;}
.fight-row:last-child{border-bottom:0;}
.fight-result{
  width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:13px; flex:none;
}
.fight-result.w{background:rgba(90,170,120,.16); color:#8FD3A6;}
.fight-result.l{background:rgba(192,57,43,.16); color:#F0958A;}
.fight-result.d{background:var(--surface-2); color:var(--ink-dim);}
.fight-info{flex:1;}
.fight-opponent{font-weight:700;}
.fight-event{font-size:11px; color:var(--ink-faint); margin-top:1px;}
.fight-date{font-size:11px; color:var(--ink-faint); white-space:nowrap;}
.timeline-item{display:flex; gap:14px; padding:4px 0 20px; position:relative;}
.timeline-item::before{content:''; position:absolute; left:5px; top:16px; bottom:0; width:1px; background:var(--line);}
.timeline-item:last-child::before{display:none;}
.timeline-dot{width:11px; height:11px; border-radius:50%; background:var(--gold); flex:none; margin-top:3px; box-shadow:0 0 0 3px var(--surface-2);}
.timeline-year{font-family:var(--font-display); font-size:15px; color:var(--gold);}
.timeline-text{font-size:12.5px; color:var(--ink-dim); margin-top:2px; line-height:1.6;}

/* gallery tab */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.gallery-thumb{aspect-ratio:1; border-radius:9px; overflow:hidden; background:var(--surface-2); cursor:pointer; border:1px solid var(--line);}
.gallery-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .35s var(--ease);}
.gallery-thumb:hover img{transform:scale(1.08);}

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:2200; background:rgba(4,3,2,.94); display:flex; align-items:center;
  justify-content:center; opacity:0; visibility:hidden; transition:opacity .3s var(--ease); padding:40px;
}
.lightbox.open{opacity:1; visibility:visible;}
.lightbox img{max-width:100%; max-height:80vh; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.6);}
.lightbox-close,.lightbox-prev,.lightbox-next{
  position:absolute; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); color:#fff;
  width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center;
  transition:background .25s var(--ease);
}
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,.16);}
.lightbox-close{top:24px; right:24px;}
.lightbox-prev{left:24px; top:50%; transform:translateY(-50%);}
.lightbox-next{right:24px; top:50%; transform:translateY(-50%);}

@media (max-width:560px){
  .modal{max-height:92vh;}
  .modal-stats-grid{grid-template-columns:1fr 1fr;}
  .gallery-grid{grid-template-columns:repeat(3,1fr);}
  .lightbox{padding:16px;}
  .lightbox-prev,.lightbox-next{width:36px; height:36px;}
}

/* ---- inline SVG icons (replaced emojis) ---- */
.icon{width:1em; height:1em; vertical-align:-.15em; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round;}
.about-icon .icon,.level-icon .icon{width:1.4em; height:1.4em; stroke:var(--gold);}
.device-item .icon{width:1.1em; height:1.1em; stroke:var(--gold);}

/* ---- SPA views (single-page app style navigation, clean URLs via pushState) ---- */
.view{display:none;}
.view.active{display:block; animation:viewFadeIn .35s var(--ease-out);}
@keyframes viewFadeIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){ .view.active{animation:none;} }

/* ---- level chooser: card style (matches squad cards) ---- */
.level-picker{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; margin-bottom:28px;}
.level-card-btn{
  position:relative; text-align:left; overflow:hidden; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px;
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
[dir="rtl"] .level-card-btn{text-align:right;}
.level-card-btn:hover{transform:translateY(-4px); border-color:var(--line-strong);}
.level-card-btn.active{border-color:var(--pill-c,var(--gold)); box-shadow:0 0 0 1px var(--pill-c,var(--gold)) inset;}
.level-card-btn .badge-pill{
  display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:1.5px; padding:5px 12px;
  border-radius:999px; margin-bottom:14px; background:color-mix(in srgb, var(--pill-c,var(--gold)) 16%, transparent);
  color:var(--pill-c,var(--gold)); border:1px solid color-mix(in srgb, var(--pill-c,var(--gold)) 32%, transparent);
}
.level-card-btn .lvl-count{font-family:var(--font-display); font-size:30px; color:var(--pill-c,var(--gold)); line-height:1;}
.level-card-btn .lvl-count-label{font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint); margin-top:4px;}
.level-card-btn .lvl-watermark{
  position:absolute; right:-2px; bottom:-20px; font-family:var(--font-display); font-size:90px;
  color:var(--line); line-height:1; user-select:none; pointer-events:none; z-index:0;
}
[dir="rtl"] .level-card-btn .lvl-watermark{right:auto; left:-2px;}
.level-card-btn > *{position:relative; z-index:1;}

/* ---- global top loading bar (visible the instant the page opens) ---- */
.load-bar{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:3000;
  background:linear-gradient(90deg, var(--gold-dim), var(--gold-light));
  box-shadow:0 0 10px var(--gold-glow);
  transition:width .4s var(--ease), opacity .3s var(--ease);
}
.load-bar.indeterminate{ animation:loadBarPulse 1.1s ease-in-out infinite; width:40%; }
.load-bar.done{ width:100%; opacity:0; }
@keyframes loadBarPulse{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(250%); }
}

/* ---- grid loading skeleton (fighters / coaches / news / rankings) ---- */
.grid-loading{
  grid-column:1/-1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:70px 24px; color:var(--ink-faint); gap:16px;
}
.grid-loading .spinner{
  width:34px; height:34px; border-radius:50%; border:3px solid var(--line-strong);
  border-top-color:var(--gold); animation:spin .8s linear infinite;
}
.grid-loading p{font-size:13px; font-weight:600;}
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .load-bar.indeterminate{ animation:none; width:60%; }
  .grid-loading .spinner{ animation:none; border-top-color:var(--line-strong); }
}

/* ---- load more (paginated fighters grid) ---- */
.load-more-wrap{display:flex; justify-content:center; margin-top:32px;}

/* ============================================================
   PROFILE EFFECTS � Discord-style animated frames around the
   Elite Card avatar. Pure CSS, no canvas/JS particle engines.
   ============================================================ */
.profile-effect{ position:relative; overflow:visible !important; }
.profile-effect img{ position:relative; z-index:2; border-radius:50%; }
.profile-effect .pe-layer{ position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:1; overflow:visible; }
.profile-effect .pe-layer-2{ opacity:.45; z-index:0; }
.profile-effect .pe-layer-2 span{ animation-duration:inherit; animation-delay:inherit; }

/* ---- THUNDER ---- */
.pe-thunder{ --pe-c:#8FD3FF; --pe-c2:#6CB8FF; }
.pe-thunder .pe-layer::before{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  box-shadow:0 0 0 3px var(--pe-color,var(--pe-c)), 0 0 32px 10px var(--pe-color,var(--pe-c2)), 0 0 72px 20px var(--pe-color,rgba(143,211,255,.3));
  animation:peThunderFlash 3s ease-in-out infinite;
}
.pe-thunder .pe-layer::after{
  content:''; position:absolute; inset:-10px; border-radius:50%;
  box-shadow:0 0 0 4px var(--pe-color,var(--pe-c)), 0 0 48px 12px var(--pe-color,var(--pe-c2));
  animation:peThunderFlash 3s ease-in-out infinite .15s; opacity:.5;
}
.pe-thunder .pe-layer span{
  position:absolute; width:3px; height:14px; border-radius:2px;
  background:linear-gradient(var(--pe-color,var(--pe-c)), transparent);
  animation:peThunderBolt 3s ease-in-out infinite;
}
.pe-thunder .pe-layer span:nth-child(1){ top:-8px; left:15%; transform:rotate(25deg); animation-delay:0s; height:16px; }
.pe-thunder .pe-layer span:nth-child(2){ top:80%; left:8%; transform:rotate(-40deg); animation-delay:.375s; height:12px; }
.pe-thunder .pe-layer span:nth-child(3){ top:5%; left:82%; transform:rotate(15deg); animation-delay:.75s; height:14px; }
.pe-thunder .pe-layer span:nth-child(4){ top:85%; left:88%; transform:rotate(-20deg); animation-delay:1.125s; height:10px; }
.pe-thunder .pe-layer span:nth-child(5){ top:40%; left:-4%; transform:rotate(55deg); animation-delay:1.5s; height:11px; }
.pe-thunder .pe-layer span:nth-child(6){ top:45%; right:-4%; transform:rotate(-55deg); animation-delay:1.875s; height:13px; }
.pe-thunder .pe-layer span:nth-child(7){ top:15%; left:45%; transform:rotate(-10deg); animation-delay:2.25s; height:12px; }
.pe-thunder .pe-layer span:nth-child(8){ top:70%; left:50%; transform:rotate(30deg); animation-delay:2.625s; height:10px; }
@keyframes peThunderFlash{ 0%,85%,100%{ opacity:0; transform:scale(.96); } 88%,95%{ opacity:1; transform:scale(1.04); } 91%{ opacity:.2; } }
@keyframes peThunderBolt{ 0%,100%{ opacity:0; transform:scaleY(.3); } 8%{ opacity:1; transform:scaleY(1); } 14%{ opacity:0; } 20%{ opacity:.8; transform:scaleY(.8); } 26%{ opacity:0; } }

/* ---- SAKURA ---- */
.pe-sakura .pe-layer::before{
  content:''; position:absolute; inset:-5px; border-radius:50%;
  border:2px solid var(--pe-color,rgba(255,183,206,.25));
  box-shadow:0 0 16px 3px var(--pe-color,rgba(255,183,206,.18)), inset 0 0 12px 2px var(--pe-color,rgba(255,183,206,.08));
  animation:peSakuraRing 3s ease-in-out infinite;
}
.pe-sakura .pe-layer span{
  position:absolute; top:-20px; width:12px; height:12px; border-radius:60% 0 60% 0;
  background:var(--pe-color,#FFB7CE); opacity:.85;
  box-shadow:0 0 10px 3px var(--pe-color,rgba(255,183,206,.6));
  animation:peSakuraFall 4.5s linear infinite;
}
.pe-sakura .pe-layer span:nth-child(1){ left:4%; animation-delay:0s; width:13px; height:13px; }
.pe-sakura .pe-layer span:nth-child(2){ left:18%; animation-delay:.64s; width:9px; height:9px; opacity:.6; }
.pe-sakura .pe-layer span:nth-child(3){ left:35%; animation-delay:1.28s; width:11px; height:11px; }
.pe-sakura .pe-layer span:nth-child(4){ left:52%; animation-delay:1.92s; width:8px; height:8px; opacity:.5; }
.pe-sakura .pe-layer span:nth-child(5){ left:68%; animation-delay:2.56s; width:10px; height:10px; }
.pe-sakura .pe-layer span:nth-child(6){ left:82%; animation-delay:3.2s; width:7px; height:7px; opacity:.65; }
.pe-sakura .pe-layer span:nth-child(7){ left:92%; animation-delay:3.84s; width:9px; height:9px; }
@keyframes peSakuraFall{
  0%{ transform:translateY(-14px) rotate(0deg) scale(.7); opacity:0; }
  8%{ opacity:.9; transform:scale(1); }
  50%{ transform:translateY(70px) rotate(160deg) scale(1.05) translateX(12px); }
  92%{ opacity:.8; }
  100%{ transform:translateY(160px) rotate(320deg) scale(.8) translateX(-8px); opacity:0; }
}
@keyframes peSakuraRing{ 0%,100%{ opacity:.3; transform:scale(1); } 50%{ opacity:.6; transform:scale(1.03); } }

/* ---- FIRE ---- */
.pe-fire{ --pe-c:#FF7A30; --pe-c2:#FF3D00; --pe-c3:#FFAA00; }
.pe-fire .pe-layer::before{
  content:''; position:absolute; inset:-8px; border-radius:50%;
  box-shadow:0 0 0 3px var(--pe-color,var(--pe-c)), 0 0 28px 8px var(--pe-color,var(--pe-c2)), 0 0 60px 16px var(--pe-color,rgba(255,122,48,.25));
  animation:peFireFlicker 1.5s ease-in-out infinite;
}
.pe-fire .pe-layer::after{
  content:''; position:absolute; inset:-14px; border-radius:50%;
  background:radial-gradient(circle, var(--pe-color,rgba(255,122,48,.2)), transparent 65%);
  animation:peFireGlow 3s ease-in-out infinite alternate;
}
.pe-fire .pe-layer span{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:var(--pe-color,var(--pe-c)); opacity:0;
  box-shadow:0 0 6px 2px var(--pe-color,var(--pe-c3)), 0 0 12px 4px var(--pe-color,rgba(255,170,0,.4));
  animation:peEmberRise 2.25s ease-out infinite;
}
.pe-fire .pe-layer span:nth-child(1){ bottom:10%; left:12%; animation-delay:0s; width:5px; height:5px; }
.pe-fire .pe-layer span:nth-child(2){ bottom:8%; left:30%; animation-delay:.28s; width:3px; height:3px; }
.pe-fire .pe-layer span:nth-child(3){ bottom:12%; left:50%; animation-delay:.56s; width:4px; height:4px; }
.pe-fire .pe-layer span:nth-child(4){ bottom:6%; left:70%; animation-delay:.84s; width:3px; height:3px; }
.pe-fire .pe-layer span:nth-child(5){ bottom:10%; left:88%; animation-delay:1.12s; width:5px; height:5px; }
.pe-fire .pe-layer span:nth-child(6){ bottom:15%; left:42%; animation-delay:1.4s; width:3px; height:3px; }
.pe-fire .pe-layer span:nth-child(7){ bottom:5%; left:60%; animation-delay:1.68s; width:4px; height:4px; }
.pe-fire .pe-layer span:nth-child(8){ bottom:12%; left:20%; animation-delay:1.96s; width:3px; height:3px; }
@keyframes peFireFlicker{ 0%,100%{ opacity:.7; transform:scale(1); } 30%{ opacity:1; transform:scale(1.06); } 60%{ opacity:.85; transform:scale(.98); } }
@keyframes peFireGlow{ 0%{ opacity:.3; transform:scale(1); } 100%{ opacity:.7; transform:scale(1.12); } }
@keyframes peEmberRise{
  0%{ opacity:0; transform:translateY(0) scale(.5); }
  15%{ opacity:1; transform:translateY(-10px) scale(1); }
  80%{ opacity:.6; }
  100%{ opacity:0; transform:translateY(-80px) translateX(8px) scale(.2); }
}

/* ---- ICE ---- */
.pe-ice{ --pe-c:#BEEBFF; --pe-c2:#7DC8E8; }
.pe-ice .pe-layer::before{
  content:''; position:absolute; inset:-3px; border-radius:50%; border:4px solid var(--pe-color,#BEEBFF);
  box-shadow:0 0 24px 6px var(--pe-color,rgba(190,235,255,.5)), inset 0 0 20px 4px var(--pe-color,rgba(190,235,255,.2));
  animation:peIcePulse 3s ease-in-out infinite;
}
.pe-ice .pe-layer::after{
  content:''; position:absolute; inset:-8px; border-radius:50%;
  border:2px solid var(--pe-color,rgba(190,235,255,.35));
  animation:peIceRing 3s ease-in-out infinite;
}
.pe-ice .pe-layer span{
  position:absolute; width:8px; height:8px; opacity:0;
  background:var(--pe-color,var(--pe-c));
  clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  box-shadow:0 0 8px 2px var(--pe-color,rgba(190,235,255,.6));
  animation:peCrystalFloat 3s ease-in-out infinite;
}
.pe-ice .pe-layer span:nth-child(1){ top:8%; left:5%; animation-delay:0s; width:10px; height:10px; transform:rotate(15deg); }
.pe-ice .pe-layer span:nth-child(2){ top:5%; left:75%; animation-delay:.375s; width:7px; height:7px; transform:rotate(-30deg); }
.pe-ice .pe-layer span:nth-child(3){ top:80%; left:8%; animation-delay:.75s; width:9px; height:9px; transform:rotate(45deg); }
.pe-ice .pe-layer span:nth-child(4){ top:78%; left:82%; animation-delay:1.125s; width:8px; height:8px; transform:rotate(-15deg); }
.pe-ice .pe-layer span:nth-child(5){ top:38%; left:-3%; animation-delay:1.5s; width:6px; height:6px; transform:rotate(60deg); }
.pe-ice .pe-layer span:nth-child(6){ top:42%; right:-3%; animation-delay:1.875s; width:7px; height:7px; transform:rotate(-45deg); }
.pe-ice .pe-layer span:nth-child(7){ top:18%; left:92%; animation-delay:2.25s; width:6px; height:6px; transform:rotate(20deg); }
.pe-ice .pe-layer span:nth-child(8){ top:65%; left:92%; animation-delay:2.625s; width:5px; height:5px; transform:rotate(-60deg); }
@keyframes peIcePulse{ 0%,100%{ opacity:.45; transform:scale(1); } 50%{ opacity:1; transform:scale(1.05); } }
@keyframes peIceRing{ 0%,100%{ opacity:0; transform:scale(.92); } 50%{ opacity:.7; transform:scale(1.08); } }
@keyframes peCrystalFloat{
  0%,100%{ opacity:0; transform:rotate(var(--r,0deg)) scale(.4); }
  30%{ opacity:.9; transform:rotate(var(--r,0deg)) scale(1.1); }
  70%{ opacity:.7; transform:rotate(calc(var(--r,0deg) + 20deg)) scale(.9); }
}

/* ---- GOLD DUST ---- */
.pe-golddust{ --pe-c:#FFE07A; --pe-c2:#FFD24C; }
.pe-golddust .pe-layer::before{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  box-shadow:0 0 0 2px var(--pe-color,var(--pe-c)), 0 0 20px 6px var(--pe-color,rgba(255,224,122,.25));
  animation:peGolddustRing 3s ease-in-out infinite;
}
.pe-golddust .pe-layer span{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:var(--pe-color,#FFE07A); opacity:.9;
  box-shadow:0 0 10px 3px var(--pe-color,#FFD24C), 0 0 22px 6px var(--pe-color,rgba(255,210,76,.35));
  animation:peSparkle 3s ease-in-out infinite;
}
.pe-golddust .pe-layer span:nth-child(1){ top:2%; left:10%; animation-delay:0s; width:6px; height:6px; }
.pe-golddust .pe-layer span:nth-child(2){ top:68%; left:2%; animation-delay:.43s; width:4px; height:4px; }
.pe-golddust .pe-layer span:nth-child(3){ top:8%; left:88%; animation-delay:.86s; width:5px; height:5px; }
.pe-golddust .pe-layer span:nth-child(4){ top:82%; left:90%; animation-delay:1.29s; width:4px; height:4px; }
.pe-golddust .pe-layer span:nth-child(5){ top:45%; left:98%; animation-delay:1.71s; width:6px; height:6px; }
.pe-golddust .pe-layer span:nth-child(6){ top:92%; left:48%; animation-delay:2.14s; width:3px; height:3px; }
.pe-golddust .pe-layer span:nth-child(7){ top:10%; left:48%; animation-delay:2.57s; width:4px; height:4px; }
@keyframes peSparkle{ 0%,100%{ opacity:0; transform:scale(.3) translateY(0); } 20%{ opacity:1; transform:scale(1.3) translateY(-4px); } 70%{ opacity:.7; transform:scale(.9) translateY(2px); } }
@keyframes peGolddustRing{ 0%,100%{ opacity:.3; transform:scale(1); } 50%{ opacity:.6; transform:scale(1.03); } }

/* ---- SMOKE ---- */
.pe-smoke{ --pe-c:rgba(160,160,170,.35); }
.pe-smoke .pe-layer::before{
  content:''; position:absolute; inset:-16px; border-radius:50%;
  background:radial-gradient(circle, var(--pe-color,rgba(160,160,170,.4)), transparent 65%);
  animation:peSmokeDrift 3s ease-in-out infinite;
}
.pe-smoke .pe-layer::after{
  content:''; position:absolute; inset:-24px; border-radius:50%;
  background:radial-gradient(circle, var(--pe-color,rgba(160,160,170,.2)), transparent 60%);
  animation:peSmokeDrift 3s ease-in-out infinite 1.5s;
}
.pe-smoke .pe-layer span{
  position:absolute; border-radius:50%; opacity:0;
  background:var(--pe-color,rgba(160,160,170,.25));
  filter:blur(3px);
  animation:peWispDrift 4.5s ease-in-out infinite;
}
.pe-smoke .pe-layer span:nth-child(1){ width:30px; height:14px; top:20%; left:0%; animation-delay:0s; }
.pe-smoke .pe-layer span:nth-child(2){ width:22px; height:10px; top:60%; left:5%; animation-delay:.64s; }
.pe-smoke .pe-layer span:nth-child(3){ width:26px; height:12px; top:10%; right:2%; animation-delay:1.28s; }
.pe-smoke .pe-layer span:nth-child(4){ width:18px; height:8px; top:70%; right:0%; animation-delay:1.92s; }
.pe-smoke .pe-layer span:nth-child(5){ width:34px; height:14px; top:40%; left:-4%; animation-delay:2.56s; }
.pe-smoke .pe-layer span:nth-child(6){ width:20px; height:9px; top:85%; left:20%; animation-delay:3.2s; }
.pe-smoke .pe-layer span:nth-child(7){ width:24px; height:10px; top:5%; left:60%; animation-delay:3.84s; }
@keyframes peSmokeDrift{ 0%,100%{ transform:scale(1) translateY(0) rotate(0deg); opacity:.35; } 50%{ transform:scale(1.25) translateY(-8px) rotate(8deg); opacity:.7; } }
@keyframes peWispDrift{
  0%{ opacity:0; transform:translateX(0) translateY(0) scale(.5); }
  20%{ opacity:.5; }
  50%{ opacity:.6; transform:translateX(20px) translateY(-15px) scale(1.1); }
  80%{ opacity:.3; }
  100%{ opacity:0; transform:translateX(40px) translateY(-30px) scale(.3); }
}

/* ---- STARS ---- */
.pe-stars .pe-layer span{
  position:absolute; width:4px; height:4px; background:var(--pe-color,#fff); border-radius:50%;
  box-shadow:0 0 8px 3px var(--pe-color,#fff), 0 0 18px 6px var(--pe-color,rgba(255,255,255,.35));
  animation:peTwinkle 3s ease-in-out infinite;
}
.pe-stars .pe-layer span:nth-child(1){ top:0%; left:18%; animation-delay:0s; width:5px; height:5px; }
.pe-stars .pe-layer span:nth-child(2){ top:14%; left:94%; animation-delay:.33s; width:4px; height:4px; }
.pe-stars .pe-layer span:nth-child(3){ top:88%; left:8%; animation-delay:.66s; width:4px; height:4px; }
.pe-stars .pe-layer span:nth-child(4){ top:94%; left:80%; animation-delay:1s; width:5px; height:5px; }
.pe-stars .pe-layer span:nth-child(5){ top:50%; left:2%; animation-delay:1.33s; width:4px; height:4px; }
.pe-stars .pe-layer span:nth-child(6){ top:30%; left:96%; animation-delay:1.66s; width:3px; height:3px; }
.pe-stars .pe-layer span:nth-child(7){ top:70%; left:96%; animation-delay:2s; width:3px; height:3px; }
.pe-stars .pe-layer span:nth-child(8){ top:6%; left:52%; animation-delay:2.33s; width:4px; height:4px; }
.pe-stars .pe-layer span:nth-child(9){ top:92%; left:45%; animation-delay:2.66s; width:4px; height:4px; }
@keyframes peTwinkle{ 0%,100%{ opacity:.1; transform:scale(.5); } 50%{ opacity:1; transform:scale(1.6); } }

/* ---- RAIN ---- */
.pe-rain .pe-layer span{
  position:absolute; top:-20px; width:2px; height:20px;
  background:linear-gradient(var(--pe-color,#8FCBFF), transparent);
  animation:peRainFall 1.5s linear infinite;
}
.pe-rain .pe-layer span:nth-child(1){ left:8%; animation-delay:0s; height:22px; width:2px; }
.pe-rain .pe-layer span:nth-child(2){ left:26%; animation-delay:.19s; height:16px; width:1.5px; }
.pe-rain .pe-layer span:nth-child(3){ left:48%; animation-delay:.38s; height:18px; width:2px; }
.pe-rain .pe-layer span:nth-child(4){ left:68%; animation-delay:.56s; height:14px; width:1.5px; }
.pe-rain .pe-layer span:nth-child(5){ left:88%; animation-delay:.75s; height:20px; width:2px; }
.pe-rain .pe-layer span:nth-child(6){ left:38%; animation-delay:.09s; height:18px; width:1.5px; }
.pe-rain .pe-layer span:nth-child(7){ left:78%; animation-delay:.47s; height:16px; width:2px; }
.pe-rain .pe-layer span:nth-child(8){ left:16%; animation-delay:.66s; height:20px; width:1.5px; }
@keyframes peRainFall{ 0%{ transform:translateY(0); opacity:0; } 12%{ opacity:1; } 100%{ transform:translateY(160px); opacity:0; } }

/* ---- ELECTRIC ---- */
.pe-electric{ --pe-c:#9FE7FF; }
.pe-electric .pe-layer::before{
  content:''; position:absolute; inset:-6px; border-radius:50%; padding:5px;
  background:conic-gradient(from 0deg, transparent, var(--pe-color,#9FE7FF), transparent 25%, var(--pe-color,rgba(159,231,255,.5)), transparent 50%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:peSpin 3s linear infinite;
}
.pe-electric .pe-layer::after{
  content:''; position:absolute; inset:-12px; border-radius:50%;
  box-shadow:0 0 30px 8px var(--pe-color,rgba(159,231,255,.3));
  animation:peSpin 3s linear infinite reverse;
}
.pe-electric .pe-layer span{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:var(--pe-color,var(--pe-c));
  box-shadow:0 0 6px 2px var(--pe-color,var(--pe-c)), 0 0 14px 4px var(--pe-color,rgba(159,231,255,.4));
  animation:peSparkOrbit 3s linear infinite;
}
.pe-electric .pe-layer span:nth-child(1){ top:0%; left:50%; animation-delay:0s; }
.pe-electric .pe-layer span:nth-child(2){ top:14%; left:93%; animation-delay:.5s; width:3px; height:3px; }
.pe-electric .pe-layer span:nth-child(3){ top:50%; left:100%; animation-delay:1s; }
.pe-electric .pe-layer span:nth-child(4){ top:86%; left:93%; animation-delay:1.5s; width:3px; height:3px; }
.pe-electric .pe-layer span:nth-child(5){ top:100%; left:50%; animation-delay:2s; }
.pe-electric .pe-layer span:nth-child(6){ top:50%; left:0%; animation-delay:2.5s; width:3px; height:3px; }
@keyframes peSpin{ to{ transform:rotate(360deg); } }
@keyframes peSparkOrbit{
  0%{ opacity:.3; transform:scale(.5); }
  25%{ opacity:1; transform:scale(1.4); }
  50%{ opacity:.3; transform:scale(.5); }
  75%{ opacity:1; transform:scale(1.2); }
  100%{ opacity:.3; transform:scale(.5); }
}

/* ---- COUNTRY FLAG ---- */
.pe-flag .pe-layer{
  position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:1; overflow:visible;
}
.pe-flag .pe-layer::before{
  content:''; position:absolute; inset:-7px; border-radius:50%; padding:7px;
  background:var(--pe-flag-gradient, conic-gradient(from 0deg, #CE1126 0deg 120deg, #fff 120deg 240deg, #000 240deg 360deg));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:peFlagPulse 3s ease-in-out infinite;
}
.pe-flag .pe-layer::after{
  content:''; position:absolute; inset:-14px; border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.05), 0 0 12px 3px var(--pe-flag-glow, rgba(207,172,66,.25)), 0 0 28px 7px var(--pe-flag-glow, rgba(207,172,66,.18)), inset 0 0 10px 2px var(--pe-flag-glow, rgba(207,172,66,.1));
  animation:peFlagGlow 3s ease-in-out infinite alternate;
}
.pe-flag .pe-flag-badge{
  position:absolute; bottom:-6px; right:-6px; z-index:3; font-size:26px; line-height:1;
  background:var(--surface); border-radius:50%; padding:4px;
  box-shadow:0 2px 12px rgba(0,0,0,.6), 0 0 0 3px var(--surface), 0 0 0 5px rgba(255,255,255,.08);
  font-variant-emoji:emoji;
  animation:peFlagBadgePop 3s ease-in-out infinite;
}
[dir="rtl"] .pe-flag .pe-flag-badge{ right:auto; left:-6px; }
@keyframes peFlagPulse{ 0%,100%{ opacity:.8; transform:scale(1); } 50%{ opacity:1; transform:scale(1.02); } }
@keyframes peFlagGlow{ 0%{ opacity:.35; transform:scale(1); } 100%{ opacity:.75; transform:scale(1.04); } }
@keyframes peFlagBadgePop{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.1); } }

@media (prefers-reduced-motion: reduce){
  .profile-effect .pe-layer *, .profile-effect .pe-layer::before, .profile-effect .pe-layer::after{ animation:none !important; }
}

/* ============================================================
   CARD EFFECTS � Discord Nitro�level full-card transparency overlays.
   Three-layer depth: foreground particles ? midground haze ? deep background.
   ============================================================ */
.elite-modal.card-effect{ position:relative; }
.card-effect-layer{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; border-radius:inherit; }
.card-effect-layer-2{ opacity:.3; z-index:-1; filter:blur(1px); }
.card-effect-layer-2 span{ animation-delay:inherit !important; }
.card-effect-layer-3{ opacity:.15; z-index:-2; filter:blur(2.5px); pointer-events:none; position:absolute; inset:0; overflow:hidden; border-radius:inherit; }
.card-effect-layer-3 span{ animation-delay:inherit !important; }
.elite-modal.card-effect .elite-banner,
.elite-modal.card-effect .elite-id-row,
.elite-modal.card-effect .elite-name-block,
.elite-modal.card-effect .elite-body{ position:relative; z-index:1; }

/* ============================================================
   FIRE � Embers + smoke wisps + heat shimmer + color gradation
   ============================================================ */
/* ============================================================
   FIRE � Embers + smoke wisps + heat shimmer + color gradation
   ============================================================ */
/* ============================================================
   FIRE — Warm ember glow + rising sparks + smoke wisps
   ============================================================ */
.ce-fire .card-effect-layer{
  background:
    radial-gradient(ellipse 140% 120% at 50% 115%, var(--ce-color,rgba(255,122,48,.14)), transparent 55%),
    radial-gradient(ellipse 100% 80% at 50% 90%, var(--ce-color,rgba(255,61,0,.08)), transparent 45%);
  animation:ceFireFlicker 2.5s cubic-bezier(.4,0,.6,1) infinite;
}
.ce-fire .card-effect-layer::before{
  content:''; position:absolute; bottom:0; left:0; right:0; height:80%;
  background:linear-gradient(0deg, var(--ce-color,rgba(255,61,0,.10)), transparent 75%);
}
.ce-fire .card-effect-layer::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 -30px 60px -10px var(--ce-color,rgba(255,170,0,.08));
}
.ce-fire .card-effect-layer span{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,200,.9) 0%, var(--ce-color,rgba(255,170,0,.75)) 35%, var(--ce-color,rgba(255,122,48,.3)) 65%, transparent 85%);
  box-shadow:0 0 6px 2px var(--ce-color,rgba(255,170,0,.4)), 0 0 14px 4px var(--ce-color,rgba(255,122,48,.18));
  animation:ceEmberRise 2.5s cubic-bezier(.4,0,.2,1) infinite;
}
.ce-fire .card-effect-layer span:nth-child(1){ bottom:5%; left:13%; animation-delay:0s; width:5px; height:5px; }
.ce-fire .card-effect-layer span:nth-child(2){ bottom:7%; left:31%; animation-delay:.28s; width:3px; height:3px; }
.ce-fire .card-effect-layer span:nth-child(3){ bottom:3%; left:50%; animation-delay:.56s; width:4px; height:4px; }
.ce-fire .card-effect-layer span:nth-child(4){ bottom:9%; left:70%; animation-delay:.84s; width:3px; height:3px; }
.ce-fire .card-effect-layer span:nth-child(5){ bottom:5%; left:87%; animation-delay:1.12s; width:5px; height:5px; }
.ce-fire .card-effect-layer span:nth-child(6){ bottom:11%; left:42%; animation-delay:1.4s; width:3px; height:3px; }
.ce-fire .card-effect-layer span:nth-child(7){ bottom:4%; left:22%; animation-delay:1.68s; width:4px; height:4px; }
.ce-fire .card-effect-layer span:nth-child(8){ bottom:8%; left:60%; animation-delay:1.96s; width:3px; height:3px; }
.ce-fire .card-effect-layer span:nth-child(9){ bottom:2%; left:78%; animation-delay:.14s; width:4px; height:4px; }
.ce-fire .card-effect-layer span:nth-child(10){ bottom:6%; left:36%; animation-delay:.42s; width:3px; height:3px; }
.ce-fire .card-effect-layer span:nth-child(11){ bottom:15%; left:10%; animation-delay:1.3s; width:22px; height:8px; border-radius:50%; background:rgba(120,120,120,.08); filter:blur(4px); animation:ceSmokeWisp 4s ease-in-out infinite; }
.ce-fire .card-effect-layer span:nth-child(12){ bottom:20%; left:50%; animation-delay:1.8s; width:26px; height:7px; border-radius:50%; background:rgba(120,120,120,.07); filter:blur(5px); animation:ceSmokeWisp 4.5s ease-in-out infinite .4s; }
.ce-fire .card-effect-layer span:nth-child(13){ bottom:18%; left:75%; animation-delay:2.2s; width:20px; height:6px; border-radius:50%; background:rgba(120,120,120,.06); filter:blur(4px); animation:ceSmokeWisp 5s ease-in-out infinite .8s; }
.ce-fire .card-effect-layer span:nth-child(14){ bottom:12%; left:35%; animation-delay:.6s; width:18px; height:6px; border-radius:50%; background:rgba(120,120,120,.06); filter:blur(3px); animation:ceSmokeWisp 3.8s ease-in-out infinite 1.2s; }
@keyframes ceFireFlicker{
  0%,100%{ opacity:.7; transform:scale(1); }
  20%{ opacity:1; transform:scale(1.01) translateY(-.8px); }
  40%{ opacity:.82; transform:scale(.996); }
  60%{ opacity:.95; transform:scale(1.006) translateY(.4px); }
  80%{ opacity:.88; transform:scale(.998); }
}
@keyframes ceEmberRise{
  0%{ opacity:0; transform:translateY(0) scale(.3); filter:blur(1px); }
  10%{ opacity:1; transform:translateY(-8px) scale(1); filter:blur(0); }
  50%{ opacity:.85; filter:hue-rotate(-10deg); }
  100%{ opacity:0; transform:translateY(-90px) translateX(12px) scale(.15); filter:blur(2px) hue-rotate(-15deg); }
}
@keyframes ceSmokeWisp{
  0%,100%{ opacity:0; transform:translateY(0) translateX(0) scale(.8); }
  25%{ opacity:.5; }
  50%{ opacity:.35; transform:translateY(-20px) translateX(8px) scale(1.1); }
  75%{ opacity:.15; }
}

/* ============================================================
   THUNDER — Lightning bolts + cloud particles + flash
   ============================================================ */
.ce-thunder .card-effect-layer{
  background:
    radial-gradient(ellipse 120% 120% at 50% 0%, var(--ce-color,rgba(143,211,255,.10)), transparent 50%),
    radial-gradient(ellipse 95% 65% at 50% 6%, var(--ce-color,rgba(108,184,255,.05)), transparent 38%);
}
.ce-thunder .card-effect-layer::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 100px 20px var(--ce-color,rgba(143,211,255,.05));
  animation:ceThunderFlash 3s cubic-bezier(.4,0,.2,1) infinite;
}
.ce-thunder .card-effect-layer::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(180deg, var(--ce-color,rgba(143,211,255,.03)), transparent 30%);
}
.ce-thunder .card-effect-layer span{
  position:absolute; border-radius:2px;
  background:linear-gradient(180deg, rgba(255,255,255,.9), var(--ce-color,rgba(143,211,255,.7)), var(--ce-color,rgba(143,211,255,.15)), transparent);
  box-shadow:0 0 6px 2px var(--ce-color,rgba(143,211,255,.3));
  animation:ceBoltFlash 3s cubic-bezier(.4,0,.2,1) infinite;
}
.ce-thunder .card-effect-layer span:nth-child(1){ top:0; left:10%; transform:rotate(15deg); animation-delay:0s; height:26px; width:2px; }
.ce-thunder .card-effect-layer span:nth-child(2){ top:0; left:27%; transform:rotate(-8deg); animation-delay:.375s; height:30px; width:2.5px; }
.ce-thunder .card-effect-layer span:nth-child(3){ top:0; left:48%; transform:rotate(5deg); animation-delay:.75s; height:22px; width:2px; }
.ce-thunder .card-effect-layer span:nth-child(4){ top:0; left:67%; transform:rotate(-12deg); animation-delay:1.125s; height:26px; width:2px; }
.ce-thunder .card-effect-layer span:nth-child(5){ top:0; left:85%; transform:rotate(10deg); animation-delay:1.5s; height:28px; width:2.5px; }
.ce-thunder .card-effect-layer span:nth-child(6){ top:0; left:5%; transform:rotate(20deg); animation-delay:.2s; height:18px; width:1.5px; }
.ce-thunder .card-effect-layer span:nth-child(7){ top:0; left:38%; transform:rotate(-5deg); animation-delay:.95s; height:20px; width:1.5px; }
.ce-thunder .card-effect-layer span:nth-child(8){ top:0; left:58%; transform:rotate(8deg); animation-delay:1.3s; height:16px; width:1.5px; }
.ce-thunder .card-effect-layer span:nth-child(9){ top:0; left:78%; transform:rotate(-15deg); animation-delay:1.65s; height:22px; width:1.5px; }
.ce-thunder .card-effect-layer span:nth-child(10){ top:0; left:92%; transform:rotate(3deg); animation-delay:.5s; height:18px; width:1.5px; }
.ce-thunder .card-effect-layer span:nth-child(11){ top:2%; left:8%; width:50px; height:18px; border-radius:50%; background:rgba(143,211,255,.04); filter:blur(6px); animation:ceCloudDrift 8s ease-in-out infinite; }
.ce-thunder .card-effect-layer span:nth-child(12){ top:4%; left:55%; width:60px; height:20px; border-radius:50%; background:rgba(143,211,255,.035); filter:blur(7px); animation:ceCloudDrift 9s ease-in-out infinite 1s; }
.ce-thunder .card-effect-layer span:nth-child(13){ top:1%; left:30%; width:45px; height:15px; border-radius:50%; background:rgba(143,211,255,.03); filter:blur(8px); animation:ceCloudDrift 10s ease-in-out infinite 2s; }
.ce-thunder .card-effect-layer span:nth-child(14){ top:6%; left:75%; width:40px; height:14px; border-radius:50%; background:rgba(143,211,255,.025); filter:blur(6px); animation:ceCloudDrift 7s ease-in-out infinite .5s; }
@keyframes ceThunderFlash{
  0%,83%,100%{ opacity:0; }
  86%{ opacity:.12; }
  89%{ opacity:.03; }
  91%{ opacity:.10; }
  94%{ opacity:.02; }
}
@keyframes ceBoltFlash{
  0%,100%{ opacity:0; transform:scaleY(.2) scaleX(.6); filter:blur(2px); }
  5%{ opacity:1; transform:scaleY(1.2) scaleX(1); filter:blur(0); }
  10%{ opacity:0; filter:blur(1px); }
  13%{ opacity:.8; transform:scaleY(.95); filter:blur(0); }
  18%{ opacity:0; }
  21%{ opacity:.4; transform:scaleY(.7); }
  25%{ opacity:0; }
}
@keyframes ceCloudDrift{
  0%,100%{ transform:translateX(0) scale(1); opacity:.6; }
  50%{ transform:translateX(15px) scale(1.05); opacity:.9; }
}

/* ============================================================
   SAKURA — Falling petals + pink mist + loose fragments
   ============================================================ */
.ce-sakura .card-effect-layer{
  background:
    radial-gradient(ellipse 110% 90% at 50% 15%, var(--ce-color,rgba(255,183,206,.08)), transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 10%, var(--ce-color,rgba(255,200,218,.04)), transparent 40%);
}
.ce-sakura .card-effect-layer::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(ellipse 60% 40% at 50% 50%, rgba(255,183,206,.04), transparent);
}
.ce-sakura .card-effect-layer::after{
  content:''; position:absolute; bottom:0; left:0; right:0; height:20%;
  background:radial-gradient(ellipse 80% 100% at 50% 100%, rgba(255,183,206,.05), transparent);
}
.ce-sakura .card-effect-layer span{
  position:absolute; border-radius:60% 0 60% 0;
  background:linear-gradient(135deg, rgba(255,255,255,.4), var(--ce-color,rgba(255,183,206,.5)));
  box-shadow:0 0 6px 2px var(--ce-color,rgba(255,183,206,.25));
  animation:ceSakuraFall 4.5s cubic-bezier(.25,.1,.25,1) infinite;
}
.ce-sakura .card-effect-layer span:nth-child(1){ left:6%; animation-delay:0s; width:14px; height:14px; opacity:.75; }
.ce-sakura .card-effect-layer span:nth-child(2){ left:22%; animation-delay:.9s; width:9px; height:9px; opacity:.45; }
.ce-sakura .card-effect-layer span:nth-child(3){ left:42%; animation-delay:1.8s; width:12px; height:12px; opacity:.65; }
.ce-sakura .card-effect-layer span:nth-child(4){ left:60%; animation-delay:2.7s; width:8px; height:8px; opacity:.4; }
.ce-sakura .card-effect-layer span:nth-child(5){ left:78%; animation-delay:3.6s; width:10px; height:10px; opacity:.6; }
.ce-sakura .card-effect-layer span:nth-child(6){ left:14%; animation-delay:.45s; width:7px; height:7px; opacity:.5; }
.ce-sakura .card-effect-layer span:nth-child(7){ left:34%; animation-delay:1.35s; width:6px; height:6px; opacity:.35; }
.ce-sakura .card-effect-layer span:nth-child(8){ left:52%; animation-delay:2.25s; width:9px; height:9px; opacity:.55; }
.ce-sakura .card-effect-layer span:nth-child(9){ left:70%; animation-delay:3.15s; width:5px; height:5px; opacity:.3; }
.ce-sakura .card-effect-layer span:nth-child(10){ left:88%; animation-delay:4.05s; width:7px; height:7px; opacity:.45; }
.ce-sakura .card-effect-layer span:nth-child(11){ left:3%; animation-delay:2s; width:4px; height:4px; opacity:.25; animation:ceSakuraFragment 6s ease-in-out infinite; }
.ce-sakura .card-effect-layer span:nth-child(12){ left:46%; animation-delay:3.5s; width:3px; height:3px; opacity:.2; animation:ceSakuraFragment 7s ease-in-out infinite .5s; }
.ce-sakura .card-effect-layer span:nth-child(13){ left:28%; animation-delay:1.1s; width:4px; height:4px; opacity:.22; animation:ceSakuraFragment 5.5s ease-in-out infinite 1s; }
.ce-sakura .card-effect-layer span:nth-child(14){ left:82%; animation-delay:2.8s; width:3px; height:3px; opacity:.18; animation:ceSakuraFragment 6.5s ease-in-out infinite 1.5s; }
@keyframes ceSakuraFall{
  0%{ transform:translateY(-25px) rotate(0deg) scale(.5); opacity:0; }
  6%{ opacity:.8; transform:scale(1); }
  25%{ transform:translateY(25%) rotate(80deg) scale(1.05) translateX(10px); }
  50%{ transform:translateY(50%) rotate(160deg) scale(1.1) translateX(16px); opacity:.8; }
  75%{ transform:translateY(75%) rotate(240deg) scale(.9) translateX(6px); }
  93%{ opacity:.4; }
  100%{ transform:translateY(calc(100% + 25px)) rotate(340deg) scale(.6) translateX(-6px); opacity:0; }
}
@keyframes ceSakuraFragment{
  0%,100%{ opacity:0; transform:translateY(0) rotate(0deg); }
  20%{ opacity:.25; }
  50%{ opacity:.18; transform:translateY(-15px) translateX(8px) rotate(90deg); }
  80%{ opacity:.08; }
}

/* ============================================================
   ICE — Crystal pentagons + frost mist + sparkle glints
   ============================================================ */
.ce-ice .card-effect-layer{
  background:
    radial-gradient(ellipse 130% 120% at 50% 25%, var(--ce-color,rgba(190,235,255,.10)), transparent 55%),
    radial-gradient(ellipse 85% 65% at 50% 20%, var(--ce-color,rgba(125,200,232,.05)), transparent 38%);
}
.ce-ice .card-effect-layer::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,.02) 0px, transparent 1px, transparent 8px),
    repeating-radial-gradient(circle at 80% 70%, rgba(190,235,255,.015) 0px, transparent 1px, transparent 10px);
}
.ce-ice .card-effect-layer::after{
  content:''; position:absolute; bottom:0; left:0; right:0; height:25%;
  background:linear-gradient(0deg, rgba(190,235,255,.06), transparent);
}
.ce-ice .card-effect-layer span{
  position:absolute; opacity:.45;
  background:linear-gradient(135deg, rgba(255,255,255,.7), var(--ce-color,rgba(190,235,255,.55)));
  clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  box-shadow:0 0 6px 2px var(--ce-color,rgba(190,235,255,.3));
  animation:ceCrystalFloat 4s cubic-bezier(.4,0,.6,1) infinite;
}
.ce-ice .card-effect-layer span:nth-child(1){ top:6%; left:4%; animation-delay:0s; width:13px; height:13px; transform:rotate(15deg); }
.ce-ice .card-effect-layer span:nth-child(2){ top:3%; left:76%; animation-delay:.7s; width:9px; height:9px; transform:rotate(-25deg); }
.ce-ice .card-effect-layer span:nth-child(3){ top:82%; left:6%; animation-delay:1.4s; width:11px; height:11px; transform:rotate(40deg); }
.ce-ice .card-effect-layer span:nth-child(4){ top:79%; left:82%; animation-delay:2.1s; width:8px; height:8px; transform:rotate(-15deg); }
.ce-ice .card-effect-layer span:nth-child(5){ top:36%; left:0%; animation-delay:2.8s; width:7px; height:7px; transform:rotate(55deg); }
.ce-ice .card-effect-layer span:nth-child(6){ top:41%; right:0%; animation-delay:3.5s; width:8px; height:8px; transform:rotate(-40deg); }
.ce-ice .card-effect-layer span:nth-child(7){ top:14%; left:88%; animation-delay:.35s; width:6px; height:6px; transform:rotate(22deg); }
.ce-ice .card-effect-layer span:nth-child(8){ top:60%; left:92%; animation-delay:1.05s; width:5px; height:5px; transform:rotate(-55deg); }
.ce-ice .card-effect-layer span:nth-child(9){ top:90%; left:40%; animation-delay:1.75s; width:6px; height:6px; transform:rotate(30deg); }
.ce-ice .card-effect-layer span:nth-child(10){ top:20%; left:60%; animation-delay:2.45s; width:5px; height:5px; transform:rotate(-20deg); }
.ce-ice .card-effect-layer span:nth-child(11){ top:30%; left:15%; width:38px; height:18px; border-radius:50%; background:rgba(190,235,255,.05); filter:blur(8px); animation:ceBreathMist 5s ease-in-out infinite; }
.ce-ice .card-effect-layer span:nth-child(12){ top:55%; left:60%; width:30px; height:15px; border-radius:50%; background:rgba(190,235,255,.04); filter:blur(9px); animation:ceBreathMist 6s ease-in-out infinite 1s; }
.ce-ice .card-effect-layer span:nth-child(13){ top:15%; left:40%; width:3px; height:3px; border-radius:50%; background:#fff; box-shadow:0 0 4px 1px rgba(190,235,255,.5); animation:ceIceGlint 4s ease-in-out infinite; }
.ce-ice .card-effect-layer span:nth-child(14){ top:72%; left:25%; width:2px; height:2px; border-radius:50%; background:#fff; box-shadow:0 0 3px 1px rgba(190,235,255,.4); animation:ceIceGlint 5s ease-in-out infinite 1.5s; }
@keyframes ceCrystalFloat{
  0%,100%{ opacity:.12; transform:scale(.35) rotate(0deg); filter:blur(1px); }
  18%{ opacity:.55; transform:scale(1.2) rotate(10deg); filter:blur(0); }
  45%{ opacity:.4; transform:scale(.9) rotate(22deg); }
  70%{ opacity:.25; transform:scale(.75) rotate(32deg); filter:blur(.5px); }
}
@keyframes ceBreathMist{
  0%,100%{ opacity:0; transform:scale(.8); }
  50%{ opacity:.6; transform:scale(1.2); }
}
@keyframes ceIceGlint{
  0%,85%,100%{ opacity:0; transform:scale(.3); }
  90%{ opacity:1; transform:scale(1.8); }
  95%{ opacity:.4; transform:scale(1); }
}

/* ============================================================
   GOLD DUST — Sparkle particles + shimmer wave
   ============================================================ */
.ce-golddust .card-effect-layer{
  background:
    radial-gradient(ellipse 110% 90% at 50% 50%, var(--ce-color,rgba(255,224,122,.08)), transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 45%, var(--ce-color,rgba(255,210,76,.04)), transparent 32%);
}
.ce-golddust .card-effect-layer::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 50px 12px rgba(255,210,76,.04);
}
.ce-golddust .card-effect-layer::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(90deg, transparent, rgba(255,224,122,.04), transparent);
  animation:ceShimmerWave 4s ease-in-out infinite;
}
.ce-golddust .card-effect-layer span{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.85) 0%, var(--ce-color,rgba(255,224,122,.7)) 40%, var(--ce-color,rgba(255,210,76,.2)) 70%, transparent 85%);
  box-shadow:0 0 6px 2px var(--ce-color,rgba(255,210,76,.4)), 0 0 14px 4px var(--ce-color,rgba(255,210,76,.15));
  animation:ceSparkle 3s cubic-bezier(.4,0,.6,1) infinite;
}
.ce-golddust .card-effect-layer span:nth-child(1){ top:8%; left:10%; animation-delay:0s; width:5px; height:5px; }
.ce-golddust .card-effect-layer span:nth-child(2){ top:62%; left:3%; animation-delay:.55s; width:3px; height:3px; }
.ce-golddust .card-effect-layer span:nth-child(3){ top:12%; left:82%; animation-delay:1.1s; width:4px; height:4px; }
.ce-golddust .card-effect-layer span:nth-child(4){ top:72%; left:87%; animation-delay:1.65s; width:3px; height:3px; }
.ce-golddust .card-effect-layer span:nth-child(5){ top:42%; left:47%; animation-delay:2.2s; width:5px; height:5px; }
.ce-golddust .card-effect-layer span:nth-child(6){ top:18%; left:35%; animation-delay:.3s; width:3px; height:3px; }
.ce-golddust .card-effect-layer span:nth-child(7){ top:55%; left:20%; animation-delay:.85s; width:3px; height:3px; }
.ce-golddust .card-effect-layer span:nth-child(8){ top:30%; left:70%; animation-delay:1.4s; width:4px; height:4px; }
.ce-golddust .card-effect-layer span:nth-child(9){ top:80%; left:55%; animation-delay:1.95s; width:3px; height:3px; }
.ce-golddust .card-effect-layer span:nth-child(10){ top:48%; left:92%; animation-delay:2.5s; width:3px; height:3px; }
.ce-golddust .card-effect-layer span:nth-child(11){ top:25%; left:55%; animation-delay:.15s; width:2px; height:2px; }
.ce-golddust .card-effect-layer span:nth-child(12){ top:68%; left:38%; animation-delay:.7s; width:2px; height:2px; }
@keyframes ceSparkle{
  0%,100%{ opacity:0; transform:scale(.2) translateY(0); filter:blur(1px); }
  12%{ opacity:1; transform:scale(1.5) translateY(-5px); filter:blur(0); }
  35%{ opacity:.7; transform:scale(1) translateY(-2px); }
  60%{ opacity:.35; transform:scale(.7) translateY(3px); filter:blur(.3px); }
}
@keyframes ceShimmerWave{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(100%); }
}

/* ============================================================
   SMOKE — Wispy haze + turbulence + color shift
   ============================================================ */
.ce-smoke .card-effect-layer{
  background:
    radial-gradient(ellipse 120% 110% at 50% 50%, var(--ce-color,rgba(160,160,170,.10)), transparent 55%),
    radial-gradient(ellipse 80% 70% at 50% 55%, var(--ce-color,rgba(160,160,170,.05)), transparent 42%);
  animation:ceSmokeDrift 3.5s cubic-bezier(.4,0,.6,1) infinite;
}
.ce-smoke .card-effect-layer::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 80px 18px var(--ce-color,rgba(160,160,170,.05));
}
.ce-smoke .card-effect-layer::after{
  content:''; position:absolute; bottom:0; left:0; right:0; height:40%;
  background:linear-gradient(0deg, rgba(160,160,170,.05), transparent);
}
.ce-smoke .card-effect-layer span{
  position:absolute; border-radius:50%; opacity:0;
  background:radial-gradient(ellipse, var(--ce-color,rgba(160,160,170,.2)), transparent 70%);
  filter:blur(5px);
  box-shadow:0 0 8px 3px var(--ce-color,rgba(160,160,170,.06));
  animation:ceWispDrift 5s cubic-bezier(.4,0,.6,1) infinite;
}
.ce-smoke .card-effect-layer span:nth-child(1){ width:50px; height:22px; top:12%; left:2%; animation-delay:0s; }
.ce-smoke .card-effect-layer span:nth-child(2){ width:38px; height:18px; top:50%; left:5%; animation-delay:.9s; }
.ce-smoke .card-effect-layer span:nth-child(3){ width:44px; height:20px; top:6%; right:2%; animation-delay:1.8s; }
.ce-smoke .card-effect-layer span:nth-child(4){ width:32px; height:16px; top:60%; right:5%; animation-delay:2.7s; }
.ce-smoke .card-effect-layer span:nth-child(5){ width:56px; height:22px; top:30%; left:0%; animation-delay:.4s; }
.ce-smoke .card-effect-layer span:nth-child(6){ width:34px; height:15px; top:80%; left:15%; animation-delay:1.3s; }
.ce-smoke .card-effect-layer span:nth-child(7){ width:40px; height:17px; top:2%; left:55%; animation-delay:2.2s; }
.ce-smoke .card-effect-layer span:nth-child(8){ width:28px; height:13px; top:70%; right:12%; animation-delay:3.1s; }
@keyframes ceSmokeDrift{ 0%,100%{ transform:scale(1); opacity:.45; } 50%{ transform:scale(1.1); opacity:.7; } }
@keyframes ceWispDrift{
  0%{ opacity:0; transform:translateX(0) scale(.35); filter:blur(3px); }
  15%{ opacity:.35; filter:blur(4px); }
  35%{ opacity:.5; transform:translateX(25px) translateY(-12px) scale(1.1); filter:blur(5px); }
  55%{ opacity:.3; }
  75%{ opacity:.12; }
  100%{ opacity:0; transform:translateX(55px) translateY(-30px) scale(.2); filter:blur(6px); }
}

/* ============================================================
   STARS — Twinkling stars + shooting star + nebula patches
   ============================================================ */
.ce-stars .card-effect-layer{
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.025), transparent 25%),
    radial-gradient(circle at 75% 80%, rgba(255,255,255,.02), transparent 20%);
}
.ce-stars .card-effect-layer::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:
    radial-gradient(circle at 30% 40%, rgba(120,100,255,.03), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(255,100,150,.025), transparent 35%);
}
.ce-stars .card-effect-layer::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 70px 15px rgba(0,0,0,.04);
}
.ce-stars .card-effect-layer span{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--ce-color,rgba(255,255,255,.75)) 50%, transparent 75%);
  box-shadow:0 0 4px 1px var(--ce-color,rgba(255,255,255,.5)), 0 0 12px 3px var(--ce-color,rgba(255,255,255,.2));
  animation:ceTwinkle 3s cubic-bezier(.4,0,.6,1) infinite;
}
.ce-stars .card-effect-layer span:nth-child(1){ top:3%; left:15%; animation-delay:0s; width:4px; height:4px; }
.ce-stars .card-effect-layer span:nth-child(2){ top:16%; left:85%; animation-delay:.4s; width:3px; height:3px; }
.ce-stars .card-effect-layer span:nth-child(3){ top:78%; left:8%; animation-delay:.8s; width:3px; height:3px; }
.ce-stars .card-effect-layer span:nth-child(4){ top:84%; left:72%; animation-delay:1.2s; width:4px; height:4px; }
.ce-stars .card-effect-layer span:nth-child(5){ top:46%; left:92%; animation-delay:1.6s; width:3px; height:3px; }
.ce-stars .card-effect-layer span:nth-child(6){ top:32%; left:2%; animation-delay:2s; width:3px; height:3px; }
.ce-stars .card-effect-layer span:nth-child(7){ top:66%; left:88%; animation-delay:2.4s; width:3px; height:3px; }
.ce-stars .card-effect-layer span:nth-child(8){ top:8%; left:52%; animation-delay:.2s; width:4px; height:4px; }
.ce-stars .card-effect-layer span:nth-child(9){ top:90%; left:42%; animation-delay:.6s; width:3px; height:3px; }
.ce-stars .card-effect-layer span:nth-child(10){ top:22%; left:68%; animation-delay:1s; width:3px; height:3px; }
.ce-stars .card-effect-layer span:nth-child(11){ top:58%; left:5%; animation-delay:1.4s; width:2px; height:2px; }
.ce-stars .card-effect-layer span:nth-child(12){ top:40%; left:30%; animation-delay:1.8s; width:2px; height:2px; }
.ce-stars .card-effect-layer span:nth-child(13){ top:72%; left:55%; animation-delay:2.2s; width:2px; height:2px; }
.ce-stars .card-effect-layer span:nth-child(14){ top:55%; left:78%; animation-delay:2.6s; width:2px; height:2px; }
.ce-stars .card-effect-layer span:nth-child(15){ top:12%; left:38%; animation-delay:2.8s; width:2px; height:2px; }
.ce-stars .card-effect-layer span:nth-child(16){ top:88%; left:20%; animation-delay:3s; width:2px; height:2px; }
.ce-stars .card-effect-layer span:nth-child(17){ top:35%; left:52%; animation-delay:.1s; width:2px; height:2px; }
.ce-stars .card-effect-layer span:nth-child(18){ top:62%; left:35%; animation-delay:1.5s; width:2px; height:2px; }
.ce-stars .card-effect-layer span:nth-child(19){ top:28%; left:82%; animation-delay:2.5s; width:2px; height:2px; }
.ce-stars .card-effect-layer span:nth-child(20){
  top:4%; left:95%; width:3px; height:3px; animation-delay:3.5s;
  background:radial-gradient(circle, #fff 0%, rgba(255,255,255,.85) 30%, transparent 60%);
  box-shadow:-15px 0 8px 2px rgba(255,255,255,.35), -30px 0 4px 1px rgba(255,255,255,.18);
  animation:ceShootingStar 6s ease-in infinite;
}
@keyframes ceTwinkle{ 0%,100%{ opacity:.08; transform:scale(.35); filter:blur(1px); } 40%{ opacity:1; transform:scale(1.8); filter:blur(0); } 70%{ opacity:.5; transform:scale(1.1); } }
@keyframes ceShootingStar{
  0%{ opacity:0; transform:translateX(0) translateY(0); }
  2%{ opacity:1; }
  8%{ opacity:0; transform:translateX(-130px) translateY(65px); }
  100%{ opacity:0; }
}

/* ============================================================
   RAIN — Rain streaks + splash droplets + ripple rings
   ============================================================ */
.ce-rain .card-effect-layer{
  background:
    linear-gradient(180deg, rgba(143,203,255,.05), transparent 30%),
    radial-gradient(ellipse 90% 60% at 50% 12%, rgba(143,203,255,.04), transparent 45%);
}
.ce-rain .card-effect-layer::before{
  content:''; position:absolute; bottom:0; left:0; right:0; height:20%;
  background:linear-gradient(0deg, rgba(143,203,255,.04), transparent);
}
.ce-rain .card-effect-layer::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 25px 5px rgba(143,203,255,.03);
}
.ce-rain .card-effect-layer span{
  position:absolute; top:-22px; border-radius:1px;
  background:linear-gradient(180deg, var(--ce-color,rgba(143,203,255,.6)), rgba(255,255,255,.4), transparent);
  box-shadow:0 0 4px 1px var(--ce-color,rgba(143,203,255,.2));
  animation:ceRainFall 1.6s linear infinite;
}
.ce-rain .card-effect-layer span:nth-child(1){ left:8%; animation-delay:0s; height:26px; width:2px; transform:rotate(-2deg); }
.ce-rain .card-effect-layer span:nth-child(2){ left:22%; animation-delay:.18s; height:20px; width:1.5px; transform:rotate(3deg); }
.ce-rain .card-effect-layer span:nth-child(3){ left:42%; animation-delay:.36s; height:22px; width:2px; transform:rotate(-4deg); }
.ce-rain .card-effect-layer span:nth-child(4){ left:62%; animation-delay:.54s; height:18px; width:1.5px; transform:rotate(1deg); }
.ce-rain .card-effect-layer span:nth-child(5){ left:80%; animation-delay:.72s; height:24px; width:2px; transform:rotate(-3deg); }
.ce-rain .card-effect-layer span:nth-child(6){ left:32%; animation-delay:.08s; height:22px; width:1.5px; transform:rotate(5deg); }
.ce-rain .card-effect-layer span:nth-child(7){ left:70%; animation-delay:.44s; height:20px; width:2px; transform:rotate(-1deg); }
.ce-rain .card-effect-layer span:nth-child(8){ left:12%; animation-delay:.62s; height:18px; width:1.5px; transform:rotate(2deg); }
.ce-rain .card-effect-layer span:nth-child(9){ left:52%; animation-delay:.26s; height:16px; width:1px; transform:rotate(-5deg); }
.ce-rain .card-effect-layer span:nth-child(10){ left:88%; animation-delay:.82s; height:14px; width:1px; transform:rotate(4deg); }
.ce-rain .card-effect-layer span:nth-child(11){ left:28%; animation-delay:.12s; height:12px; width:1px; transform:rotate(-3deg); }
.ce-rain .card-effect-layer span:nth-child(12){ left:48%; animation-delay:.68s; height:14px; width:1px; transform:rotate(2deg); }
.ce-rain .card-effect-layer span:nth-child(13){ left:76%; animation-delay:.32s; height:12px; width:1px; transform:rotate(-1deg); }
.ce-rain .card-effect-layer span:nth-child(14){ left:4%; animation-delay:.52s; height:10px; width:1px; transform:rotate(3deg); }
.ce-rain .card-effect-layer span:nth-child(15){ bottom:5%; left:20%; top:auto; height:3px; width:3px; border-radius:50%; background:rgba(143,203,255,.2); animation:ceSplash 2s ease-out infinite; }
.ce-rain .card-effect-layer span:nth-child(16){ bottom:4%; left:50%; top:auto; height:3px; width:3px; border-radius:50%; background:rgba(143,203,255,.15); animation:ceSplash 2.5s ease-out infinite .5s; }
.ce-rain .card-effect-layer span:nth-child(17){ bottom:6%; left:75%; top:auto; height:2px; width:2px; border-radius:50%; background:rgba(143,203,255,.12); animation:ceRipple 2s ease-out infinite; }
.ce-rain .card-effect-layer span:nth-child(18){ bottom:3%; left:35%; top:auto; height:2px; width:2px; border-radius:50%; background:rgba(143,203,255,.12); animation:ceRipple 2.5s ease-out infinite .8s; }
@keyframes ceRainFall{ 0%{ transform:translateY(-22px); opacity:0; } 6%{ opacity:.7; } 100%{ transform:translateY(calc(100% + 22px)); opacity:0; } }
@keyframes ceSplash{
  0%{ opacity:0; transform:scale(0) translateY(0); }
  30%{ opacity:.6; transform:scale(1) translateY(-8px); }
  100%{ opacity:0; transform:scale(.5) translateY(-20px); }
}
@keyframes ceRipple{
  0%{ opacity:0; transform:scale(.5); border:1px solid rgba(143,203,255,.2); }
  50%{ opacity:.35; transform:scale(3); border:1px solid rgba(143,203,255,.1); }
  100%{ opacity:0; transform:scale(5); border:1px solid rgba(143,203,255,0); }
}

/* ============================================================
   ELECTRIC — Orbiting sparks + plasma glow + static crackle
   ============================================================ */
.ce-electric .card-effect-layer{
  border:1px solid var(--ce-color,rgba(143,211,255,.15));
  animation:ceElectricSpin 3s linear infinite;
  background:
    conic-gradient(from 0deg, transparent, var(--ce-color,rgba(143,211,255,.08)), transparent 16%, var(--ce-color,rgba(159,231,255,.05)), transparent 32%),
    radial-gradient(ellipse 90% 70% at 50% 50%, var(--ce-color,rgba(159,231,255,.05)), transparent 50%);
}
.ce-electric .card-effect-layer::before{
  content:''; position:absolute; inset:6px; border-radius:inherit;
  border:1px solid var(--ce-color,rgba(143,211,255,.08));
  animation:ceElectricSpin 3s linear infinite reverse;
}
.ce-electric .card-effect-layer::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(ellipse 80% 60% at 50% 50%, rgba(143,211,255,.04), transparent);
}
.ce-electric .card-effect-layer span{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.85) 0%, var(--ce-color,rgba(143,211,255,.7)) 45%, transparent 75%);
  box-shadow:0 0 6px 2px var(--ce-color,rgba(143,211,255,.4)), 0 0 14px 4px var(--ce-color,rgba(159,231,255,.15));
  animation:ceSparkOrbit 3s linear infinite;
}
.ce-electric .card-effect-layer span:nth-child(1){ top:6%; left:47%; animation-delay:0s; width:5px; height:5px; }
.ce-electric .card-effect-layer span:nth-child(2){ top:47%; left:88%; animation-delay:.75s; width:4px; height:4px; }
.ce-electric .card-effect-layer span:nth-child(3){ top:86%; left:47%; animation-delay:1.5s; width:5px; height:5px; }
.ce-electric .card-effect-layer span:nth-child(4){ top:47%; left:5%; animation-delay:2.25s; width:4px; height:4px; }
.ce-electric .card-effect-layer span:nth-child(5){ top:20%; left:82%; animation-delay:.37s; width:3px; height:3px; }
.ce-electric .card-effect-layer span:nth-child(6){ top:78%; left:82%; animation-delay:1.12s; width:3px; height:3px; }
.ce-electric .card-effect-layer span:nth-child(7){ top:78%; left:12%; animation-delay:1.87s; width:3px; height:3px; }
.ce-electric .card-effect-layer span:nth-child(8){ top:20%; left:12%; animation-delay:2.62s; width:3px; height:3px; }
.ce-electric .card-effect-layer span:nth-child(9){ top:10%; left:65%; animation-delay:.2s; width:2px; height:2px; background:rgba(143,211,255,.35); animation:ceStaticCrackle .8s ease-in-out infinite; }
.ce-electric .card-effect-layer span:nth-child(10){ top:60%; left:95%; animation-delay:.95s; width:2px; height:2px; background:rgba(143,211,255,.3); animation:ceStaticCrackle 1s ease-in-out infinite .3s; }
.ce-electric .card-effect-layer span:nth-child(11){ top:90%; left:30%; animation-delay:1.7s; width:1.5px; height:1.5px; background:rgba(143,211,255,.35); animation:ceStaticCrackle .9s ease-in-out infinite .6s; }
.ce-electric .card-effect-layer span:nth-child(12){ top:35%; left:2%; animation-delay:2.45s; width:2px; height:2px; background:rgba(143,211,255,.25); animation:ceStaticCrackle 1.1s ease-in-out infinite .9s; }
.ce-electric .card-effect-layer span:nth-child(13){ top:5%; left:30%; animation-delay:.55s; width:1.5px; height:1.5px; background:rgba(143,211,255,.3); animation:ceStaticCrackle .7s ease-in-out infinite .2s; }
.ce-electric .card-effect-layer span:nth-child(14){ top:72%; left:65%; animation-delay:1.35s; width:1.5px; height:1.5px; background:rgba(143,211,255,.25); animation:ceStaticCrackle 1.2s ease-in-out infinite .5s; }
@keyframes ceElectricSpin{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } }
@keyframes ceSparkOrbit{
  0%{ opacity:.15; transform:scale(.35); filter:blur(1px); }
  15%{ opacity:1; transform:scale(1.5); filter:blur(0); }
  30%{ opacity:.2; transform:scale(.45); filter:blur(.5px); }
  45%{ opacity:.9; transform:scale(1.35); filter:blur(0); }
  60%{ opacity:.2; transform:scale(.5); }
  75%{ opacity:.7; transform:scale(1.15); filter:blur(0); }
  90%{ opacity:.15; transform:scale(.4); filter:blur(.8px); }
  100%{ opacity:.15; transform:scale(.35); filter:blur(1px); }
}
@keyframes ceStaticCrackle{
  0%,100%{ opacity:0; transform:scale(.5); }
  15%{ opacity:.7; transform:scale(1.5); }
  30%{ opacity:0; }
  45%{ opacity:.5; transform:scale(1.2); }
  60%{ opacity:0; }
}

/* ============================================================
   NEVERMORE — Dark raven feathers + shadow wisps + purple eyes
   ============================================================ */
.ce-nevermore .card-effect-layer{
  background:
    radial-gradient(ellipse 100% 100% at 50% 100%, rgba(45,27,78,.10), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(13,13,13,.06), transparent 50%);
}
.ce-nevermore .card-effect-layer::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(ellipse 100% 40% at 50% 100%, rgba(45,27,78,.08), transparent);
}
.ce-nevermore .card-effect-layer::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 50px 12px rgba(13,13,13,.06), inset 0 0 100px 30px rgba(45,27,78,.03);
}
.ce-nevermore .card-effect-layer span{
  position:absolute; border-radius:50%;
}
.ce-nevermore .card-effect-layer span:nth-child(-n+10){
  width:8px; height:14px;
  background:linear-gradient(135deg, #2D1B4E, #0D0D0D);
  clip-path:polygon(50% 0%, 80% 15%, 100% 50%, 80% 85%, 50% 100%, 20% 85%, 0% 50%, 20% 15%);
  box-shadow:0 0 5px 1px rgba(74,45,122,.3);
  animation:ceNevermoreFeatherFall 5s cubic-bezier(.4,0,.6,1) infinite;
}
.ce-nevermore .card-effect-layer span:nth-child(1){ top:-5%; left:10%; animation-delay:0s; width:12px; height:18px; }
.ce-nevermore .card-effect-layer span:nth-child(2){ top:-8%; left:30%; animation-delay:.5s; width:8px; height:13px; }
.ce-nevermore .card-effect-layer span:nth-child(3){ top:-3%; left:55%; animation-delay:1s; width:10px; height:16px; }
.ce-nevermore .card-effect-layer span:nth-child(4){ top:-6%; left:75%; animation-delay:1.5s; width:7px; height:11px; }
.ce-nevermore .card-effect-layer span:nth-child(5){ top:-4%; left:90%; animation-delay:2s; width:9px; height:14px; }
.ce-nevermore .card-effect-layer span:nth-child(6){ top:-7%; left:20%; animation-delay:2.5s; width:8px; height:12px; }
.ce-nevermore .card-effect-layer span:nth-child(7){ top:-2%; left:45%; animation-delay:3s; width:10px; height:16px; }
.ce-nevermore .card-effect-layer span:nth-child(8){ top:-9%; left:65%; animation-delay:3.5s; width:7px; height:11px; }
.ce-nevermore .card-effect-layer span:nth-child(9){ top:-5%; left:82%; animation-delay:4s; width:9px; height:13px; }
.ce-nevermore .card-effect-layer span:nth-child(10){ top:-3%; left:38%; animation-delay:4.5s; width:8px; height:12px; }
.ce-nevermore .card-effect-layer span:nth-child(n+11):nth-child(-n+16){
  width:28px; height:12px; border-radius:50%;
  background:rgba(13,13,13,.18); filter:blur(5px);
  animation:ceNevermoreWisp 6s ease-in-out infinite;
}
.ce-nevermore .card-effect-layer span:nth-child(11){ top:20%; left:5%; animation-delay:0s; }
.ce-nevermore .card-effect-layer span:nth-child(12){ top:50%; right:3%; animation-delay:1s; }
.ce-nevermore .card-effect-layer span:nth-child(13){ top:35%; left:15%; animation-delay:2s; width:32px; height:10px; }
.ce-nevermore .card-effect-layer span:nth-child(14){ top:65%; left:60%; animation-delay:3s; width:24px; height:9px; }
.ce-nevermore .card-effect-layer span:nth-child(15){ top:15%; right:10%; animation-delay:4s; width:30px; height:11px; }
.ce-nevermore .card-effect-layer span:nth-child(16){ top:80%; left:30%; animation-delay:5s; width:22px; height:10px; }
.ce-nevermore .card-effect-layer span:nth-child(17){
  top:30%; left:20%; width:4px; height:4px; border-radius:50%;
  background:radial-gradient(circle, #B088FF, #4A2D7A, transparent);
  box-shadow:0 0 6px 2px rgba(155,109,255,.5);
  animation:ceNevermoreFlash 5s ease-in-out infinite;
}
.ce-nevermore .card-effect-layer span:nth-child(18){
  top:32%; left:25%; width:4px; height:4px; border-radius:50%;
  background:radial-gradient(circle, #B088FF, #4A2D7A, transparent);
  box-shadow:0 0 6px 2px rgba(155,109,255,.5);
  animation:ceNevermoreFlash 5s ease-in-out infinite .3s;
}
@keyframes ceNevermoreFeatherFall{
  0%{ opacity:0; transform:translateY(0) rotate(0deg) scale(.5); }
  8%{ opacity:.6; transform:scale(1); }
  25%{ transform:translateY(25%) rotate(40deg) translateX(8px); }
  50%{ transform:translateY(50%) rotate(100deg) translateX(15px); opacity:.6; }
  75%{ transform:translateY(75%) rotate(160deg) translateX(5px); opacity:.35; }
  100%{ opacity:0; transform:translateY(calc(100% + 20px)) rotate(220deg) translateX(-5px) scale(.7); }
}
@keyframes ceNevermoreWisp{
  0%,100%{ opacity:0; transform:translateY(0) scale(.8); }
  25%{ opacity:.35; }
  50%{ opacity:.25; transform:translateY(-20px) translateX(10px) scale(1.1); }
  75%{ opacity:.12; }
}
@keyframes ceNevermoreFlash{
  0%,80%,100%{ opacity:0; transform:scale(.5); }
  85%{ opacity:.9; transform:scale(1.5); }
  90%{ opacity:.35; transform:scale(1); }
}

/* ============================================================
   COUNTRY FLAG — Spinning conic border
   ============================================================ */
.ce-flag .card-effect-layer{
  border:8px solid transparent;
  background-image:linear-gradient(var(--surface),var(--surface)), var(--ce-flag-gradient,conic-gradient(from 0deg,#CE1126 0deg 120deg,#fff 120deg 240deg,#000 240deg 360deg));
  background-origin:border-box; background-clip:padding-box,border-box;
  animation:none;
}
.ce-flag .card-effect-layer::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:
    radial-gradient(ellipse 100% 100% at 50% 50%, var(--ce-flag-glow,rgba(207,172,66,.16)), transparent 65%),
    radial-gradient(ellipse 65% 55% at 50% 50%, var(--ce-flag-glow,rgba(207,172,66,.07)), transparent 35%);
  animation:none;
}
.ce-flag .card-effect-layer::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  box-shadow:
    inset 0 0 55px 14px var(--ce-flag-glow,rgba(207,172,66,.14)),
    inset 0 0 110px 30px var(--ce-flag-glow,rgba(207,172,66,.06));
  animation:none;
}
.ce-flag-badge{
  position:absolute; top:14px; left:14px; z-index:2; font-size:32px; line-height:1;
  background:var(--surface); border-radius:50%; padding:5px;
  box-shadow:
    0 2px 14px rgba(0,0,0,.65),
    0 0 0 3px var(--surface),
    0 0 0 5px rgba(255,255,255,.08),
    0 0 14px 4px var(--ce-flag-glow,rgba(207,172,66,.18));
  animation:none;
}
[dir="rtl"] .ce-flag-badge{ left:auto; right:14px; }
@keyframes ceFlagSpin{ to{ transform:rotate(360deg); } }
@keyframes ceFlagPulse{ 0%,100%{ opacity:.8; transform:scale(1); } 50%{ opacity:1; transform:scale(1.004); } }
@keyframes ceFlagGlow{ 0%{ opacity:.3; } 100%{ opacity:.75; } }
@keyframes ceFlagBadgePop{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }

@media (prefers-reduced-motion: reduce){
  .card-effect-layer *, .card-effect-layer::before, .card-effect-layer::after,
  .card-effect-layer-3, .card-effect-layer-3 span{ animation:none !important; }
}


/* ---- coach elite modal extras ---- */
.coach-creds-list, .coach-specs-list{ display:flex; flex-wrap:wrap; gap:6px; }
.coach-creds-list .staff-cred, .coach-specs-list .staff-cred{
  font-size:11px; background:var(--surface-2); border:1px solid var(--line);
  padding:5px 11px; border-radius:6px; color:var(--ink-dim);
}

/* ---- elite banner video support ---- */
.elite-banner video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.elite-banner::after{ z-index:1; }

/* ---- shared-link highlight pulse (coach cards opened via /coaches/{id}) ---- */
.share-highlight{ animation:shareHighlightPulse 2.2s ease-out 2; }
@keyframes shareHighlightPulse{
  0%{ box-shadow:0 0 0 0 var(--staff-c,var(--gold)); }
  60%{ box-shadow:0 0 0 10px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce){ .share-highlight{ animation:none; outline:2px solid var(--gold); } }

/* ---- admin multi-select ---- */
.row-selected{ background:rgba(207,172,66,.08) !important; }
.row-selected td{ border-color:rgba(207,172,66,.15) !important; }
.player-check{ width:16px; height:16px; accent-color:var(--gold); cursor:pointer; }