/* ---------- POPPINS (self-hosted, replaces Google-Fonts Manrope/Space Grotesk/Silkscreen/JetBrains Mono) ----------
   One typeface used everywhere on the site now; hierarchy comes from size and
   weight instead of switching families. Only the weights actually used
   anywhere in this file are included, to keep the download small. */
@font-face{font-family:'Poppins'; src:url('../assets/fonts/Poppins-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:'Poppins'; src:url('../assets/fonts/Poppins-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap;}
@font-face{font-family:'Poppins'; src:url('../assets/fonts/Poppins-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap;}
@font-face{font-family:'Poppins'; src:url('../assets/fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap;}
@font-face{font-family:'Poppins'; src:url('../assets/fonts/Poppins-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap;}
@font-face{font-family:'Poppins'; src:url('../assets/fonts/Poppins-ExtraBold.ttf') format('truetype'); font-weight:800; font-style:normal; font-display:swap;}

:root{
  --navy:#070d1a; --navy-2:#0c1a30; --navy-3:#101f38;
  --blue:#2e6fb5; --blue-bright:#5aa8ec; --blue-glow:#3a8fe0;
  --gold:#8b5cf6; --gold-bright:#b79bff; --gold-glow:#7c4df0; --gold-dim:#4a3a9a;
  --cream:#f3eee0; --cream-dim:#a9b6cc;
  --line: rgba(243,238,224,0.10);
  --glass-bg: linear-gradient(155deg, rgba(255,255,255,0.08), rgba(20,38,64,0.78) 40%, rgba(12,24,45,0.84));
  --glass-border: rgba(243,238,224,0.14);
  --neu-bg: linear-gradient(145deg, rgba(255,255,255,.06), rgba(20,38,64,.85));
  --neu-border: rgba(243,238,224,.14);
  --nav-bg: rgba(7,13,26,0.86);
  --panel-bg: rgba(16,31,56,.92);
  --card-bg: rgba(7,13,26,.35);
  --overlay-bg: rgba(4,9,18,.65);
  --scrollbar-track: rgba(7,13,26,.4);
  --field-bg: rgba(7,13,26,.5);
  --footer-bg: rgba(7,13,26,.65);
  --skeleton-base: rgba(255,255,255,0.06);
  --skeleton-shine: rgba(255,255,255,0.16);
  --shadow-soft: rgba(0,0,0,.35);
  --shadow-hard: rgba(0,0,0,.5);
  padding-top: env(safe-area-inset-top,0px); padding-bottom: env(safe-area-inset-bottom,0px);
}
/* ---------- LIGHT PASTEL THEME ---------- */

body, .glass, .neu, .nav, .mobile-menu-card{ transition: background .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease; }
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:auto; overflow-x:hidden; overscroll-behavior-x:none; max-width:100%;}
body{ background:var(--navy); color:var(--cream); font-family:'Poppins',system-ui,sans-serif; font-size:16px; line-height:1.6; min-height:100vh; overflow-x:hidden; overscroll-behavior-x:none; max-width:100%; }
img{max-width:100%; display:block;}
h1,h2,h3{font-family:'Poppins',sans-serif; font-weight:800; line-height:1.3; letter-spacing:0.2px;}
.pixel, .brand{font-family:'Poppins',sans-serif; line-height:1.3; letter-spacing:0.5px;}

/* ---------- ANIMATED GRADIENT HEADINGS (blue & gold, professional shimmer) ---------- */
@keyframes gradFlow{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
.grad-text{
  background:linear-gradient(90deg,var(--blue-bright),var(--gold-bright),#7b5fd4,var(--blue-bright));
  background-size:300% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradFlow 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .grad-text{animation:none;} }
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
code{font-family:'Poppins',monospace;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px; position:relative; z-index:2;}
.page{display:none; min-height:70vh; padding:48px 0 90px; animation:pagein .45s ease;}
.page.active{display:block;}
@keyframes pagein{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .page{animation:none;} }

/* ---------- STARFIELD + ORBS ----------
   Wrapped in .bg-fx (fixed + overflow:hidden) rather than making .stars/.orb
   themselves position:fixed. Fixed-position elements combined with filter:blur
   are known to make mobile Safari treat the whole page as horizontally
   scrollable/draggable even though nothing should overflow — clipping them
   inside a single fixed, overflow-hidden wrapper avoids that bug entirely. */
.bg-fx{position:fixed; inset:0; overflow:hidden; z-index:0; pointer-events:none;}
.stars{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55;
  background-image:
    radial-gradient(1.4px 1.4px at 10% 15%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.4px 1.4px at 32% 68%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 55% 25%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.6px 1.6px at 75% 82%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 88% 40%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.3px 1.3px at 15% 90%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.2px 1.2px at 65% 55%, rgba(255,255,255,.45), transparent);
  background-repeat:repeat; background-size:340px 340px;}
.orb{position:absolute; border-radius:50%; z-index:0; pointer-events:none; opacity:.5; will-change:transform;}
.orb1{width:520px; height:520px; background:radial-gradient(circle,var(--blue-glow),transparent 70%); top:-140px; left:-120px; animation:drift1 22s ease-in-out infinite;}
.orb2{width:480px; height:480px; background:radial-gradient(circle,var(--gold-glow),transparent 70%); top:30%; right:-160px; animation:drift2 26s ease-in-out infinite;}
.orb3{width:420px; height:420px; background:radial-gradient(circle,var(--blue-glow),transparent 70%); bottom:-160px; left:20%; animation:drift3 30s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0);}50%{transform:translate(60px,80px);}}
@keyframes drift2{0%,100%{transform:translate(0,0);}50%{transform:translate(-70px,50px);}}
@keyframes drift3{0%,100%{transform:translate(0,0);}50%{transform:translate(50px,-60px);}}
@media (prefers-reduced-motion: reduce){ .orb{animation:none;} }

/* ---------- GLASS / NEU / MC (premium glassmorphism) ---------- */
.glass{
  position:relative;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:16px;
  box-shadow:0 18px 50px var(--shadow-soft), 0 2px 0 rgba(255,255,255,.05) inset, inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease;
  isolation:isolate;
  overflow:hidden;
}
/* soft top sheen — the glass "highlight" */
.glass::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 30%);
  opacity:.8;
}
/* faint animated edge glow */
.glass::after{
  content:''; position:absolute; inset:-1px; z-index:-2; border-radius:inherit; pointer-events:none;
  padding:1px;
  background:linear-gradient(120deg, rgba(90,168,236,.35), rgba(183,155,255,.28), rgba(123,95,212,.3));
  opacity:.55;
}
.glass:hover{
  transform:translateY(-3px);
  border-color:rgba(243,238,224,0.26);
  box-shadow:0 26px 60px rgba(0,0,0,.5), 0 2px 0 rgba(255,255,255,.06) inset, inset 0 1px 0 rgba(255,255,255,.18), 0 0 32px rgba(90,168,236,.12);
}
@media (prefers-reduced-motion: reduce){ .glass{transition:none;} .glass:hover{transform:none;} }

.mc-panel{border-radius:16px; box-shadow:none;}

.neu{background:var(--neu-bg); box-shadow:0 6px 18px var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.08); border:1px solid var(--neu-border); border-radius:10px; transition:box-shadow .15s ease, transform .12s ease, border-color .15s ease;}
.neu:hover{box-shadow:0 10px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12), 0 0 18px rgba(90,168,236,.18); border-color:rgba(90,168,236,.35); transform:translateY(-1px);}
.neu:active,.neu.active{box-shadow:inset 3px 3px 8px rgba(0,0,0,.5), inset -2px -2px 6px rgba(90,168,236,.06); transform:translateY(0);}

/* thin premium scrollbar to match the glass theme */
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:var(--scrollbar-track);}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--blue-bright),var(--gold-bright)); border-radius:20px; border:2px solid var(--scrollbar-track);}
* { scrollbar-color: var(--blue-bright) var(--scrollbar-track); scrollbar-width: thin; }

/* glass-y focus ring for inputs used across the site */
.f-input:focus, .search-box:focus, select:focus{
  border-color:var(--blue-bright) !important;
  box-shadow:0 0 0 3px rgba(90,168,236,.18), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---------- ANNOUNCEMENT BAR ---------- */
.announce{position:relative; z-index:70; background:linear-gradient(100deg,var(--blue),#7b5fd4,var(--gold)); padding:10px 46px 10px 16px; text-align:center; font-size:13px; font-weight:700; color:#fff;}
.announce a{text-decoration:underline;}
.announce.hide{display:none;}
.announce-x{position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:18px; line-height:1; opacity:.85; padding:4px;}

/* ---------- NAV ---------- */
.nav{position:sticky; top:0; z-index:60; padding-top:env(safe-area-inset-top,0px); background:var(--nav-bg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav-inner{max-width:1180px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; position:relative; z-index:2;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Poppins'; font-size:15px; background:linear-gradient(90deg,var(--blue-bright),var(--gold-bright)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.brand img{height:34px; width:auto; max-width:70px; object-fit:contain;}
.nav-links{display:flex; gap:6px; font-size:14px; font-weight:700;}
.nav-links a{color:var(--cream-dim); padding:9px 14px; border-radius:6px; transition:.15s;}
.nav-links a:hover{color:var(--gold-bright);}
.nav-links a.active{color:#fff; background:linear-gradient(135deg,var(--blue-bright),var(--blue)); box-shadow:0 4px 14px rgba(46,111,181,.4);}
.nav-cta{background:linear-gradient(135deg,#9468ff,#6a3fe0); color:#ffffff; padding:9px 18px; border-radius:6px; font-weight:800; font-size:13px;}

/* ---------- DISCORD CTA (glassmorphism + Discord brand gradient) ---------- */
.discord-cta{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px; border-radius:10px; font-weight:800; font-size:13px; color:#fff;
  background:linear-gradient(135deg, rgba(88,101,242,0.55), rgba(114,137,218,0.35));
  border:1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 4px 18px rgba(88,101,242,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
  overflow:hidden; isolation:isolate;
  transition:transform .2s ease, box-shadow .2s ease, background .3s ease;
}
.discord-cta::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(135deg,#5865F2,#7289DA,#404EED);
  background-size:220% 220%; opacity:0.55;
  animation:discordGradFlow 6s ease-in-out infinite;
}
.discord-cta::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; z-index:-1;
  background:linear-gradient(120deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 70%);
  transform:skewX(-20deg);
}
@keyframes discordGradFlow{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
.discord-cta:hover{ transform:translateY(-2px); box-shadow:0 8px 26px rgba(88,101,242,0.5), inset 0 1px 0 rgba(255,255,255,0.3); }
.discord-cta:active{ transform:translateY(0); }
.discord-cta-icon{ width:17px; height:17px; flex-shrink:0; }
@media (prefers-reduced-motion: reduce){ .discord-cta::before{ animation:none; } }
.burger{display:none; width:40px; height:40px; align-items:center; justify-content:center; border-radius:50%; background:var(--neu-bg); box-shadow:0 6px 18px var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.1); border:1px solid var(--neu-border); transition:box-shadow .15s ease, border-color .15s ease, background .2s ease;}
.burger.open{background:linear-gradient(145deg, rgba(139,92,246,.22), rgba(20,38,64,.6)); border-color:rgba(139,92,246,.4);}
.burger span{display:block; width:18px; height:2px; background:linear-gradient(90deg,var(--blue-bright),var(--gold-bright)); position:relative;}
.burger span::before,.burger span::after{content:''; position:absolute; left:0; width:18px; height:2px; background:linear-gradient(90deg,var(--blue-bright),var(--gold-bright)); transition:.2s;}
.burger span::before{top:-6px;} .burger span::after{top:6px;}
.burger.open span{background:transparent;}
.burger.open span::before{transform:rotate(45deg); top:0;}
.burger.open span::after{transform:rotate(-45deg); top:0;}

/* ---------- MOBILE MENU (dropdown card, slides under the nav) ---------- */
.mobile-menu{position:absolute; top:100%; left:14px; right:14px; z-index:75; max-height:0; opacity:0; overflow:hidden; pointer-events:none; transition:max-height .38s cubic-bezier(.4,0,.2,1), opacity .28s ease;}
.mobile-menu.open{max-height:640px; opacity:1; pointer-events:auto;}
.mobile-menu-card{
  margin-top:10px; padding:10px; border-radius:20px;
  background:var(--panel-bg);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  box-shadow:0 24px 60px var(--shadow-hard), inset 0 1px 0 rgba(255,255,255,.06);
}
.mobile-menu-links{display:flex; flex-direction:column;}
.mobile-menu-links a{font-family:'Poppins'; font-weight:700; font-size:17px; color:var(--cream); padding:14px 14px; border-radius:12px; border-bottom:1px solid var(--line);}
.mobile-menu-links a:last-child{border-bottom:none;}
.mobile-menu-links a:active{background:rgba(255,255,255,.06);}
.mobile-menu-links a.active{color:var(--gold-bright);}
.mobile-menu-utils{display:flex; gap:8px; padding:12px 4px 4px;}
.mobile-menu .sound-toggle{width:auto; height:auto; padding:10px 16px; font-size:13px; font-family:'Poppins'; font-weight:700; border-radius:30px; flex:1; justify-content:center;}
.discord-cta-full{width:100%; justify-content:center; margin-top:10px; padding:14px 18px; font-size:15px; border-radius:14px;}
.discord-cta-full .discord-cta-icon{width:19px; height:19px;}

.mobile-menu-utils{flex-wrap:wrap;}

@media(min-width:1121px){ .mobile-menu{display:none !important;} }
@media(max-width:1120px){
  .nav-links{display:none;} .burger{display:flex;}
  .discord-cta{width:40px; height:40px; padding:0; justify-content:center; gap:0; border-radius:8px;}
  .discord-cta span{display:none;}
  
}
@media(max-width:380px){
  .nav-inner{padding:12px 14px; gap:8px;}
  .brand{font-size:13px; gap:6px;}
  .brand img{height:28px;}
  .nav-cta{padding:9px 12px; font-size:12px;}
}

/* ---------- HERO ---------- */
.hero{padding:70px 0 30px; text-align:center;}
.eyebrow{color:var(--blue-bright); font-weight:800; font-size:13px; letter-spacing:1.5px; margin-bottom:14px;}
.hero-logo{width:150px; margin:0 auto 24px; border-radius:10px; box-shadow:0 20px 50px rgba(0,0,0,.5);}
.hero h1{font-size:clamp(34px,6.5vw,58px); margin-bottom:6px;}
.type-line{font-size:clamp(30px,6vw,52px); font-family:'Poppins',sans-serif; font-weight:800; margin-bottom:20px; min-height:1.4em;}
.type-grad{background:linear-gradient(90deg,var(--blue-bright),var(--gold-bright),#7b5fd4,var(--blue-bright)); background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gradFlow 5s ease-in-out infinite;}
.type-cursor{display:inline-block; width:3px; background:var(--gold-bright); margin-left:3px; animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
.hero p.lede{font-size:17px; color:var(--cream-dim); max-width:52ch; margin:0 auto 30px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:44px;}
.cta-pill{padding:15px 30px; border-radius:40px; font-weight:800; font-size:15px; transition:transform .18s ease, box-shadow .18s ease; position:relative;}
.cta-pill.gold{background:linear-gradient(120deg,#9468ff,#6a3fe0); color:#ffffff; box-shadow:0 8px 24px rgba(139,92,246,.35);}
.cta-pill.blue{background:linear-gradient(120deg,var(--blue-bright),#7b5fd4); color:#fff; box-shadow:0 8px 24px rgba(46,111,181,.35);}
.cta-pill:hover{transform:translateY(-2px);}
.cta-pill.gold:hover{box-shadow:0 14px 34px rgba(139,92,246,.5);}
.cta-pill.blue:hover{box-shadow:0 14px 34px rgba(46,111,181,.5);}
.cta-pill:active{transform:translateY(0);}

/* ---------- STAT CARD ---------- */
.stat-card{max-width:760px; margin:0 auto; border-radius:14px; display:grid; grid-template-columns:1fr 1fr; overflow:hidden;}
.stat-cell{padding:28px 20px; text-align:center; border-right:1px solid var(--line); border-bottom:1px solid var(--line);}
.stat-cell:nth-child(2n){border-right:none;}
.stat-cell:nth-child(3),.stat-cell:nth-child(4){border-bottom:none;}
.stat-num{font-family:'Poppins'; font-weight:700; font-size:clamp(20px,4vw,32px); background:linear-gradient(90deg,var(--blue-bright),var(--gold-bright),#7b5fd4,var(--blue-bright)); background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gradFlow 6s ease-in-out infinite; display:flex; align-items:center; justify-content:center; gap:8px;}
.stat-num.priyo-box{font-size:clamp(15px,3vw,20px); letter-spacing:.5px;}
.stat-label{font-size:11.5px; color:var(--cream-dim); font-weight:700; letter-spacing:.5px; text-transform:uppercase; margin-top:6px;}
.stat-sub{font-size:10px; color:var(--cream-dim); opacity:.7; margin-top:4px; font-family:'Poppins';}
.ping-dot{width:8px; height:8px; border-radius:50%; background:#5be36b; box-shadow:0 0 0 0 rgba(91,227,107,.7); animation:pingPulse 1.6s ease-out infinite; flex-shrink:0;}
@keyframes pingPulse{0%{box-shadow:0 0 0 0 rgba(91,227,107,.55);}70%{box-shadow:0 0 0 8px rgba(91,227,107,0);}100%{box-shadow:0 0 0 0 rgba(91,227,107,0);}}
@media (prefers-reduced-motion: reduce){ .stat-num{animation:none;} .ping-dot{animation:none;} }

/* ---------- SECTION HEAD ---------- */
.section-head{max-width:60ch; margin:0 auto 40px; text-align:center;}
.section-tag{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:1px; color:var(--blue-bright); padding:7px 16px; border-radius:30px; margin-bottom:16px;}
.section-head h2, .community-card h2{
  font-size:clamp(24px,4.5vw,34px); margin-bottom:8px;
  background:linear-gradient(90deg,var(--blue-bright),var(--gold-bright),#7b5fd4,var(--blue-bright));
  background-size:300% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradFlow 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .section-head h2, .community-card h2{animation:none;} }
.head-rule{width:56px; height:3px; margin:14px auto 0; background:linear-gradient(90deg,var(--blue-bright),var(--gold-bright)); border-radius:3px;}
.section-head p{color:var(--cream-dim); font-size:14.5px; margin-top:14px;}

/* ---------- STORY ---------- */
.story-card{max-width:820px; margin:0 auto; padding:34px; border-radius:14px;}
.story-card p{color:var(--cream-dim); font-size:15px; margin-bottom:16px;}
.story-card b{color:var(--cream);}
.tag-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px;}
.tag-pill{font-size:12px; font-weight:700; padding:8px 16px; border-radius:30px; color:var(--gold-bright);}

/* ---------- ABOUT / STORY (redesign) ---------- */
.story-card.story-xl{max-width:1000px; padding:40px 42px; position:relative; overflow:hidden;}
.story-card.story-xl::before{content:''; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--blue-bright),var(--gold-bright),#a86ff0);}
.story-lead{font-size:18px !important; line-height:1.75; color:var(--cream) !important; font-weight:600;}
.story-lead .hl{background:linear-gradient(90deg,var(--blue-bright),var(--gold-bright)); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800;}
.story-link{color:var(--blue-bright); text-decoration:underline; text-underline-offset:3px;}
.about-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:1000px; margin:22px auto 0;}
.about-stat{padding:24px 12px; text-align:center; border-radius:14px; display:flex; flex-direction:column; justify-content:center; min-height:110px;}
.about-stat-num{font-family:'Poppins'; font-weight:800; font-size:clamp(18px,2.8vw,28px); line-height:1.15; background:linear-gradient(90deg,var(--blue-bright),var(--gold-bright)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.about-stat-label{font-size:11.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--cream-dim); margin-top:8px;}
.lead-head{max-width:1000px; margin:34px auto 14px; text-align:center; font-size:12px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--cream-dim);}
.lead-head span{display:inline-block; padding:0 14px; position:relative;}
.lead-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:1000px; margin:0 auto;}
.lead-card{display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:14px; text-decoration:none; color:inherit;}
.lead-card .team-avatar{width:64px; height:64px; margin:0; flex-shrink:0;}
.lead-name{font-family:'Poppins'; font-weight:800; font-size:16px; color:var(--cream);}
.lead-role{font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; margin-top:2px;}
.lead-role.owner{color:var(--blue-bright);} .lead-role.coowner{color:var(--gold-bright);} .lead-role.dev{color:#a86ff0;}
.lead-note{font-size:12.5px; color:var(--cream-dim); margin-top:4px;}
.feat-card p code{background:rgba(90,168,236,.12); color:var(--blue-bright); padding:1px 6px; border-radius:5px; font-size:12.5px;}
@media(max-width:800px){ .about-stats{grid-template-columns:1fr 1fr;} .lead-row{grid-template-columns:1fr;} .story-card.story-xl{padding:28px 22px;} .story-lead{font-size:16px !important;} }

/* ---------- RULES / FEATURES ---------- */
.rules-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:1000px; margin:0 auto;}
@media(max-width:800px){.rules-grid{grid-template-columns:1fr;}}
.feat-card{padding:28px 26px; border-radius:12px;}
.feat-icon{width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:16px; background:linear-gradient(135deg,rgba(46,111,181,.35),rgba(139,92,246,.2));}
.feat-card h3{font-size:15px; color:var(--gold-bright); margin-bottom:10px; font-family:'Poppins'; font-weight:800;}
.feat-card p{color:var(--cream-dim); font-size:14px;}

/* ---------- CONNECT PAGE ---------- */
.connect-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:820px; margin:0 auto;}
@media(max-width:760px){.connect-grid{grid-template-columns:1fr;}}
.connect-card{padding:30px; border-radius:14px;}
.connect-icon{width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:16px;}
.connect-icon.java{background:linear-gradient(135deg,var(--blue-bright),var(--blue));}
.connect-icon.bedrock{background:linear-gradient(135deg,#e06fd8,var(--blue));}
.connect-card h3{font-size:19px; margin-bottom:10px;}
.rec-badge{display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.5px; color:var(--blue-bright); padding:5px 12px; border-radius:20px; margin-bottom:18px;}
.ip-field-label{font-size:11px; color:var(--cream-dim); font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px;}
.ip-field{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 16px; border-radius:8px; margin-bottom:18px;}
.ip-field code{color:var(--gold-bright); font-size:13px; word-break:break-all;}
.copy-btn{padding:8px 12px; border-radius:6px; color:var(--blue-bright); font-weight:700; font-size:11px; flex-shrink:0;}
.steps{display:flex; flex-direction:column; gap:10px;}
.step{display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--cream-dim);}
.step-num{width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,var(--blue-bright),#7b5fd4); color:#fff; font-family:'Poppins'; font-weight:700; font-size:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}

/* ---------- WORTH ---------- */
.worth-controls{display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; align-items:center; padding:16px; border-radius:10px;}
.search-box{flex:1; min-width:220px; background:var(--field-bg); border:1px solid var(--line); border-radius:6px; padding:12px 16px; color:var(--cream); font-size:14px; font-family:inherit;}
.search-box:focus{outline:none; border-color:var(--blue-bright);}
.cat-select,.sort-select{background:var(--field-bg); border:1px solid var(--line); color:var(--cream); border-radius:6px; padding:12px 14px; font-size:13px; font-family:inherit; font-weight:600;}
.worth-table-wrap{border-radius:10px; overflow:auto; max-height:560px;}
table{width:100%; border-collapse:collapse; font-size:14px;}
thead th{position:sticky; top:0; background:var(--panel-bg); color:var(--gold-bright); text-align:left; padding:13px 16px; font-size:12px; font-weight:800; letter-spacing:.3px; z-index:1; border-bottom:1px solid var(--line);}
tbody td{padding:11px 16px; border-bottom:1px solid var(--line); color:var(--cream-dim);}
tbody tr{transition:background .15s ease;}
tbody tr:hover{background:rgba(90,168,236,.1);}
td.price{color:var(--gold-bright); font-weight:700; text-align:right; font-size:12.5px; font-family:'Poppins';}
td.name{color:var(--cream); font-weight:600;}
.cat-pill{display:inline-block; font-size:10.5px; font-weight:800; padding:3px 8px; border-radius:20px; background:rgba(46,111,181,.22); color:var(--blue-bright);}
.worth-empty{padding:40px; text-align:center; color:var(--cream-dim); font-size:14px;}
.worth-meta{margin-top:12px; font-size:12.5px; color:var(--cream-dim);}

/* ---------- PROFIT CALCULATOR ---------- */
.profit-calc{max-width:820px; margin:0 auto; padding:34px; border-radius:14px;}
.pc-autocomplete{position:relative;}
.pc-suggestions{position:absolute; top:100%; left:0; right:0; margin-top:6px; max-height:260px; overflow-y:auto; background:rgba(12,24,45,.98); border:1px solid var(--line); border-radius:10px; box-shadow:0 16px 40px rgba(0,0,0,.5); z-index:20; display:none;}
.pc-suggestions.show{display:block;}
.pc-suggestion-item{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px; cursor:pointer; font-size:13.5px; border-bottom:1px solid var(--line);}
.pc-suggestion-item:last-child{border-bottom:none;}
.pc-suggestion-item:hover, .pc-suggestion-item.active{background:rgba(90,168,236,.12);}
.pc-suggestion-item .n{color:var(--cream); font-weight:600;}
.pc-suggestion-item .c{font-size:10px; font-weight:800; color:var(--blue-bright); background:rgba(46,111,181,.18); padding:2px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:.3px; margin-left:8px;}
.pc-suggestion-item .p{font-family:'Poppins'; color:var(--gold-bright); font-weight:700; font-size:12.5px; flex-shrink:0;}
.pc-suggestion-empty{padding:16px; text-align:center; color:var(--cream-dim); font-size:13px;}
.pc-autofill-hint{font-size:11px; color:#8ff29e; margin-top:6px; min-height:14px;}
.pc-row{margin-bottom:18px; position:relative;}
.pc-label{display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--cream-dim); margin-bottom:8px;}
.pc-ico{font-size:14px;}
.pc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:22px;}
@media(max-width:760px){.pc-grid{grid-template-columns:1fr;}}
#pcSaveBtn{margin-bottom:30px; background:linear-gradient(135deg,#9468ff,#6a3fe0); color:#ffffff;}

.pc-compare{padding:24px 26px; border-radius:12px; margin-bottom:26px;}
.pc-compare-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:18px;}
.pc-compare-head h4{font-family:'Poppins'; font-size:15px; color:var(--cream);}
.pc-compare-meta{font-size:12px; color:var(--cream-dim);}
.pc-bar-row{display:grid; grid-template-columns:110px 1fr 90px; align-items:center; gap:12px; margin-bottom:14px;}
.pc-bar-row:last-child{margin-bottom:0;}
.pc-bar-label{font-size:12.5px; color:var(--cream-dim); font-weight:700;}
.pc-bar-track{height:14px; border-radius:20px; background:var(--field-bg); border:1px solid var(--line); overflow:hidden;}
.pc-bar-fill{height:100%; width:0%; border-radius:20px; transition:width .5s cubic-bezier(.4,0,.2,1);}
.pc-bar-fill.ah{background:linear-gradient(90deg,var(--blue),var(--blue-bright));}
.pc-bar-fill.orders{background:linear-gradient(90deg,var(--gold),var(--gold-bright));}
.pc-bar-fill.normal{background:linear-gradient(90deg,#5be36b,#8ff29e);}
.pc-bar-value{font-family:'Poppins'; font-size:12.5px; color:var(--cream); text-align:right; font-weight:700;}

.pc-results{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:28px;}
@media(max-width:700px){.pc-results{grid-template-columns:1fr;}}
.pc-result-card{padding:24px 20px; border-radius:12px; text-align:center; border-top:3px solid var(--blue-bright);}
.pc-result-card.low{border-top-color:#ff8a8a;}
.pc-result-card.diff{border-top-color:var(--gold-bright);}
.pc-result-label{font-size:11px; font-weight:800; letter-spacing:.6px; color:var(--cream-dim); margin-bottom:14px;}
.pc-result-value{font-family:'Poppins'; font-weight:700; font-size:26px; color:var(--cream); margin-bottom:14px;}
.pc-result-tag{display:inline-block; font-size:11.5px; font-weight:700; padding:6px 16px; border-radius:20px; background:rgba(255,128,128,.14); color:#ff9a9a;}
.pc-result-tag.ready{background:rgba(91,227,107,.14); color:#8ff29e;}
.pc-result-tag.low.ready{background:rgba(90,168,236,.14); color:var(--blue-bright);}
.pc-result-tag.diff.ready{background:rgba(139,92,246,.16); color:var(--gold-bright);}

.pc-saved{padding:26px; border-radius:12px;}
.pc-saved h4{font-family:'Poppins'; font-size:16px; margin-bottom:8px; color:var(--cream);}
.pc-saved-note{font-size:12.5px; color:var(--cream-dim); margin-bottom:12px;}
.pc-lock-pill{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--gold-bright); background:rgba(139,92,246,.12); padding:6px 14px; border-radius:20px; margin-bottom:18px;}
.pc-saved-list{display:flex; flex-direction:column; gap:10px;}
.pc-saved-empty{padding:26px; text-align:center; color:var(--cream-dim); font-size:13px; border:1px dashed var(--line); border-radius:10px;}
.pc-saved-item{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-radius:10px; background:var(--field-bg); border:1px solid var(--line); flex-wrap:wrap;}
.pc-saved-item .name{font-weight:700; color:var(--cream); font-size:14px;}
.pc-saved-item .meta{font-size:11.5px; color:var(--cream-dim); font-family:'Poppins';}
.pc-saved-item .del{color:#ff8a8a; font-weight:800; font-size:12px; padding:6px 12px; border-radius:8px; background:rgba(255,90,90,.1);}

/* ---------- TEAM (creator-card style) ---------- */
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:800px){.team-grid{grid-template-columns:1fr;}}
.team-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:18px;}
.team-grid > .team-card{flex:0 1 calc((100% - 36px) / 3); min-width:0;}
@media(max-width:900px){.team-grid > .team-card{flex-basis:calc((100% - 18px) / 2);}}
@media(max-width:520px){.team-grid > .team-card{flex-basis:100%;}}
.team-card{border-radius:14px; padding:32px 24px; text-align:center; border-top:3px solid transparent; transition:transform .18s ease;}
.team-card:hover{transform:translateY(-5px);}
.team-card.owner{border-top-color:var(--blue-bright);}
.team-card.coowner{border-top-color:var(--gold-bright);}
.team-card.dev{border-top-color:#a86ff0;}
.team-card.manager{border-top-color:#3ddc84;}
.team-card.admin{border-top-color:#ff5c5c;}
.team-avatar{width:88px; height:88px; border-radius:50%; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; font-family:'Poppins'; font-weight:700; font-size:26px; color:#fff; box-shadow:0 10px 28px rgba(0,0,0,.4);}
.team-avatar{width:88px; height:88px; border-radius:50%; margin:0 auto 18px; overflow:hidden; border:3px solid transparent; box-shadow:0 10px 28px rgba(0,0,0,.4);}
.team-avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.team-avatar.owner{border-color:var(--blue-bright);}
.team-avatar.coowner{border-color:var(--gold-bright);}
.team-avatar.dev{border-color:#a86ff0;}
.team-avatar.manager{border-color:#3ddc84;}
.team-avatar.admin{border-color:#ff5c5c;}
.team-name{font-family:'Poppins'; font-weight:700; font-size:19px; color:var(--cream); margin-bottom:6px;}
.team-role{font-size:11.5px; font-weight:800; color:var(--blue-bright); letter-spacing:.5px; margin-bottom:14px; text-transform:uppercase;}
.team-role.gold{color:var(--gold-bright);}
.team-role.purple{color:#a86ff0;}
.team-role.green{color:#3ddc84;}
.team-role.red{color:#ff5c5c;}
.team-bio{color:var(--cream-dim); font-size:13.5px; margin-bottom:20px;}
.team-socials{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.social-pill{font-size:12px; font-weight:700; padding:8px 14px; border-radius:20px; display:inline-flex; align-items:center; gap:6px;}
.social-pill.yt{color:#ff6b6b;}
.social-pill.web{color:var(--blue-bright);}

/* ---------- COMMUNITY CTA ---------- */
.community-card{max-width:640px; margin:0 auto; padding:34px; border-radius:14px; text-align:center;}
.community-card p{color:var(--cream-dim); font-size:14.5px; margin-bottom:22px;}
.big-pill{display:block; padding:16px 24px; border-radius:40px; font-weight:800; font-size:15px; margin-bottom:14px; color:#fff;}
.big-pill.p1{background:linear-gradient(120deg,var(--blue-bright),#7b5fd4);}
.big-pill.p2{background:linear-gradient(120deg,#c95fd4,var(--gold-bright)); color:#ffffff;}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line); padding:56px 0 34px; background:var(--footer-bg); position:relative; z-index:2;}
.foot-grid{display:grid; grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr)); gap:44px 40px; align-items:start;}
.foot-brand-row{display:flex; align-items:center; gap:16px; margin-bottom:18px;}
.foot-brand-row img{width:auto; height:56px; max-width:120px; border-radius:0; object-fit:contain; flex:0 0 auto; box-shadow:none; filter:drop-shadow(0 6px 14px rgba(0,0,0,.4));}
.foot-brand{font-family:'Poppins'; font-weight:700; color:var(--cream); font-size:28px; line-height:1.1; letter-spacing:.2px;}
.foot-desc{color:var(--cream-dim); font-size:15px; line-height:1.7; max-width:44ch; margin-bottom:22px;}
.foot-ips{display:flex; flex-direction:column; gap:10px; align-items:flex-start;}
.foot-ip{display:inline-flex; align-items:center; gap:12px; flex-wrap:nowrap; padding:11px 12px 11px 18px; border-radius:18px; background:var(--field-bg); border:1px solid var(--line); max-width:100%;}
.foot-ip-tag{font-weight:800; font-size:10px; letter-spacing:.8px; text-transform:uppercase; color:var(--gold-bright); background:rgba(139,92,246,.15); padding:3px 9px; border-radius:12px;}
.foot-ip code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:15px; white-space:nowrap; font-weight:700; color:var(--cream);}
.foot-port-note{font-size:12.5px; color:var(--cream-dim); padding-left:6px;}
.foot-port-note b{color:var(--cream); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.foot-copy{appearance:none; border:0; cursor:pointer; font:inherit; font-size:11.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--cream-dim); background:transparent; padding:8px 10px; border-radius:10px; transition:color .2s ease, background .2s ease;}
.foot-copy:hover{color:var(--gold-bright); background:rgba(139,92,246,.12);}
.foot-copy:focus-visible,.foot-col a:focus-visible{outline:2px solid var(--gold-bright); outline-offset:3px;}
.foot-col{display:flex; flex-direction:column; align-items:flex-start; gap:4px;}
footer .foot-col h4{font-family:'Poppins'; font-size:13px; font-weight:800; letter-spacing:2px; text-transform:uppercase; margin-bottom:12px; background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--cream-dim); -webkit-text-fill-color:var(--cream-dim); animation:none; opacity:.9;}
.foot-col a{font-size:16.5px; font-weight:600; color:var(--cream); padding:7px 0; transition:color .2s ease, transform .2s ease;}
.foot-col a:hover{color:var(--gold-bright); transform:translateX(4px);}
.foot-bottom{margin-top:44px; border-top:1px solid var(--line); padding-top:22px; font-size:13.5px; color:var(--cream-dim); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; line-height:1.7;}
.foot-credit{color:var(--gold-bright); font-weight:700;}
.foot-credit:hover{text-decoration:underline;}
@media(max-width:900px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr));} .foot-brand-col{grid-column:1/-1;}}
@media(max-width:620px){
  footer{padding:44px 0 96px;}
  .foot-ip{gap:8px; padding:9px 8px 9px 12px;} .foot-ip code{font-size:13.5px;} .foot-copy{padding:8px 6px; letter-spacing:.8px;}
  .foot-grid{grid-template-columns:1fr; gap:34px;}
  .foot-brand{font-size:26px;}
  .foot-col a{font-size:18px; padding:9px 0;}
  .foot-col h4{margin-bottom:8px;}
  .foot-bottom{flex-direction:column; margin-top:34px;}
}

/* ---------- IMAGE PLACEHOLDERS (swap in real images later) ---------- */
.img-placeholder{border:2px dashed rgba(243,238,224,0.28); border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--cream-dim); background:rgba(255,255,255,0.03); font-family:'Poppins'; font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; text-align:center;}
.hero-bg-placeholder{position:absolute; inset:-24px -24px auto -24px; height:420px; z-index:-1; opacity:.35; border-radius:20px;}
.team-avatar.placeholder{background:none; border:2px dashed rgba(243,238,224,.3);}
.team-avatar.placeholder .ph-icon{font-size:22px; opacity:.6;}

/* ---------- STORE / DONATION RANKS ---------- */
.rank-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1040px; margin:0 auto 50px;}
@media(max-width:900px){.rank-grid{grid-template-columns:1fr; max-width:480px;}}
.rank-card{padding:28px 24px; border-radius:16px; border-top:3px solid var(--blue-bright); display:flex; flex-direction:column; position:relative;}
.rank-card.tier2{border-top-color:var(--blue-bright);}
.rank-card.tier3{border-top-color:#a86ff0; box-shadow:0 18px 50px rgba(0,0,0,.45), 0 0 40px rgba(168,111,240,.12);}
.rank-card.tier1{border-top-color:#5be36b;}
.rank-dot{width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:8px;}
.rank-dot.g{background:#5be36b;} .rank-dot.b{background:var(--blue-bright);} .rank-dot.p{background:#a86ff0;}

/* ---------- RANK CARD GLOW + SHINE ---------- */
/* Soft pulsing halo per tier, tuned to each card's accent color */
@keyframes rankPulseGreen{0%,100%{box-shadow:0 18px 50px rgba(0,0,0,.45), 0 0 0 rgba(91,227,107,0);}50%{box-shadow:0 18px 50px rgba(0,0,0,.45), 0 0 26px rgba(91,227,107,.28);}}
@keyframes rankPulseBlue{0%,100%{box-shadow:0 18px 50px rgba(0,0,0,.45), 0 0 0 rgba(90,168,236,0);}50%{box-shadow:0 18px 50px rgba(0,0,0,.45), 0 0 30px rgba(90,168,236,.32);}}
@keyframes rankPulsePurple{0%,100%{box-shadow:0 18px 50px rgba(0,0,0,.45), 0 0 40px rgba(168,111,240,.12);}50%{box-shadow:0 18px 50px rgba(0,0,0,.45), 0 0 46px rgba(168,111,240,.4);}}
.rank-card.tier1{box-shadow:0 18px 50px rgba(0,0,0,.4), 0 0 26px rgba(91,227,107,.2);}
.rank-card.tier2{box-shadow:0 18px 50px rgba(0,0,0,.4), 0 0 28px rgba(90,168,236,.22);}
.rank-card.tier3{box-shadow:0 18px 50px rgba(0,0,0,.4), 0 0 34px rgba(168,111,240,.28);}

/* Diagonal light sweep that glints across the card every few seconds — staggered per card so all three don't shine in unison.
   The resting position on both sides is pushed fully clear of the card (past the point where the band is visually clipped),
   so the sweep never appears to freeze mid-glint — it's either actively sweeping or fully off-card and invisible. */
.rank-shine{position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:inherit; z-index:1; container-type:size;}
.rank-card>*:not(.rank-shine):not(.rank-beam){position:relative; z-index:2;}
/* PREMIUM SHINE LINE — a thick, glossy diagonal bar of light that sweeps from the top-left corner to the bottom-right.
   Built from layers so it reads as "polished metal / gemstone" rather than a plain stripe:
     ::before = the bar itself  (white-hot centre -> rank colour -> soft edges, plus a gold-champagne rim on the leading edge)
     ::after  = a wide comet-tail of tinted light that follows it
   Both are tinted per rank (tier1 green, tier2 blue, tier3 purple) and only ever move with transform (GPU-friendly). */
.rank-shine::before, .rank-shine::after{
  content:''; position:absolute; inset:0; margin:auto; height:340cqh;
  --rk-c:255,255,255;
  will-change:transform;
}
.rank-shine::before{
  width:16px;
  background:
    linear-gradient(90deg,
      rgba(var(--rk-c),0) 0%,
      rgba(var(--rk-c),.55) 16%,
      rgba(var(--rk-c),1) 34%,
      #ffffff 47%,
      #fff6d6 53%,                 /* champagne-gold glint right behind the white core */
      rgba(var(--rk-c),1) 66%,
      rgba(var(--rk-c),.55) 84%,
      rgba(var(--rk-c),0) 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  filter:drop-shadow(0 0 6px rgba(var(--rk-c),.95)) drop-shadow(0 0 16px rgba(var(--rk-c),.7)) drop-shadow(0 0 30px rgba(190,160,255,.35));
  transform:translate(-72cqw,-72cqh) rotate(45deg);
  animation:rankLineSweep 4.2s cubic-bezier(.45,.05,.25,1) infinite;
}
.rank-shine::after{
  width:120px;
  background:linear-gradient(90deg,
      rgba(var(--rk-c),0),
      rgba(var(--rk-c),.08) 40%,
      rgba(var(--rk-c),.22) 75%,
      rgba(215,200,255,.34));
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  transform:translate(-72cqw,-72cqh) rotate(45deg) translateX(-68px);
  animation:rankTrailSweep 4.2s cubic-bezier(.45,.05,.25,1) infinite;
}
.rank-card.tier1 .rank-shine::before, .rank-card.tier1 .rank-shine::after{--rk-c:91,227,107; animation-delay:0s;}
.rank-card.tier2 .rank-shine::before, .rank-card.tier2 .rank-shine::after{--rk-c:90,168,236; animation-delay:1.4s;}
.rank-card.tier3 .rank-shine::before, .rank-card.tier3 .rank-shine::after{--rk-c:190,120,255; animation-delay:2.8s;}
@keyframes rankLineSweep{
  0%, 10%{transform:translate(-74cqw,-74cqh) rotate(45deg);}   /* parked off the top-left corner (invisible) */
  58%, 100%{transform:translate(74cqw,74cqh) rotate(45deg);}   /* gone past the bottom-right corner (invisible) */
}
@keyframes rankTrailSweep{
  0%, 10%{transform:translate(-74cqw,-74cqh) rotate(45deg) translateX(-68px);}
  58%, 100%{transform:translate(74cqw,74cqh) rotate(45deg) translateX(-68px);}
}
.rank-beam{display:none !important;}

/* ---------- RANK CARD BORDER GLITTER (traveling corner-to-corner light beam) ---------- */
/* A slim, colorful beam continuously travels around each card's border — passing along the
   top edge and down the left edge (top-left corner -> bottom-left corner) as part of its loop —
   staggered per tier so the three cards glitter at different moments. */
@property --rk-angle{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}
.rank-beam{
  position:absolute; inset:0; border-radius:inherit; z-index:1; pointer-events:none;
  padding:1.6px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:rkSpin 5.5s linear infinite;
}
.rank-card.tier1 .rank-beam{
  background:conic-gradient(from var(--rk-angle), transparent 0deg, transparent 266deg, #d9ffe0 298deg, #5be36b 314deg, rgba(91,227,107,.15) 333deg, transparent 350deg);
  animation-delay:0s;
}
.rank-card.tier2 .rank-beam{
  background:conic-gradient(from var(--rk-angle), transparent 0deg, transparent 266deg, #eaf4ff 298deg, var(--blue-bright) 314deg, rgba(90,168,236,.18) 333deg, transparent 350deg);
  animation-delay:1.8s;
}
.rank-card.tier3 .rank-beam{
  background:conic-gradient(from var(--rk-angle), transparent 0deg, transparent 256deg, #fff7e0 290deg, var(--gold-bright) 306deg, #a86ff0 326deg, rgba(168,111,240,.12) 344deg, transparent 360deg);
  animation-delay:3.6s;
}
@keyframes rkSpin{ to{ --rk-angle:360deg; } }
@supports not (background: conic-gradient(from 1deg, red, blue)){ .rank-beam{display:none;} }

@media (prefers-reduced-motion: reduce){
  .rank-card.tier1, .rank-card.tier2, .rank-card.tier3{animation:none;}
  .rank-shine::before, .rank-shine::after{animation:none; display:none;}
  .rank-beam{animation:none; display:none;}
}
.rank-name{font-family:'Poppins'; font-weight:800; font-size:18px; margin-bottom:2px;}
.rank-price{font-family:'Poppins'; font-weight:700; color:var(--gold-bright); font-size:22px; margin-bottom:18px;}
.rank-price span{font-size:12px; color:var(--cream-dim); font-weight:500;}
.perk-list{list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:22px; flex:1;}
.perk-list li{font-size:13.5px; color:var(--cream-dim); display:flex; gap:10px; align-items:flex-start; line-height:1.5;}
.perk-list li .icon{flex-shrink:0; margin-top:1px;}
/* all of a perk's words live in ONE flex item, so a long line (e.g. "1× Full Netherite Armor — Unenchanted") wraps as normal text
   under itself instead of splitting into separate misaligned columns */
.perk-text{flex:1; min-width:0; overflow-wrap:anywhere;}
.perk-list b{color:var(--cream);}
.rank-btn{padding:12px; border-radius:10px; font-weight:800; font-size:13.5px; text-align:center; background:linear-gradient(135deg,var(--blue-bright),var(--blue)); color:#fff; transition:transform .15s ease, box-shadow .15s ease; box-shadow:0 6px 18px rgba(46,111,181,.3);}
.rank-btn:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(46,111,181,.45);}
.rank-includes{max-width:1040px; margin:0 auto 34px; padding:20px 26px; border-radius:12px; text-align:center;}
.rank-includes p{font-size:13.5px; color:var(--cream-dim); margin-bottom:10px;}
.rank-includes ul{list-style:none; display:flex; gap:18px; flex-wrap:wrap; justify-content:center; font-size:12.5px; font-weight:700; color:var(--gold-bright);}

.terms-wrap{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px;}
.terms-block{padding:22px 24px; border-radius:12px;}
.terms-block h4{font-family:'Poppins'; font-size:14.5px; margin-bottom:10px; color:var(--gold-bright);}
.terms-block p, .terms-block li{font-size:13px; color:var(--cream-dim); margin-bottom:6px;}
.terms-block ul{padding-left:20px;}
.terms-block strong{color:var(--cream);}

.consent-form{max-width:640px; margin:50px auto 0; padding:30px; border-radius:14px;}
.consent-form h3{font-family:'Poppins'; font-size:18px; margin-bottom:10px;}
.consent-quote{font-size:13px; color:var(--cream-dim); font-style:italic; border-left:3px solid var(--blue-bright); padding-left:14px; margin-bottom:22px;}
.f-row{margin-bottom:16px;}
.f-row label{display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--cream-dim); margin-bottom:7px;}
.f-input{width:100%; background:var(--field-bg); border:1px solid var(--line); border-radius:8px; padding:12px 14px; color:var(--cream); font-size:14px; font-family:inherit;}
.f-input:focus{outline:none; border-color:var(--blue-bright);}
.rank-radios{display:flex; gap:10px; flex-wrap:wrap;}
.rank-radio{display:flex; align-items:center; gap:7px; padding:10px 14px; border-radius:8px; font-size:13px; cursor:pointer;}
.rank-radio input{accent-color:var(--blue-bright);}
.agree-row{display:flex; align-items:flex-start; gap:10px; font-size:12.5px; color:var(--cream-dim); margin:20px 0;}
.agree-row input{margin-top:3px; accent-color:var(--gold-bright);}
.form-submit{width:100%; padding:14px; border-radius:10px; font-weight:800; font-size:14.5px; background:linear-gradient(135deg,#9468ff,#6a3fe0); color:#ffffff; transition:transform .15s ease, box-shadow .15s ease; box-shadow:0 6px 20px rgba(139,92,246,.3);}
.form-submit:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(139,92,246,.45);}
.form-note{font-size:11.5px; color:var(--cream-dim); margin-top:10px; text-align:center;}
.consent-result{display:none; max-width:640px; margin:26px auto 0; padding:26px; border-radius:14px;}
.consent-result.show{display:block;}
.consent-result h4{color:var(--gold-bright); font-family:'Poppins'; margin-bottom:12px;}
.consent-result textarea{width:100%; min-height:170px; background:var(--field-bg); border:1px solid var(--line); border-radius:8px; padding:14px; color:var(--cream-dim); font-family:'Poppins'; font-size:12px; resize:vertical; margin-bottom:12px;}
.form-error{color:#ff8080; font-size:12.5px; margin-top:10px; display:none;}
.form-error.show{display:block;}

/* ---------- COOKIE / CONSENT POPUP ---------- */
.cookie-consent{
  position:fixed; left:20px; right:20px; bottom:-200px; z-index:95;
  max-width:760px; margin:0 auto; padding:22px 24px;
  border-radius:16px; border-top:3px solid var(--gold-bright);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  transition:bottom .5s cubic-bezier(.4,0,.2,1), opacity .4s, visibility .5s;
  opacity:0;
  /* Off-screen via bottom:-200px isn't enough on mobile: with the icon + text +
     two stacked buttons, the banner's real height often exceeds 200px, so part
     of it still pokes into the viewport while "hidden" and, sitting at z-index
     95 right over the scroll-to-top button, silently eats clicks meant for it.
     pointer-events:none (only re-enabled while .show) fixes that regardless of
     actual height. */
  pointer-events:none;
  visibility:hidden;
}
.cookie-consent.show{bottom:20px; opacity:1; pointer-events:auto; visibility:visible;}
.cookie-icon{width:44px; height:44px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(46,111,181,.3),rgba(139,92,246,.22));}
.cookie-icon .icon{width:22px; height:22px;}
.cookie-text{flex:1; min-width:220px;}
.cookie-text h4{font-family:'Poppins'; font-weight:800; font-size:14.5px; color:var(--cream); margin-bottom:5px;}
.cookie-text p{font-size:12.5px; color:var(--cream-dim); line-height:1.5;}
.cookie-actions{display:flex; gap:10px; flex-shrink:0;}
.cookie-btn{padding:11px 22px; border-radius:8px; font-weight:800; font-size:13px; white-space:nowrap;}
.cookie-btn.deny{background:rgba(243,238,224,.08); color:var(--cream-dim); border:1px solid var(--line);}
.cookie-btn.deny:hover{color:var(--cream); border-color:rgba(243,238,224,.3);}
.cookie-btn.allow{background:linear-gradient(135deg,var(--blue-bright),var(--gold-bright)); color:#0c1a30;}
@media(max-width:640px){ .cookie-consent{flex-direction:column; align-items:flex-start; text-align:left;} .cookie-actions{width:100%;} .cookie-btn{flex:1;} }

/* ---------- CUSTOM ICONS ---------- */
.icon{width:1.05em; height:1.05em; display:inline-block; vertical-align:-0.16em; object-fit:contain; flex-shrink:0;}
.icon-lg{width:26px; height:26px;}
.icon-sm{width:15px; height:15px; vertical-align:-0.12em;}

/* ---------- SOUND TOGGLE ---------- */
.sound-toggle{width:40px; height:40px; border-radius:8px; font-size:16px; display:flex; align-items:center; justify-content:center; gap:8px;}

/* ---------- CHANGELOG ---------- */
.changelog-list{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:18px;}
.changelog-card{padding:26px 28px; border-radius:14px;}
.changelog-top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px;}
.changelog-tag{font-size:10.5px; font-weight:800; letter-spacing:.6px; padding:5px 12px; border-radius:20px; color:var(--gold-bright); background:rgba(139,92,246,.14);}
.changelog-date{font-size:11.5px; color:var(--cream-dim); font-family:'Poppins';}
.changelog-title{font-family:'Poppins'; font-weight:700; font-size:17px; margin-bottom:12px;}
.changelog-body p{font-size:14px; color:var(--cream-dim); margin-bottom:12px;}
.changelog-body p:last-child{margin-bottom:0;}
.changelog-body b{color:var(--cream);}
.changelog-body code{background:rgba(90,168,236,.12); color:var(--blue-bright); padding:2px 6px; border-radius:4px; font-size:12.5px;}
.changelog-quote{border-left:3px solid var(--blue-bright); padding:4px 0 4px 14px; margin-bottom:12px; color:var(--gold-bright); font-size:13.5px; font-weight:600;}
.changelog-spoiler{background:rgba(255,255,255,.08); color:transparent; border-radius:4px; padding:2px 8px; cursor:pointer; transition:.15s; user-select:none;}
.changelog-spoiler.revealed{background:rgba(90,168,236,.1); color:var(--cream-dim); cursor:text;}
.changelog-empty{padding:60px 24px; text-align:center; color:var(--cream-dim); font-size:14px;}

/* ---------- SCROLL TO TOP (wrap + progress ring) ---------- */
.scroll-top-wrap{position:fixed; bottom:26px; right:22px; width:56px; height:56px; z-index:70; opacity:0; pointer-events:none; transition:opacity .25s ease, bottom .3s ease;}
.scroll-top-wrap.show{opacity:1; pointer-events:auto;}
.scroll-ring{position:absolute; inset:0; width:56px; height:56px; transform:rotate(-90deg); pointer-events:none;}
.ring-track{fill:none; stroke:rgba(243,238,224,.14); stroke-width:3;}
.ring-fill{fill:none; stroke:var(--gold-bright); stroke-width:3; stroke-linecap:round; transition:stroke-dashoffset .12s linear;}
.scroll-top{position:absolute; inset:4px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--blue-bright),var(--gold-bright)); box-shadow:0 8px 24px rgba(0,0,0,.4); transition:transform .15s ease;}
.scroll-top:hover{transform:scale(1.06);}
.scroll-top:active{transform:scale(.92);}
.scroll-top svg{width:20px; height:20px;}
@media (prefers-reduced-motion: reduce){ .scroll-top-wrap{transition:none;} }

/* =========================================================================
   NEW: 3D MORPHISM — tilt cards, specular glare, floating cubes,
   command palette, pinned favorites, confetti burst.
   ========================================================================= */

/* ---------- 3D TILT CARDS ---------- */
.tilt{
  transform: perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--ts,1));
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.tilt:hover{will-change:transform;}
.tilt-glare{
  position:absolute !important; inset:0; z-index:6 !important; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .3s ease;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.14), transparent 45%);
}
.tilt:hover .tilt-glare{opacity:1;}
@media (prefers-reduced-motion: reduce){ .tilt{transition:none; transform:none !important;} }

/* ---------- FLOATING 3D CUBES (hero decoration) ---------- */
.hero{position:relative;}
.floaty-cubes{position:absolute; inset:0; overflow:visible; pointer-events:none; z-index:0;}
.cube3d{position:absolute; width:46px; height:46px;}
.cube3d .f{position:absolute; inset:0;}
.cube3d .top{background:linear-gradient(135deg,#9468ff,#6a3fe0); clip-path:polygon(50% 0%,100% 25%,50% 50%,0% 25%); top:-25%; opacity:.55;}
.cube3d .left{background:linear-gradient(135deg,var(--blue),var(--blue-bright)); clip-path:polygon(0% 25%,50% 50%,50% 100%,0% 75%); opacity:.42;}
.cube3d .right{background:linear-gradient(135deg,var(--blue-bright),#7b5fd4); clip-path:polygon(50% 50%,100% 25%,100% 75%,50% 100%); opacity:.5;}
.cube-a{top:8%; left:6%; animation:cubeFloat 7s ease-in-out infinite;}
.cube-b{top:62%; right:9%; width:34px; height:34px; animation:cubeFloat 8.5s ease-in-out infinite; animation-delay:.8s;}
.cube-c{top:16%; right:18%; width:26px; height:26px; animation:cubeFloat 6.5s ease-in-out infinite reverse; animation-delay:1.6s;}
@keyframes cubeFloat{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-18px) rotate(8deg);}}
@media (prefers-reduced-motion: reduce){ .cube3d{animation:none;} }
@media(max-width:640px){ .floaty-cubes{display:none;} }

/* ---------- COMMAND PALETTE TRIGGER (nav) ---------- */
.cmdk-trigger{height:40px; padding:0 12px; border-radius:8px; display:flex; align-items:center; gap:8px; color:var(--cream-dim); font-size:12px; font-weight:700;}
.cmdk-trigger:hover{color:var(--blue-bright);}
.cmdk-kbd{font-family:'Poppins'; font-size:10.5px; padding:2px 6px; border-radius:5px; background:rgba(255,255,255,.08); border:1px solid var(--line); color:var(--cream-dim);}
@media(max-width:900px){ .cmdk-kbd{display:none;} .cmdk-trigger{width:40px; padding:0; justify-content:center;} }

/* ---------- COMMAND PALETTE MODAL ---------- */
.cmdk-overlay{position:fixed; inset:0; z-index:120; display:none; align-items:flex-start; justify-content:center; padding-top:12vh; background:var(--overlay-bg); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
.cmdk-overlay.show{display:flex;}
.cmdk-box{width:100%; max-width:560px; margin:0 20px; border-radius:16px; padding:8px; max-height:70vh; display:flex; flex-direction:column;}
.cmdk-input-row{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); color:var(--cream-dim);}
.cmdk-input{flex:1; background:none; border:none; color:var(--cream); font-size:15px; font-family:inherit;}
.cmdk-input:focus{outline:none;}
.cmdk-results{overflow-y:auto; padding:8px;}
.cmdk-item{display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:10px; cursor:pointer; font-size:14px; color:var(--cream-dim);}
.cmdk-item.active, .cmdk-item:hover{background:rgba(90,168,236,.14); color:var(--cream);}
.cmdk-tag{font-size:9.5px; font-weight:800; letter-spacing:.4px; padding:3px 8px; border-radius:12px; background:rgba(46,111,181,.2); color:var(--blue-bright); flex-shrink:0;}
.cmdk-tag.item{background:rgba(139,92,246,.18); color:var(--gold-bright);}
.cmdk-label{flex:1;}
.cmdk-price{font-family:'Poppins'; font-size:12.5px; color:var(--gold-bright); font-weight:700;}
.cmdk-empty{padding:30px; text-align:center; color:var(--cream-dim); font-size:13.5px;}
.cmdk-hint{display:flex; gap:16px; padding:10px 16px; border-top:1px solid var(--line); font-size:11px; color:var(--cream-dim); opacity:.75;}
@media(max-width:520px){ .cmdk-hint span:nth-child(2){display:none;} }

/* ---------- WORTH CHECKER: PINNED FAVORITES ---------- */
.fav-star{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin-right:8px; border-radius:6px; color:var(--cream-dim); vertical-align:-5px; transition:color .15s ease, transform .15s ease;}
.fav-star:hover{color:var(--gold-bright); transform:scale(1.15);}
.fav-star.active{color:var(--gold-bright);}

/* ---------- CONFETTI BURST ---------- */
.confetti-piece{position:fixed; width:7px; height:7px; border-radius:2px; pointer-events:none; z-index:200; animation:confettiPop .7s ease-out forwards;}
@keyframes confettiPop{0%{transform:translate(0,0) rotate(0deg); opacity:1;}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)); opacity:0;}}
@media (prefers-reduced-motion: reduce){ .confetti-piece{display:none;} }

/* ---------- PERFORMANCE OVERRIDES ----------
   Infinite animations that repaint every frame (background-position on gradient text, drifting
   full-screen glows, the Discord button's gradient flow) forced every translucent panel on the
   page to be re-composited constantly, which is what made pages laggy. They're now static;
   only the hero headline keeps its gradient flow. */
.orb{animation:none !important;}
.stat-num{animation:none !important;}
.discord-cta::before{animation:none !important;}
.discord-cta::after{transition:transform .6s ease;}
.discord-cta:hover::after{transform:translateX(420%) skewX(-20deg);}
.cookie-consent, .cmdk-box{background:var(--panel-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);}

/* ---------- SKELETON LOADERS (theme-aware shimmer) ---------- */
.skeleton{position:relative; overflow:hidden; background:var(--skeleton-base); border-radius:8px; display:block;}
.skeleton::after{content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, var(--skeleton-shine), transparent); animation:skeletonShimmer 1.4s ease-in-out infinite;}
@keyframes skeletonShimmer{100%{transform:translateX(100%);}}
.sk-line{height:12px;}
.sk-pill{height:22px; width:90px; border-radius:20px;}
.sk-avatar{width:64px; height:64px; border-radius:12px; margin:0 auto 12px;}
.sk-name{height:16px; width:60%; margin:0 auto 16px;}
.sk-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:8px;}
.sk-stat{height:52px; border-radius:10px;}
.skeleton-row td{padding:14px 16px;}
@media (prefers-reduced-motion: reduce){ .skeleton::after{animation:none;} }

/* ---------- ELECTRIC BLUE + PURPLE ANIMATED HEADINGS (every heading on the site) ----------
   One seamless, looping gradient (first colour == last colour) slid along the text with a linear timing,
   so it flows continuously with no jump or "bounce". Headings scrolled off-screen are paused by js/main.js
   (class .hg-paused) so it costs nothing while you're not looking at them. */
:root{--eg-1:#00e5ff; --eg-2:#2f8bff; --eg-3:#7c4dff; --eg-4:#c266ff;}

@keyframes headingFlow{ from{background-position:0% 50%;} to{background-position:200% 50%;} }
h1, h2, h3, h4, .rank-name, .grad-text, .type-grad, .section-head h2, .community-card h2{
  background-image:linear-gradient(100deg,var(--eg-1) 0%,var(--eg-2) 18%,var(--eg-3) 36%,var(--eg-4) 50%,var(--eg-3) 64%,var(--eg-2) 82%,var(--eg-1) 100%);
  background-size:200% 100%;
  background-repeat:repeat-x;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:headingFlow 7s linear infinite;
}
.hg-paused{ animation-play-state:paused !important; }
.head-rule{ background:linear-gradient(90deg,var(--eg-1),var(--eg-3),var(--eg-4)); box-shadow:0 0 12px rgba(80,130,255,.55); }
@media (prefers-reduced-motion: reduce){
  h1, h2, h3, h4, .rank-name, .grad-text, .type-grad{ animation:none; background-size:100% 100%; }
}

/* =========================================================================
   PLAYERS — "Hall of Legends"
   Leaderboards (Money / Shards / Playtime / Kills / Deaths) + "All players"
   holo-card view. Skin heads are cropped straight from each player's skin
   texture (face + hat layer), so no avatar service is needed.

   Design language
   - One accent colour per category (data-metric on #page-players) that drives
     tabs, podium values, bars and the ambient glow, and cross-fades on switch.
   - Podium with real pedestals, rotating-gold ring + light beam for #1.
   - Pointer-follow spotlight on rows, holographic foil on player cards.
   - Everything animated is transform/opacity only, and switched off for
     prefers-reduced-motion.
   ========================================================================= */
.page [hidden]{display:none !important;}

@property --pl-a  { syntax:'<color>'; inherits:true; initial-value:#f5cd6b; }
@property --pl-a2 { syntax:'<color>'; inherits:true; initial-value:#ff8f3c; }
@property --pod-ang { syntax:'<angle>'; inherits:false; initial-value:0deg; }

:root{ --lb-accent:var(--gold-bright); --lb-gold:#f5cd6b; --lb-silver:#c7d0de; --lb-bronze:#d99560; }

#page-players{
  position:relative;
  --pl-a:#f5cd6b; --pl-a2:#ff8f3c; --pl-on:#0a1020;
  --pl-glow:rgba(245,205,107,.42);
  --pl-row:rgba(255,255,255,.04); --pl-row-hover:rgba(255,255,255,.075);
  --pl-card:rgba(9,16,32,.58); --pod-bg:rgba(9,16,32,.70);
  --pl-grid-line:rgba(255,255,255,.055);
  transition:--pl-a .6s ease, --pl-a2 .6s ease;
}
@supports (background: color-mix(in srgb, red, blue)){
  #page-players{ --pl-glow:color-mix(in srgb, var(--pl-a) 42%, transparent); }
}
#page-players[data-metric="money"]   { --pl-a:#f5cd6b; --pl-a2:#ff9a3d; }
#page-players[data-metric="shards"]  { --pl-a:#56dcff; --pl-a2:#7d8cff; }
#page-players[data-metric="playtime"]{ --pl-a:#52f0b6; --pl-a2:#2fb6ff; }
#page-players[data-metric="kills"]   { --pl-a:#ff7b7b; --pl-a2:#ffa04d; }
#page-players[data-metric="deaths"]  { --pl-a:#bd94ff; --pl-a2:#ff6fd0; }
#page-players[data-metric="cards"]   { --pl-a:#6fb4ff; --pl-a2:#b58bff; }

#page-players > *:not(.pl-ambient){ position:relative; z-index:1; }
.pl-ic{display:block; width:1em; height:1em; flex:0 0 auto;}

/* ---------- ambient backdrop (grid + drifting glow orbs) ---------- */
.pl-ambient{position:absolute; left:-40px; right:-40px; top:-60px; height:820px; z-index:0; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);}
.pl-grid{position:absolute; inset:0;
  background-image:linear-gradient(var(--pl-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--pl-grid-line) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 24%,#000,transparent 75%); mask-image:radial-gradient(ellipse 60% 70% at 50% 24%,#000,transparent 75%);}
.pl-orb{position:absolute; border-radius:50%; will-change:transform; opacity:.5;}
.pl-orb.o1{width:460px; height:460px; left:6%;  top:120px; background:radial-gradient(circle,var(--pl-a),transparent 68%);  animation:plDrift1 20s ease-in-out infinite;}
.pl-orb.o2{width:420px; height:420px; right:4%; top:60px;  background:radial-gradient(circle,var(--pl-a2),transparent 68%); animation:plDrift2 24s ease-in-out infinite;}
.pl-orb.o3{width:360px; height:360px; left:38%; top:340px; background:radial-gradient(circle,var(--pl-a),transparent 70%);  animation:plDrift3 28s ease-in-out infinite; opacity:.28;}

@keyframes plDrift1{0%,100%{transform:translate(0,0);}50%{transform:translate(60px,40px);}}
@keyframes plDrift2{0%,100%{transform:translate(0,0);}50%{transform:translate(-70px,50px);}}
@keyframes plDrift3{0%,100%{transform:translate(0,0);}50%{transform:translate(40px,-50px);}}

/* ---------- "server at a glance" strip ---------- */
.pl-stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 16px;}
.pl-stat{--k:#6fb4ff; --k2:#b58bff; display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:18px; background:var(--pl-card); border:1px solid var(--glass-border);
  box-shadow:0 10px 30px var(--shadow-soft); position:relative; overflow:hidden; min-width:0;
  animation:plRise .6s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:calc(var(--i,0) * 70ms + 60ms);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease;}
.pl-stat::before{content:''; position:absolute; inset:0; background:radial-gradient(220px circle at 0% 0%, color-mix(in srgb, var(--k) 20%, transparent), transparent 70%); pointer-events:none;}
.pl-stat:hover{transform:translateY(-3px); border-color:color-mix(in srgb, var(--k) 55%, transparent);}
.pl-stat[data-k="money"]   {--k:#f5cd6b; --k2:#ff9a3d;}
.pl-stat[data-k="playtime"]{--k:#52f0b6; --k2:#2fb6ff;}
.pl-stat[data-k="kills"]   {--k:#ff7b7b; --k2:#ffa04d;}

.pl-stat-ic{position:relative; display:grid; place-items:center; width:44px; height:44px; flex:0 0 auto; border-radius:14px; font-size:22px; color:var(--pl-on);
  background:linear-gradient(135deg,var(--k),var(--k2)); box-shadow:0 6px 18px color-mix(in srgb, var(--k) 45%, transparent);}
.pl-stat-txt{position:relative; display:flex; flex-direction:column; min-width:0;}
.pl-stat-v{font-size:22px; font-weight:800; line-height:1.15; color:var(--cream); font-variant-numeric:tabular-nums; letter-spacing:.2px;}
.pl-stat-l{font-size:10.5px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--cream-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* ---------- toolbar ---------- */
.lb-toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:10px; margin-bottom:18px; border-radius:20px;}
.pl-search{position:relative; display:block; flex:1; min-width:220px;}
.pl-search-ic{position:absolute; left:15px; top:50%; transform:translateY(-50%); font-size:18px; color:var(--cream-dim); pointer-events:none; transition:color .2s ease;}
.pl-search:focus-within .pl-search-ic{color:var(--pl-a);}
#page-players .pl-search .search-box{width:100%; min-width:0; padding:13px 16px 13px 44px; border-radius:14px; font-size:14px; transition:border-color .2s ease, box-shadow .2s ease;}
#page-players .pl-search .search-box:focus{border-color:var(--pl-a) !important; box-shadow:0 0 0 4px var(--pl-glow) !important;}
#page-players .sort-select{appearance:none; -webkit-appearance:none; padding:13px 40px 13px 16px; border-radius:14px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--cream-dim) 50%), linear-gradient(135deg,var(--cream-dim) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat;}
#page-players .sort-select:focus{border-color:var(--pl-a) !important; box-shadow:0 0 0 4px var(--pl-glow) !important;}

/* ---------- segmented controls with a sliding highlight ---------- */
.seg{position:relative; display:inline-flex; gap:2px; padding:4px; border-radius:16px; background:var(--field-bg); border:1px solid var(--line);}
.seg-btn{position:relative; z-index:1; appearance:none; border:0; cursor:pointer; font:inherit; font-size:13px; font-weight:700; color:var(--cream-dim); background:transparent; padding:10px 16px; border-radius:12px;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap; transition:color .22s ease, background .22s ease, box-shadow .22s ease;}
.seg-btn .pl-ic{font-size:16px; transition:transform .3s cubic-bezier(.3,1.5,.5,1);}
.seg-btn:hover{color:var(--cream);}
.seg-btn:hover .pl-ic{transform:scale(1.15) rotate(-6deg);}
.seg-btn[aria-pressed="true"]{color:var(--pl-on); background:linear-gradient(135deg,var(--pl-a),var(--pl-a2)); box-shadow:0 6px 20px var(--pl-glow);}
.seg-btn:focus-visible,.lb-more-btn:focus-visible{outline:2px solid var(--pl-a); outline-offset:2px;}
.seg-glider{position:absolute; z-index:0; top:4px; bottom:4px; left:0; width:var(--gl-w,0px); transform:translateX(var(--gl-x,0px)); border-radius:12px; opacity:0;
  background:linear-gradient(135deg,var(--pl-a),var(--pl-a2)); box-shadow:0 6px 22px var(--pl-glow);
  transition:transform .42s cubic-bezier(.3,1.25,.4,1), width .42s cubic-bezier(.3,1.25,.4,1), opacity .2s ease;}
.seg.has-glider .seg-glider{opacity:1;}
.seg.has-glider .seg-btn[aria-pressed="true"]{background:transparent; box-shadow:none;}

.lb-metrics{display:flex; margin-bottom:22px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:2px 2px 8px;}
.lb-metrics::-webkit-scrollbar{display:none;}
.lb-metrics .seg{flex:0 0 auto; margin:0 auto;}
.lb-metrics .seg-btn{padding:12px 20px; font-size:14px;}

.lb-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:0 4px 4px;}
#page-players .lb-head h3{display:flex; align-items:center; gap:10px; font-size:19px; font-weight:800;
  background-image:linear-gradient(100deg,var(--pl-a),var(--pl-a2)); background-size:100% 100%; animation:none;}
.lb-head-ic{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:10px; font-size:17px; color:var(--pl-on); -webkit-text-fill-color:currentColor;
  background:linear-gradient(135deg,var(--pl-a),var(--pl-a2)); box-shadow:0 6px 16px var(--pl-glow);}
.lb-head > span{font-size:12.5px; color:var(--cream-dim);}

/* ---------- PODIUM ---------- */
.lb-podium{display:grid; grid-template-columns:1fr 1.16fr 1fr; gap:16px; align-items:end; margin:14px 0 22px; padding-top:44px;}
.lb-podium::after{content:''; position:absolute; left:6%; right:6%; bottom:-16px; height:30px; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at center,var(--pl-glow),transparent 70%); filter:blur(10px);}
.lb-pod{--medal:var(--lb-gold); --medal-rgb:245,205,107; --step-h:112px; --av:76px;
  position:relative; display:flex; flex-direction:column; min-width:0;
  animation:podRise .85s cubic-bezier(.2,.9,.25,1) backwards; animation-delay:calc(var(--i,0) * 130ms + 80ms);}
.lb-pod.p2{--medal:var(--lb-silver); --medal-rgb:199,208,222; --step-h:80px; --av:68px;}
.lb-pod.p3{--medal:var(--lb-bronze); --medal-rgb:217,149,96;  --step-h:58px; --av:68px;}
.lb-pod.p1{--av:92px;}

/* champion's light beam */
.lb-pod.p1::before{content:''; position:absolute; left:50%; top:-160px; width:min(440px,130%); height:430px; transform:translateX(-50%); z-index:0; pointer-events:none;
  clip-path:polygon(40% 0,60% 0,100% 100%,0 100%); filter:blur(7px);
  background:linear-gradient(180deg,rgba(var(--medal-rgb),.34),rgba(var(--medal-rgb),0) 88%);
  animation:beamPulse 5s ease-in-out infinite;}

.pod-card{position:relative; z-index:1; text-align:center; padding:28px 14px 20px; border-radius:24px 24px 0 0;
  background:linear-gradient(180deg,rgba(var(--medal-rgb),.20),var(--pod-bg) 62%);
  border:1px solid rgba(var(--medal-rgb),.5); border-bottom:0;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 -10px 40px rgba(var(--medal-rgb),.13), inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;}
.lb-pod:hover .pod-card{transform:translateY(-6px); box-shadow:0 -14px 50px rgba(var(--medal-rgb),.28), inset 0 1px 0 rgba(255,255,255,.2);}
.lb-pod.p1 .pod-card{padding:34px 16px 24px; border-radius:28px 28px 0 0; border-color:transparent;}
/* rotating gold ring around #1 */
.lb-pod.p1 .pod-card::before{content:''; position:absolute; inset:-2px -2px 0 -2px; border-radius:30px 30px 0 0; padding:2px; pointer-events:none;
  background:conic-gradient(from var(--pod-ang),rgba(var(--medal-rgb),.15) 0deg,rgba(var(--medal-rgb),1) 70deg,#fff8dc 100deg,rgba(var(--medal-rgb),1) 130deg,rgba(var(--medal-rgb),.15) 220deg,rgba(var(--medal-rgb),.15) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation:podSpin 5s linear infinite;}

/* pointer spotlight */
.pod-card::after{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(var(--medal-rgb),.24),transparent 65%);}
.lb-pod:hover .pod-card::after{opacity:1;}

.pod-crown{position:absolute; left:50%; top:-34px; width:52px; height:52px; font-size:52px; color:var(--medal); z-index:2; pointer-events:none;
  transform:translateX(-50%); filter:drop-shadow(0 0 12px rgba(var(--medal-rgb),.85)) drop-shadow(0 4px 6px rgba(0,0,0,.35));
  animation:crownFloat 3.2s ease-in-out infinite;}
.pod-sparks{position:absolute; inset:0; pointer-events:none;}
.pod-sparks i{position:absolute; bottom:44%; width:5px; height:5px; border-radius:50%; background:var(--medal); box-shadow:0 0 10px 2px rgba(var(--medal-rgb),.85); opacity:0; animation:sparkUp 3.4s ease-in infinite;}
.pod-sparks i:nth-child(1){left:8%;  animation-delay:.0s; animation-duration:3.6s;}
.pod-sparks i:nth-child(2){left:22%; animation-delay:1.1s; width:4px; height:4px;}
.pod-sparks i:nth-child(3){left:36%; animation-delay:2.2s; animation-duration:4s;}
.pod-sparks i:nth-child(4){left:52%; animation-delay:.6s;  width:3px; height:3px;}
.pod-sparks i:nth-child(5){left:66%; animation-delay:1.7s; animation-duration:3.8s;}
.pod-sparks i:nth-child(6){left:80%; animation-delay:2.8s; width:4px; height:4px;}
.pod-sparks i:nth-child(7){left:92%; animation-delay:.9s;  animation-duration:4.2s;}

.pod-avatar{--hs:var(--av); position:relative; width:var(--av); height:var(--av); margin:0 auto 14px;}
.pod-avatar::before{content:''; position:absolute; inset:-7px; border-radius:calc(var(--av)/4.4); border:2px solid rgba(var(--medal-rgb),.9);
  box-shadow:0 0 26px rgba(var(--medal-rgb),.5), inset 0 0 16px rgba(var(--medal-rgb),.3);}
.lb-pod.p1 .pod-avatar::after{content:''; position:absolute; inset:-7px; border-radius:calc(var(--av)/4.4); border:2px solid rgba(var(--medal-rgb),.8); animation:ringPulse 2.6s ease-out infinite;}
.lb-pod.p1 .pod-avatar{animation:avatarBob 4s ease-in-out infinite;}
.pod-avatar .head,.pod-avatar .head-fallback{--hs:var(--av); border-radius:calc(var(--av)/5);}
.pod-card .lb-name{display:block; max-width:100%; font-weight:800; font-size:16px; color:var(--cream); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lb-pod.p1 .pod-card .lb-name{font-size:19px;}
.pod-card .lb-tag{margin-left:6px;}
.pod-val{display:block; margin-top:6px;}
.pod-val .lb-val{display:block; min-width:0; text-align:center; font-size:clamp(22px,3vw,30px); font-weight:800; line-height:1.15; font-variant-numeric:tabular-nums;
  background-image:linear-gradient(135deg,var(--pl-a),var(--pl-a2)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px var(--pl-glow));}
.lb-pod.p1 .pod-val .lb-val{font-size:clamp(26px,3.6vw,38px);}
.pod-val .lb-unit{display:block; margin-top:2px; font-size:10.5px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; color:var(--cream-dim);}

.pod-step{position:relative; z-index:1; display:grid; place-items:center; height:var(--step-h); overflow:hidden;
  background:linear-gradient(180deg,rgba(var(--medal-rgb),.42),rgba(var(--medal-rgb),.12) 62%,rgba(var(--medal-rgb),.05));
  border:1px solid rgba(var(--medal-rgb),.5); border-top:2px solid var(--medal);
  animation:stepWipe .9s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:calc(var(--i,0) * 130ms + 320ms);}
.pod-step::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 2px,transparent 2px 15px);}
.pod-step::after{content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; pointer-events:none; transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); animation:stepShine 6s ease-in-out infinite; animation-delay:calc(var(--i,0) * 1.2s + 1s);}
.pod-step .lb-place{position:relative; font-weight:800; font-size:clamp(44px,6.4vw,74px); line-height:1; letter-spacing:-1px;
  background-image:linear-gradient(180deg,rgba(var(--medal-rgb),1),rgba(var(--medal-rgb),.16)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 10px rgba(var(--medal-rgb),.35));}
.lb-pod.p1 .pod-step{border-left-color:rgba(var(--medal-rgb),.7); border-right-color:rgba(var(--medal-rgb),.7);}

/* ---------- RANKED LIST ---------- */
.lb-list{list-style:none; display:flex; flex-direction:column; gap:8px; padding:0; margin:0; background:none; border:0; box-shadow:none;}
.lb-row{position:relative; display:grid; grid-template-columns:48px 44px minmax(0,1.2fr) minmax(90px,1fr) auto; align-items:center; gap:14px; padding:9px 20px 9px 12px; border-radius:16px;
  background:var(--pl-row); border:1px solid var(--line); overflow:hidden; isolation:isolate;
  animation:rowIn .55s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:calc(var(--i,0) * 38ms);
  transition:transform .28s cubic-bezier(.2,.8,.2,1), border-color .25s ease, background .25s ease, box-shadow .25s ease;}
.lb-row.seen{animation:none;}
.lb-row::before{content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .25s ease;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),var(--pl-glow),transparent 62%);}
.lb-row::after{content:''; position:absolute; left:0; top:16%; bottom:16%; width:4px; border-radius:0 4px 4px 0; transform:scaleY(0); transition:transform .3s cubic-bezier(.3,1.4,.5,1);
  background:linear-gradient(180deg,var(--pl-a),var(--pl-a2)); box-shadow:0 0 14px var(--pl-glow);}
.lb-row:hover{transform:translateX(5px); background:var(--pl-row-hover); border-color:var(--pl-a); box-shadow:0 12px 30px var(--shadow-soft), 0 0 0 1px var(--pl-glow);}
.lb-row:hover::before{opacity:1;}
.lb-row:hover::after{transform:scaleY(1);}
.lb-rank{display:grid; place-items:center;}
.lb-rank b{display:grid; place-items:center; min-width:38px; height:38px; padding:0 6px; border-radius:12px; font-size:14px; font-weight:800; color:var(--cream-dim); background:var(--field-bg); border:1px solid var(--line); font-variant-numeric:tabular-nums;}
.lb-row.elite .lb-rank b{color:var(--pl-a); border-color:var(--pl-a); background:var(--pl-glow); box-shadow:0 0 16px var(--pl-glow);}
.lb-row.top .lb-rank b{color:var(--pl-on); border-color:transparent; background:linear-gradient(135deg,var(--lb-gold),var(--lb-bronze));}
.lb-row .head,.lb-row .head-fallback{--hs:42px; transition:transform .3s cubic-bezier(.3,1.5,.5,1);}
.lb-row:hover .head,.lb-row:hover .head-fallback{transform:scale(1.1) rotate(-3deg);}
.lb-row .lb-name{font-weight:700; font-size:14.5px; color:var(--cream); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lb-tag{display:inline-block; margin-left:8px; padding:2px 8px; border-radius:20px; font-size:10px; font-weight:800; letter-spacing:.3px; vertical-align:middle; background:rgba(90,168,236,.18); color:var(--blue-bright);}

#page-players mark{background:var(--pl-glow); color:inherit; border-radius:4px; padding:0 2px; box-shadow:0 0 0 1px var(--pl-glow);}
.lb-bar{position:relative; height:8px; border-radius:8px; background:var(--skeleton-base); overflow:hidden;}
.lb-bar i{position:relative; display:block; height:100%; width:var(--pct,0%); min-width:3px; border-radius:8px; overflow:hidden; transform-origin:left center;
  background:linear-gradient(90deg,var(--pl-a2),var(--pl-a)); box-shadow:0 0 12px var(--pl-glow);
  animation:barGrow 1s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:calc(var(--i,0) * 38ms + 220ms);}
.lb-row.seen .lb-bar i{animation:none;}
.lb-row.elite .lb-bar i::after{content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); animation:barShine 3.4s ease-in-out infinite; animation-delay:calc(var(--i,0) * 160ms + 1.4s);}
.lb-row .lb-val{font-weight:800; font-size:15px; color:var(--pl-a); text-align:right; font-variant-numeric:tabular-nums; min-width:84px;}

.lb-more{display:flex; justify-content:center; margin-top:22px;}
.lb-more-btn{appearance:none; cursor:pointer; font:inherit; font-weight:800; font-size:13.5px; color:var(--cream); padding:13px 30px; border-radius:16px; background:var(--field-bg); border:1px solid var(--glass-border);
  transition:border-color .2s ease, transform .15s ease, box-shadow .25s ease;}
.lb-more-btn:hover{border-color:var(--pl-a); transform:translateY(-2px); box-shadow:0 10px 26px var(--shadow-soft), 0 0 0 4px var(--pl-glow);}
.lb-more-btn:active{transform:scale(.97);}

/* ---------- SKIN HEADS ---------- */
.head{position:relative; display:block; width:var(--hs,40px); height:var(--hs,40px); flex:0 0 auto; overflow:hidden; border-radius:calc(var(--hs,40px)/5); background:rgba(90,168,236,.16); box-shadow:0 4px 12px rgba(0,0,0,.3);}
.head img{position:absolute; width:800%; height:auto; max-width:none; image-rendering:pixelated; user-select:none; -webkit-user-drag:none;}
.head .h-face{left:-100%; top:-100%;}
.head .h-hat{left:-500%; top:-100%;}
.head img.h-flat{width:100%; left:0; top:0;}
.head::after{content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg,rgba(255,255,255,.24),transparent 42%);}
.head-fallback{display:flex; align-items:center; justify-content:center; width:var(--hs,40px); height:var(--hs,40px); flex:0 0 auto; border-radius:calc(var(--hs,40px)/5); font-weight:800; font-size:calc(var(--hs,40px)*.36); color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.35);
  background:linear-gradient(135deg,hsl(var(--h,215) 78% 52%),hsl(calc(var(--h,215) + 48) 82% 46%)); box-shadow:0 4px 12px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.3);}

/* ---------- ALL PLAYERS: holo cards ---------- */
.player-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(262px,1fr)); gap:18px; padding:0; background:none; border:0; box-shadow:none;}
.player-card{--h:215; position:relative; display:flex; flex-direction:column; gap:14px; padding:18px; border-radius:24px; text-align:left; overflow:hidden; isolation:isolate;
  background:var(--pl-card); background:linear-gradient(160deg,hsl(var(--h) 90% 62% / .14),transparent 46%), var(--pl-card);
  border:1px solid var(--glass-border);
  box-shadow:0 12px 34px var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.1);
  animation:cardIn .65s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:calc(var(--i,0) * 45ms);
  transition:border-color .3s ease, box-shadow .3s ease;}
.player-card.seen{animation:none;}
.player-card > *{position:relative; z-index:1;}
.player-card::before{content:''; position:absolute; right:-40px; top:-40px; width:150px; height:150px; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle,hsl(var(--h) 95% 62% / .28),transparent 68%); opacity:.7; transition:opacity .3s ease, transform .5s ease;}
.player-card::after{content:''; position:absolute; inset:0; z-index:3; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s ease;
  background:linear-gradient(115deg,transparent 18%,hsl(var(--h) 100% 72% / .30) 34%,hsl(calc(var(--h) + 80) 100% 72% / .30) 50%,hsl(calc(var(--h) + 160) 100% 72% / .26) 66%,transparent 82%);
  background-size:260% 260%; background-position:var(--gx,50%) var(--gy,50%);}
.player-card:hover{border-color:hsl(var(--h) 90% 66% / .6); box-shadow:0 22px 50px rgba(0,0,0,.4), 0 0 44px hsl(var(--h) 90% 56% / .22), inset 0 1px 0 rgba(255,255,255,.16);}
.player-card:hover::before{opacity:1; transform:scale(1.25);}
.player-card:hover::after{opacity:.6;}

.pc-top{display:flex; align-items:center; gap:14px; min-width:0;}
.pc-avatar{--hs:62px; flex:0 0 auto; padding:3px; border-radius:calc(var(--hs)/5 + 3px);
  background:conic-gradient(from var(--pod-ang),hsl(var(--h) 95% 64%),hsl(calc(var(--h) + 70) 95% 64%),hsl(calc(var(--h) + 140) 95% 64%),hsl(var(--h) 95% 64%));
  box-shadow:0 8px 24px hsl(var(--h) 90% 55% / .38);}
.player-card:hover .pc-avatar{animation:podSpin 3s linear infinite;}
.pc-avatar .head,.pc-avatar .head-fallback{--hs:62px; box-shadow:none;}
.pc-id{min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:6px;}
.player-name{display:block; max-width:100%; margin:0; font-weight:800; font-size:16.5px; line-height:1.2; color:var(--cream); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pc-id .lb-tag{margin-left:0;}
.pc-plat{display:inline-block; padding:2px 9px; border-radius:20px; font-size:10px; font-weight:800; letter-spacing:.4px; color:var(--cream-dim); border:1px solid var(--line); background:var(--field-bg);}

.pc-hero{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.pc-big{--c:245,205,107; display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:16px; min-width:0;
  background:rgba(var(--c),.11); border:1px solid rgba(var(--c),.30); transition:transform .25s cubic-bezier(.3,1.4,.5,1), background .25s ease;}
.pc-big.is-shards{--c:79,216,255;}

.player-card:hover .pc-big{background:rgba(var(--c),.17);}
.pc-big-ic{font-size:24px; color:rgb(var(--c)); filter:drop-shadow(0 0 8px rgba(var(--c),.6));}
.pc-big-t,.pc-mini span{display:flex; flex-direction:column; min-width:0;}
.player-card b{display:block; font-weight:800; font-size:16px; line-height:1.1; color:var(--cream); font-variant-numeric:tabular-nums; white-space:nowrap;}
.player-card small{display:block; margin-top:3px; font-size:9.5px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--cream-dim);}

.pc-duel{display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:16px; background:var(--field-bg); border:1px solid var(--line);}
.pc-duel-row{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.pc-k,.pc-d{display:flex; align-items:center; gap:8px; min-width:0;}
.pc-k .pl-ic,.pc-d .pl-ic{font-size:20px;}
.pc-k .pl-ic{color:#3ee8a8;}
.pc-d .pl-ic{color:#ff6f8a;}
.pc-k small,.pc-d small{margin:0;}
.pc-k{flex-direction:row;} .pc-k b,.pc-d b{font-size:17px;}
.pc-duel-bar{height:8px; border-radius:8px; overflow:hidden; background:linear-gradient(90deg,rgba(255,111,138,.55),rgba(255,111,138,.85));}
.pc-duel-bar i{display:block; height:100%; width:var(--k,50%); border-radius:8px; background:linear-gradient(90deg,#1fd6a0,#63f3c9); box-shadow:0 0 12px rgba(63,232,168,.55); transform-origin:left center; animation:barGrow 1s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:calc(var(--i,0) * 45ms + 300ms);}
.player-card.seen .pc-duel-bar i,.player-card.seen .pc-time-bar i{animation:none;}
.pc-duel.is-empty .pc-duel-bar{background:var(--skeleton-base);} .pc-duel.is-empty .pc-duel-bar i{display:none;}

.pc-build{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.pc-mini{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:var(--field-bg); border:1px solid var(--line); min-width:0;}
.pc-mini .pl-ic{font-size:20px; color:var(--blue-bright);}

.pc-mini b{font-size:14.5px;}

.pc-time{display:flex; flex-direction:column; gap:8px;}
.pc-time-row{display:flex; align-items:center; gap:8px;}
.pc-time-row .pl-ic{font-size:18px; color:#52f0b6;}

.pc-time-row b{font-size:14.5px;}
.pc-time-row small{margin:0 0 0 auto;}
.pc-time-bar{height:6px; border-radius:6px; background:var(--skeleton-base); overflow:hidden;}
.pc-time-bar i{display:block; height:100%; width:var(--t,0%); border-radius:6px; background:linear-gradient(90deg,#2fb6ff,#52f0b6); box-shadow:0 0 10px rgba(82,240,182,.45); transform-origin:left center; animation:barGrow 1.1s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:calc(var(--i,0) * 45ms + 400ms);}

/* ---------- empty / meta / skeleton ---------- */
.player-empty{grid-column:1/-1; padding:60px 24px; text-align:center; border-radius:22px; background:var(--pl-card); border:1px dashed var(--glass-border);}
.lb-list .player-empty-li{list-style:none; padding:0; background:none; border:0;}
.player-empty h3{font-size:16px; margin-bottom:8px;}
.player-empty p{color:var(--cream-dim); font-size:13.5px; max-width:52ch; margin:0 auto;}
.player-meta{margin-top:18px; font-size:12.5px; color:var(--cream-dim); text-align:center;}
.player-card .sk-avatar{margin:0; width:62px; height:62px; border-radius:16px;}
.player-card .sk-name{margin:0; width:55%;}
.player-card .sk-stats{grid-template-columns:1fr 1fr;}
.player-card .sk-stat{height:56px;}

/* ---------- keyframes (transform / opacity only) ---------- */
@keyframes plRise{from{opacity:0; transform:translateY(22px);}}
@keyframes podRise{from{opacity:0; transform:translateY(70px) scale(.94);}}
@keyframes stepWipe{from{clip-path:inset(100% 0 0 0);}to{clip-path:inset(0 0 0 0);}}
@keyframes rowIn{from{opacity:0; transform:translateX(-28px) scale(.985);}}
@keyframes cardIn{from{opacity:0; transform:translateY(36px) scale(.94);}}
@keyframes barGrow{from{transform:scaleX(0);}}
@keyframes barShine{0%{transform:translateX(-100%);}55%,100%{transform:translateX(100%);}}
@keyframes stepShine{0%,55%{left:-60%;}100%{left:140%;}}
@keyframes podSpin{to{--pod-ang:360deg;}}
@keyframes beamPulse{0%,100%{opacity:.75;}50%{opacity:1;}}
@keyframes crownFloat{0%,100%{transform:translateX(-50%) translateY(0) rotate(-3deg);}50%{transform:translateX(-50%) translateY(-7px) rotate(3deg);}}
@keyframes avatarBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@keyframes ringPulse{0%{transform:scale(1); opacity:.7;}100%{transform:scale(1.32); opacity:0;}}
@keyframes sparkUp{0%{transform:translateY(0) scale(.6); opacity:0;}15%{opacity:1;}100%{transform:translateY(-150px) scale(1); opacity:0;}}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .pl-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lb-row{grid-template-columns:44px 42px minmax(0,1.2fr) minmax(60px,.8fr) auto; gap:12px;}
}
@media (max-width:620px){
  .pl-stats{gap:10px;}
  .pl-stat{padding:12px; gap:10px; border-radius:16px;}
  .pl-stat-ic{width:36px; height:36px; font-size:18px; border-radius:12px;}
  .pl-stat-v{font-size:18px;}
  .pl-stat-l{white-space:normal; line-height:1.25; font-size:9.5px; letter-spacing:.5px;}
  .lb-toolbar{padding:10px; gap:10px;}
  .lb-toolbar .seg{width:100%;} .lb-toolbar .seg-btn{flex:1; justify-content:center;}
  .pl-search{min-width:100%;}
  .lb-metrics{margin-left:-4px; margin-right:-4px;}
  .lb-metrics .seg-btn{padding:11px 14px; font-size:13px;}
  #page-players .lb-head h3{font-size:17px;}
  /* podium stays a podium on phones — just tighter */
  .lb-podium{gap:8px; padding-top:34px;}
  .lb-pod{--av:46px; --step-h:52px;}
  .lb-pod.p1{--av:60px; --step-h:76px;}
  .lb-pod.p2{--step-h:54px;} .lb-pod.p3{--step-h:40px;}
  .pod-card{padding:18px 6px 12px; border-radius:18px 18px 0 0;}
  .lb-pod.p1 .pod-card{padding:24px 6px 14px; border-radius:20px 20px 0 0;}
  .lb-pod.p1 .pod-card::before{border-radius:22px 22px 0 0;}
  .pod-avatar{margin-bottom:10px;}
  .pod-avatar::before,.lb-pod.p1 .pod-avatar::after{inset:-5px;}
  .pod-card .lb-name{font-size:12px;} .lb-pod.p1 .pod-card .lb-name{font-size:13.5px;}
  .pod-card .lb-tag{display:none;}
  .pod-val .lb-val{font-size:16px;} .lb-pod.p1 .pod-val .lb-val{font-size:20px;}
  .pod-val .lb-unit{font-size:9px; letter-spacing:.8px;}
  .pod-step .lb-place{font-size:32px;} .lb-pod.p1 .pod-step .lb-place{font-size:42px;}
  .pod-crown{width:34px; height:34px; font-size:34px; top:-24px;}
  .lb-row{grid-template-columns:40px 38px minmax(0,1fr) auto; gap:10px; padding:9px 12px 12px 8px;}
  .lb-rank b{min-width:34px; height:34px; font-size:13px; border-radius:10px;}
  .lb-row .head,.lb-row .head-fallback{--hs:38px;}
  .lb-bar{position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:0; background:transparent;}
  .lb-bar i{border-radius:0 3px 3px 0; box-shadow:none;}
  .lb-row .lb-val{min-width:0;}
  .player-grid{grid-template-columns:1fr;}
}
@media (max-width:380px){
  .pod-card .lb-name{font-size:11px;}
  .pod-val .lb-val{font-size:14.5px;} .lb-pod.p1 .pod-val .lb-val{font-size:18px;}
}

@media (prefers-reduced-motion: reduce){
  #page-players *, #page-players *::before, #page-players *::after{animation:none !important; transition:none !important;}
  .seg-btn:hover .pl-ic{transform:none;}
}

/* footer + team: readable gold on the light theme */

/* ---------- Players extras: clickable rows, live pill, "/" hint, profile popup ---------- */
[data-k]{cursor:pointer;}
[data-k]:focus-visible{outline:2px solid var(--pl-a,var(--gold-bright)); outline-offset:3px;}
.pl-live{display:inline-flex; align-items:center; gap:9px; margin:0 auto 14px; padding:7px 16px; border-radius:30px; font-size:13px; font-weight:700; color:var(--cream); background:var(--field-bg); border:1px solid var(--glass-border); transition:transform .2s ease, border-color .2s ease;}
.pl-live:hover{transform:translateY(-2px); border-color:#3ddc84;}
.pl-live i{width:9px; height:9px; border-radius:50%; background:#3ddc84; box-shadow:0 0 0 0 rgba(61,220,132,.7); animation:plPing 1.8s ease-out infinite;}
.pl-live i.off{background:#ff6f8a; animation:none;}
#page-players .section-head{display:flex; flex-direction:column; align-items:center;}
@keyframes plPing{to{box-shadow:0 0 0 9px rgba(61,220,132,0);}}
.pl-kbd{position:absolute; right:14px; top:50%; transform:translateY(-50%); padding:2px 8px; border-radius:7px; font:700 12px ui-monospace,Menlo,monospace; color:var(--cream-dim); background:var(--field-bg); border:1px solid var(--line); pointer-events:none; transition:opacity .2s ease;}
.pl-search:focus-within .pl-kbd{opacity:0;}
@media(pointer:coarse){.pl-kbd{display:none;}}
html.pm-lock{overflow:hidden;}
.pm{position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:16px; background:rgba(3,7,16,.66); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; transition:opacity .2s ease;}
.pm.open{opacity:1;}
.pm-card{--h:215; position:relative; width:min(460px,100%); max-height:calc(100vh - 32px); overflow:auto; padding:26px 22px 22px; border-radius:26px; color:var(--cream);
  background:linear-gradient(160deg,hsl(var(--h) 90% 60% / .22),transparent 50%), var(--bg-2,#0b1428); border:1px solid hsl(var(--h) 90% 66% / .55);
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 60px hsl(var(--h) 90% 56% / .25); transform:translateY(24px) scale(.95); transition:transform .3s cubic-bezier(.2,.9,.25,1);}
.pm.open .pm-card{transform:none;}

.pm-x{position:absolute; right:14px; top:12px; width:36px; height:36px; border-radius:12px; border:1px solid var(--line); background:var(--field-bg); color:var(--cream); font-size:22px; line-height:1; cursor:pointer;}
.pm-x:hover{border-color:hsl(var(--h) 90% 66%);}
.pm-top{display:flex; align-items:center; gap:16px; margin-bottom:18px; padding-right:40px;}
.pm-avatar{--hs:72px; padding:3px; border-radius:18px; background:conic-gradient(from 0deg,hsl(var(--h) 95% 64%),hsl(calc(var(--h) + 70) 95% 64%),hsl(calc(var(--h) + 140) 95% 64%),hsl(var(--h) 95% 64%));}
.pm-avatar .head,.pm-avatar .head-fallback{--hs:72px; box-shadow:none;}
.pm-name{font:800 22px/1.2 'Poppins',sans-serif; margin-bottom:8px; word-break:break-all;}
.pm-ranks{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:14px;}
.pm-rank{display:flex; flex-direction:column; align-items:center; padding:9px 2px; border-radius:14px; background:var(--field-bg); border:1px solid var(--line); text-align:center;}
.pm-rank.medal{border-color:var(--lb-gold); background:rgba(245,205,107,.12);}
.pm-rank b{font-size:16px; font-weight:800; font-variant-numeric:tabular-nums;} .pm-rank span{font-size:10px; font-weight:700; color:var(--cream-dim); text-transform:uppercase; letter-spacing:.4px;} .pm-rank small{font-size:9.5px; color:var(--cream-dim);}
.pm-stats{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.pm-stat{position:relative; padding:12px 12px 12px 48px; border-radius:16px; background:var(--field-bg); border:1px solid var(--line);}
.pm-ic{position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:24px; color:hsl(var(--h) 90% 66%);}
.pm-stat b{display:block; font-size:17px; font-weight:800; font-variant-numeric:tabular-nums;} .pm-stat small{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--cream-dim);}
@media(max-width:420px){.pm-ranks{gap:5px;} .pm-rank b{font-size:14px;} .pm-rank small{display:none;}}
@media (prefers-reduced-motion: reduce){.pm,.pm-card{transition:none !important;} .pl-live i{animation:none;}}

/* ==========================================================================
   RULES & FAQ PAGE
   Rules are plain <li> items in index.html (#rules-server / #rules-chat) and
   the FAQ is a list of <details class="faq-item"> — edit the text right there.
   ========================================================================== */
#page-rules{ --rf-accent:var(--gold-bright); --rf-link:var(--blue-bright); }

.rules-jump{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:-6px auto 26px; max-width:1000px;}
.jump-pill{display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:30px; font-size:13px; font-weight:700; color:var(--cream); cursor:pointer;}
.jump-pill .icon{width:18px; height:18px;}
.jump-pill:hover{color:var(--rf-accent);}

.rules-notice{max-width:1000px; margin:0 auto 22px; padding:16px 22px; border-radius:14px; display:flex; align-items:center; gap:16px;}
.rules-notice:hover{transform:none;}
.rules-notice-ico{width:44px; height:44px; flex-shrink:0; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(139,92,246,.28),rgba(224,111,111,.18));}
.rules-notice p{color:var(--cream-dim); font-size:14px; margin:0;}
.rules-notice code, .faq-a code{background:rgba(90,168,236,.12); color:var(--rf-link); padding:2px 7px; border-radius:5px; font-size:12.5px;}

.rules-cols{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:1000px; margin:0 auto; align-items:start;}
@media(max-width:800px){.rules-cols{grid-template-columns:1fr;}}
.rules-card{padding:26px 24px 24px; border-radius:14px; scroll-margin-top:96px;}
.rules-card:hover{transform:none;}
.rules-card-head{display:flex; align-items:center; gap:14px; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--line);}
.rules-card-head .feat-icon{margin-bottom:0; flex-shrink:0;}
.rules-card-head h3{font-family:'Poppins'; font-weight:800; font-size:19px; color:var(--rf-accent);}
.rules-count{margin-left:auto; font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--rf-link); background:rgba(90,168,236,.12); padding:5px 12px; border-radius:20px; white-space:nowrap;}

.rule-list{list-style:none; margin:0; padding:0; counter-reset:rule; display:flex; flex-direction:column; gap:8px;}
.rule-list li{counter-increment:rule; display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; background:var(--card-bg); border:1px solid var(--line); font-size:14px; font-weight:600; color:var(--cream); transition:border-color .15s, transform .15s;}
.rule-list li:hover{border-color:var(--rf-accent); transform:translateX(3px);}
/* ---------- RESTRICTED CLIENTS & MODS ---------- */
.mods-wrap{max-width:1000px; margin:20px auto 0;}
.mods-card{position:relative; overflow:hidden;}
.mods-card::before{content:''; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,#ff5c5c,var(--gold-bright),var(--blue-bright));}
.mods-card .rules-card-head .feat-icon{background:linear-gradient(135deg,rgba(255,92,92,.30),rgba(139,92,246,.18));}
.mods-intro{color:var(--cream-dim); font-size:14px; margin:-4px 0 18px;}
.mods-intro b{color:var(--cream);}
.mods-cols{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start;}
.mods-group{padding:16px; border-radius:12px; background:var(--card-bg); border:1px solid var(--line);}
.mods-group-head{display:flex; align-items:center; gap:10px; margin-bottom:14px; font-family:'Poppins'; font-weight:800; font-size:12.5px; letter-spacing:.9px; text-transform:uppercase; color:var(--cream);}
.mods-group-head em{margin-left:auto; font-style:normal; font-size:11px; padding:3px 10px; border-radius:20px; background:rgba(255,255,255,.07); color:var(--cream-dim);}
.mods-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;}
.mods-group.hack .mods-dot{background:#ff5c5c; box-shadow:0 0 10px rgba(255,92,92,.7);}
.mods-group.restricted .mods-dot{background:var(--gold-bright); box-shadow:0 0 10px rgba(183,155,255,.6);}
.mod-chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
.mod-chips li{font-size:12.5px; font-weight:600; color:var(--cream); padding:7px 12px; border-radius:9px; background:rgba(255,255,255,.04); border:1px solid var(--line); transition:border-color .15s, transform .15s;}
.mods-group.hack .mod-chips li:hover{border-color:#ff5c5c; transform:translateY(-2px);}
.mods-group.restricted .mod-chips li:hover{border-color:var(--gold-bright); transform:translateY(-2px);}
.mods-warn{display:flex; align-items:center; gap:14px; margin-top:18px; padding:14px 18px; border-radius:12px; background:linear-gradient(135deg,rgba(255,92,92,.14),rgba(139,92,246,.10)); border:1px solid rgba(255,92,92,.28);}
.mods-warn .icon{width:26px; height:26px; flex-shrink:0;}
.mods-warn p{margin:0; font-size:13.5px; color:var(--cream);}
.mods-note{margin:12px 2px 0; font-size:12.5px; color:var(--cream-dim); font-style:italic;}
@media(max-width:800px){ .mods-cols{grid-template-columns:1fr;} }
@media (prefers-reduced-motion: reduce){ .mod-chips li{transition:none;} .mod-chips li:hover{transform:none;} }

.rule-list li::before{content:counter(rule); flex-shrink:0; min-width:28px; height:28px; padding:0 4px; border-radius:8px; display:grid; place-items:center; font-size:12px; font-weight:800; color:#0a1628; background:linear-gradient(135deg,#9468ff,#6a3fe0);}
.rule-link{color:var(--rf-link); text-decoration:underline; text-underline-offset:3px;}
@media (prefers-reduced-motion: reduce){ .rule-list li{transition:none;} .rule-list li:hover{transform:none;} }

.faq-wrap{padding-top:76px; scroll-margin-top:80px;}
.faq-list{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
.faq-item{border-radius:14px;}
.faq-item:hover{transform:none;}
.faq-item summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:18px 22px; font-weight:700; font-size:15px; color:var(--cream); user-select:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:focus-visible, .jump-pill:focus-visible{outline:2px solid var(--blue-bright); outline-offset:-2px;}
.faq-q-num{flex-shrink:0; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:13px; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--blue-bright),var(--blue));}
.faq-q{flex:1; min-width:0;}
.faq-chev{flex-shrink:0; color:var(--rf-accent); transition:transform .25s ease;}
.faq-item[open] .faq-chev{transform:rotate(180deg);}
.faq-item[open] summary{color:var(--rf-accent);}
.faq-a{padding:0 22px 20px 66px;}
.faq-a p{color:var(--cream-dim); font-size:14px; line-height:1.7; margin:0;}
.faq-a b{color:var(--cream);}
.faq-a a{color:var(--rf-link); text-decoration:underline; text-underline-offset:3px;}
.faq-item[open] .faq-a{animation:faqIn .28s ease both;}
@keyframes faqIn{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){ .faq-chev{transition:none;} .faq-item[open] .faq-a{animation:none;} }
@media(max-width:520px){
  .faq-item summary{padding:16px 16px; gap:12px; font-size:14px;}
  .faq-a{padding:0 16px 18px 16px;}
  .rules-card{padding:22px 16px 18px;}
  .rules-notice{padding:14px 16px; gap:12px;}
}

/* Nav fit: with the Rules link there are 8 links, so switch to the burger menu at 1120px and
   use slightly tighter link spacing on desktop so the bar never overflows. */
@media(min-width:1121px){
  .nav-links{gap:2px; font-size:13.5px;}
  .nav-links a{padding:9px 10px;}
}
@media(min-width:1121px) and (max-width:1300px){
  .cmdk-kbd{display:none;}
  .cmdk-trigger{width:40px; padding:0; justify-content:center;}
}

/* ---------- PREMIUM HERO: server-spawn slideshow background + Lemon Milk ---------- */
@font-face{font-family:'Lemon Milk'; src:url('../assets/fonts/LemonMilk-Bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap;}
h1.grad-text, .type-line, .type-grad{ font-family:'Lemon Milk','Poppins',sans-serif; font-weight:700; letter-spacing:1px; }
.brand{ font-family:'Lemon Milk','Poppins',sans-serif; font-weight:700; letter-spacing:1px; font-size:14px; white-space:nowrap; }
@media(max-width:640px){ .brand{ font-size:11px; letter-spacing:.6px; } }
.hero h1.grad-text{ font-size:clamp(26px,5.4vw,56px); line-height:1.15; margin-bottom:8px; filter:drop-shadow(0 4px 22px rgba(0,0,0,.65)); }
.type-line{ font-size:clamp(15px,3.3vw,30px); line-height:1.3; filter:drop-shadow(0 3px 16px rgba(0,0,0,.65)); }
.hero{ padding:96px 0 64px; isolation:isolate; }
.hero .eyebrow, .hero p.lede{ text-shadow:0 2px 14px rgba(0,0,0,.75); }
.hero p.lede{ color:#e9eefb; }

.hero-bg{ position:absolute; z-index:-1; left:50%; width:100vw; margin-left:-50vw; top:-90px; bottom:-30px; overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%); }
.hero-bg .slide{ position:absolute; inset:0; background-size:cover; background-position:center 40%; opacity:0; transform:scale(1.04);
  animation:heroFade 28s infinite, heroZoom 28s infinite linear; will-change:opacity,transform; }
.hero-bg .slide:nth-child(1){ animation-delay:0s; }
.hero-bg .slide:nth-child(2){ animation-delay:7s; }
.hero-bg .slide:nth-child(3){ animation-delay:14s; }
.hero-bg .slide:nth-child(4){ animation-delay:21s; }
@keyframes heroFade{ 0%{opacity:0} 6%{opacity:1} 25%{opacity:1} 31%{opacity:0} 100%{opacity:0} }
@keyframes heroZoom{ 0%{transform:scale(1.04)} 31%{transform:scale(1.13)} 100%{transform:scale(1.13)} }
.hero-bg::after{ content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(7,13,26,.18) 0%, rgba(7,13,26,.52) 70%),
    linear-gradient(to bottom, rgba(7,13,26,.55) 0%, rgba(7,13,26,.25) 40%, var(--navy) 100%),
    linear-gradient(100deg, rgba(47,139,255,.16), rgba(194,102,255,.14)); }

@media (prefers-reduced-motion: reduce){
  .hero-bg .slide{ animation:none; transform:none; }
  .hero-bg .slide:first-child{ opacity:1; } }
@media (max-width:600px){ .hero{ padding:72px 0 48px; } .hero-bg{ top:-70px; } }

/* ===== ICON REFRESH — duotone gold/cream/sky icons with a dark halo so they read on every background ===== */
.icon{width:1.3em; height:1.3em; vertical-align:-0.28em; filter:drop-shadow(0 1px 1.5px rgba(4,9,18,.55));}
.section-tag .icon,.tag-pill .icon,.announce .icon{width:18px; height:18px;}
.sound-toggle .icon{width:20px; height:20px;}
.cta-pill.gold .icon,.nav-cta .icon,#pcSaveBtn .icon,.big-pill.p2 .icon{filter:brightness(0) invert(1);}
.feat-icon .icon,.connect-icon .icon{width:28px; height:28px; filter:drop-shadow(0 2px 4px rgba(4,9,18,.5));}
.connect-icon .icon{width:30px; height:30px;}
.orb2{background:radial-gradient(circle,rgb(224 173 63),transparent 70%);}
.pl-orb.o1,.pl-orb.o3{background:radial-gradient(circle,rgb(245 205 107),transparent 68%);}
.pl-orb.o2{background:radial-gradient(circle,rgb(255 143 60),transparent 68%);}
.pm,#page-players{--gold:rgb(232 181 77); --gold-bright:rgb(245 205 107); --gold-glow:rgb(224 173 63); --gold-dim:rgb(138 106 46);}
.copy-btn::before{content:''; display:inline-block; width:13px; height:13px; margin-right:6px; vertical-align:-2px; background:currentColor; -webkit-mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iMyIgeTE9IjIiIHgyPSIyMSIgeTI9IjIyIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmZmN2RhIi8+PHN0b3Agb2Zmc2V0PSIuNSIgc3RvcC1jb2xvcj0iI2Y4ZDU3YSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2VjYWUzYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjguNSIgeT0iOC41IiB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyLjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNnKSIgc3Ryb2tlLXdpZHRoPSIxLjkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xNS41MDAgOC41MDBWNmEyIDIgMCAwIDAtMi0ySDZhMiAyIDAgMCAwLTIgMnY3LjUwMGEyIDIgMCAwIDAgMiAyaDIuNTAwIiBmaWxsPSJub25lIiBzdHJva2U9IiM4ZmQwZmYiIHN0cm9rZS13aWR0aD0iMS45IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4K) center/contain no-repeat; mask:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iMyIgeTE9IjIiIHgyPSIyMSIgeTI9IjIyIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmZmN2RhIi8+PHN0b3Agb2Zmc2V0PSIuNSIgc3RvcC1jb2xvcj0iI2Y4ZDU3YSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2VjYWUzYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjguNSIgeT0iOC41IiB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHJ4PSIyLjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNnKSIgc3Ryb2tlLXdpZHRoPSIxLjkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xNS41MDAgOC41MDBWNmEyIDIgMCAwIDAtMi0ySDZhMiAyIDAgMCAwLTIgMnY3LjUwMGEyIDIgMCAwIDAgMiAyaDIuNTAwIiBmaWxsPSJub25lIiBzdHJva2U9IiM4ZmQwZmYiIHN0cm9rZS13aWR0aD0iMS45IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4K) center/contain no-repeat;}