/* =====================================================
   v100 — Local fonts (no Google Fonts CDN dependency)
   All four families are served from /assets/fonts/.
   `font-display: swap` keeps text visible while a weight
   downloads (system fallback shown for ~100ms then swap).
   If the user has not uploaded the TTFs, the browser
   instantly falls back to system stack with zero render-blocking.
   ===================================================== */

/* Russo One — display headlines (EN) */
@font-face {
  font-family: 'Russo One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/RussoOne-Regular.ttf') format('truetype');
}

/* Rajdhani — numbers + tabular UI (EN) */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Rajdhani-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Rajdhani-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Rajdhani-Bold.ttf') format('truetype');
}

/* Vazirmatn — body prose (FA) */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Vazirmatn-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Vazirmatn-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Vazirmatn-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/Vazirmatn-ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/Vazirmatn-Black.ttf') format('truetype');
}

/* Lalezar — display headlines (FA) */
@font-face {
  font-family: 'Lalezar';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Lalezar-Regular.ttf') format('truetype');
}


:root{
  --bg:#0b0c10;
  --panel: rgba(18, 19, 28, .72);
  --stroke: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);

  --red:#cf2424;
  --amber:#b08a2a;
  --lime:#46d67e;

  --shadow: 0 22px 60px rgba(0,0,0,.55);
  --blur: blur(14px);

  --radius: 18px;
  --radius2: 24px;
  --ease: cubic-bezier(.2,.9,.15,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  overflow-x:hidden;
}

a{color:inherit}
.container{width:min(1180px, calc(100% - 44px)); margin:0 auto}
.svg{width:18px;height:18px;display:block}

.bg{position:fixed; inset:0; z-index:-3; overflow:hidden}
.bg__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.02)}
.bg__grid{
  position:absolute; inset:-2px;
  background:
    radial-gradient(1200px 520px at 50% 12%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: auto, 46px 46px, 46px 46px;
  opacity:.17;
  mask-image: radial-gradient(900px 520px at 50% 10%, black 45%, transparent 78%);
}
.bg__glow{
  position:absolute; width:860px; height:860px; border-radius:999px;
  filter: blur(90px);
  opacity:.45;
  animation: float 10s var(--ease) infinite alternate;
}
.bg__glow--a{left:-220px; top:-240px; background: rgba(207, 36, 36, .55)}
.bg__glow--b{right:-220px; top:120px; background: rgba(176, 138, 42, .45); animation-duration: 12s}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(70px)}}

.fx{position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.42}

.top{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(10,10,14,.75), rgba(10,10,14,.15));
  backdrop-filter: var(--blur);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.top__inner{height:78px; display:flex; align-items:center; justify-content:space-between; gap:14px}

.brand{display:flex; align-items:center; gap:12px; text-decoration:none; min-width: 240px}
.brand__logo{width:46px; height:46px; object-fit:contain; filter: drop-shadow(0 14px 18px rgba(0,0,0,.45))}
.brand__name{font-weight:900; letter-spacing:.5px}

.nav{display:flex; gap:10px; align-items:center}
.nav__link{
  text-decoration:none;
  font-size:14px;
  color: rgba(255,255,255,.72);
  padding:10px 12px;
  position:relative;
  border-radius: 999px;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.nav__link:hover{
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
  color: rgba(255,255,255,.92);
}
.nav__link.is-active{
  color:#fff;
  background: rgba(207,36,36,.16);
  box-shadow: inset 0 0 0 1px rgba(207,36,36,.26);
}

.top__actions{display:flex; gap:10px; align-items:center}

.hamb{
  width:42px;height:42px;border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  display:none; align-items:center; justify-content:center;
  gap:4px; flex-direction:column;
  cursor:pointer;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.hamb:hover{transform: translateY(-1px); background: rgba(255,255,255,.05)}
.hamb span{width:18px;height:2px;background: rgba(255,255,255,.82); border-radius:99px}


.btn{
  position:relative;
  height:42px;
  padding:0 16px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  letter-spacing:.2px;
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
  transition: transform .25s var(--ease), filter .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.92);
  overflow:hidden;
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0px) scale(.99)}
.btn--small{height:38px; padding:0 14px; border-radius: 12px; font-size:13px}
.btn--lg{height:48px; padding:0 18px; border-radius:16px; font-size:15px}

.btn__spark{
  position:absolute; inset:-2px;
  background: radial-gradient(240px 120px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.22), transparent 55%);
  opacity:0;
  transition: opacity .25s var(--ease);
}
.btn:hover .btn__spark{opacity:1}

.btn--primary{
  border-color: rgba(207,36,36,.35);
  background: linear-gradient(180deg, rgba(207,36,36,.28), rgba(12,13,20,.08));
  box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(207,36,36,.12);
}
.btn--primary:hover{filter: brightness(1.08)}
.btn--ghost{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
}
.btn--ghost:hover{background: rgba(255,255,255,.05)}

.hero{position:relative; padding: 56px 0 34px}
.hero__inner{display:grid; grid-template-columns: 1.25fr .95fr; gap:22px; align-items:center}
.hero__fade{
  position:absolute; left:0; right:0; bottom:-1px; height:120px;
  background: linear-gradient(180deg, transparent, rgba(11,12,16,.75));
  pointer-events:none;
}

.title{
  margin:0 0 10px;
  font-size: 54px;
  line-height: 1.02;
  letter-spacing: .4px;
}
.title__accent{color: rgba(255,255,255,.96)}
.title__shine{
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(176,138,42,.95), rgba(207,36,36,.92), rgba(255,255,255,.9));
  -webkit-background-clip:text; background-clip:text;
  color: transparent;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.45));
}
.lead{
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 18px;
  max-width: 62ch;
}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px}

.kpis{display:flex; gap:12px; flex-wrap:wrap; margin-top: 8px}
.kpi{
  display:flex; align-items:center; gap:12px;
  padding: 12px 14px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  min-width: 190px;
}
.kpi__icon{
  width:44px; height:44px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.10);
  background: radial-gradient(240px 120px at 40% 20%, rgba(176,138,42,.20), rgba(255,255,255,.02));
}
.kpi__v{font-weight:1000; font-size: 18px; line-height:1}
.kpi__k{color: rgba(255,255,255,.62); font-size: 12px; font-weight:900; letter-spacing:.8px; margin-top:6px}

.showcase{
  position:relative;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(18,19,28,.72), rgba(12,13,20,.56));
  backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
  height: 430px;
  overflow:hidden;
  isolation:isolate;
}
.showcase__ring{
  position:absolute; inset:-80px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  mask-image: radial-gradient(closest-side, transparent 66%, black 71%);
  opacity:.55;
  animation: spin 18s linear infinite;
}
.showcase__ring--2{
  inset:-120px; opacity:.35;
  animation-duration: 26s;
  mask-image: radial-gradient(closest-side, transparent 72%, black 78%);
}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.showcase__crate{
  position:absolute;
  width: 520px;
  height:auto;
  filter: drop-shadow(0 26px 28px rgba(0,0,0,.45));
  opacity:.95;
  will-change: transform;
}
.showcase__crate--l{left:-140px; bottom:-70px; transform: rotate(-6deg)}
.showcase__crate--r{right:-150px; top:80px; transform: rotate(8deg)}

.badge{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: 260px;
  padding: 16px 14px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
  text-align:center;
  box-shadow: 0 22px 46px rgba(0,0,0,.55);
}
.badge__top{display:flex; align-items:center; justify-content:center; gap:8px; font-weight:900; color: rgba(255,255,255,.86); letter-spacing:.6px}
.badge__pulse{width:8px;height:8px;border-radius:99px;background: var(--lime); box-shadow: 0 0 0 6px rgba(70,214,126,.14); animation:pulse 1.8s var(--ease) infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
.badge__big{font-size: 42px; font-weight: 1000; margin: 8px 0 2px}
.badge__sub{color: rgba(255,255,255,.62); font-size:13px}

.connectmini{
  margin-top: 10px;
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 10px 10px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.connectmini__value{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-weight: 900;
  font-size: 12.5px;
  color: rgba(255,255,255,.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.copybtn{
  width:38px; height:38px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.86);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.copybtn:hover{transform: translateY(-1px); background: rgba(255,255,255,.05)}
.copybtn:active{transform: translateY(0px) scale(.99)}
.copybtn .svg{width:18px;height:18px}

.meta{
  width:100%;
  display:flex; justify-content:space-between; gap:10px;
  margin-top: 10px;
}
.meta__item{
  flex:1;
  padding: 10px 10px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  text-align:center;
}
.meta__k{display:block; color: rgba(255,255,255,.55); font-size: 11px; font-weight: 900; letter-spacing: .9px}
.meta__v{display:block; margin-top:6px; font-weight: 1000; font-size: 12.5px}

.section{padding: 42px 0}
.section--soft{padding: 52px 0; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))}
.section__head{display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom: 14px}
.h2{margin:0; font-size: 22px; letter-spacing: .3px}
.section__hint{color: rgba(255,255,255,.55); font-size:13px}

.status{display:grid; grid-template-columns: 1.15fr .85fr; gap: 16px; align-items:start}
.panel{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(18,19,28,.76), rgba(12,13,20,.62));
  backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel__head{display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-bottom:1px solid rgba(255,255,255,.06)}
.panel__title{display:flex; align-items:center; gap:10px; font-weight:900}
.mark{width:10px;height:10px;border-radius:99px;background: rgba(176,138,42,.9); box-shadow: 0 0 0 6px rgba(176,138,42,.14)}
.pill{
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.72);
}
.pill.is-up{border-color: rgba(70,214,126,.28); background: rgba(70,214,126,.12); color: rgba(255,255,255,.88)}
.pill.is-down{border-color: rgba(207,36,36,.28); background: rgba(207,36,36,.12); color: rgba(255,255,255,.88)}

.panel__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px 16px;
}
.stat{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 12px 12px;
  min-height: 86px;
}
.stat__k{color: rgba(255,255,255,.62); font-size: 12px}
.stat__v{font-size: 18px; font-weight: 1000; margin-top: 8px}
.stat__s{color: rgba(255,255,255,.50); font-size: 12px; margin-top: 6px}

.panel__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 14px 16px;
  border-top:1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.12);
}
.connect__label{color: rgba(255,255,255,.55); font-size:12px}
.connect__value{
  margin-top:6px;
  font-weight:900;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  color: rgba(255,255,255,.86);
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.panel__actions{display:flex; gap:10px; flex-wrap:wrap}

.cards{display:grid; gap: 12px}
.card{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(18,19,28,.72), rgba(12,13,20,.58));
  backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:grid;
  grid-template-columns: 170px 1fr;
  min-height: 168px;
}
.card__media{position:relative; background: radial-gradient(500px 220px at 40% 20%, rgba(207,36,36,.18), transparent 55%)}
.card__media img{width:100%; height:100%; object-fit:cover; filter: drop-shadow(0 22px 22px rgba(0,0,0,.45))}
.card__body{padding: 14px 14px; display:flex; flex-direction:column; justify-content:center; gap:10px}
.card__title{display:flex; align-items:center; gap:10px; font-weight:1000}
.card__sub{color: rgba(255,255,255,.60); font-size: 13px}

.apply{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(18,19,28,.78), rgba(12,13,20,.62));
  backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
  padding: 18px 18px;
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
}
.apply__kicker{color: rgba(176,138,42,.95); font-weight:900; letter-spacing:.5px}
.apply__title{font-weight:1000; font-size: 20px; margin-top: 8px}
.apply__sub{color: rgba(255,255,255,.62); margin-top: 6px}
.apply__right{display:flex; gap:10px}

.foot{padding: 34px 0 40px; border-top:1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.18)}
.foot__inner{display:flex; align-items:flex-start; justify-content:space-between; gap: 14px; flex-wrap:wrap}
.foot__logo{width:56px;height:56px; object-fit:contain; opacity:.95}
.foot__copy{margin-top: 8px; color: rgba(255,255,255,.72)}
.foot__note{margin-top: 6px; color: rgba(255,255,255,.62); font-size: 12px}
.foot__links{display:flex; flex-direction:column; gap: 10px; min-width: 180px}
.foot__links a{color: rgba(255,255,255,.72); text-decoration:none}
.foot__links a:hover{text-decoration: underline; color: rgba(255,255,255,.92)}

.toasts{
  position: fixed;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  display:flex;
  flex-direction:column;
  gap: 10px;
  z-index: 80;
  max-width: min(520px, calc(100% - 28px));
  align-items:center;
}
.toast{
  width: min(520px, calc(100vw - 28px));
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,10,14,.72);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  padding: 12px 12px;
  display:flex; gap:10px; align-items:flex-start;
  animation: notifPop .45s var(--ease) both;
}
@keyframes notifPop{
  0%{transform: translateY(-12px) scale(.86); opacity:0}
  55%{transform: translateY(0) scale(1.06); opacity:1}
  72%{transform: translateY(0) scale(.98)}
  100%{transform: translateY(0) scale(1)}
}
.toast--ok{
  border-color: rgba(70,214,126,.35);
  background: linear-gradient(180deg, rgba(70,214,126,.18), rgba(10,10,14,.72));
}
.toast__icon{width:34px;height:34px;border-radius:12px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); font-weight:1000}
.toast--ok .toast__icon{background: rgba(70,214,126,.16); border-color: rgba(70,214,126,.22)}
.toast__title{font-weight:1000}
.toast__msg{color: rgba(255,255,255,.66); font-size:13px; margin-top:4px}
.toast__x{margin-left:auto}
.toast__x button{all:unset; cursor:pointer; width:34px;height:34px; display:flex; align-items:center; justify-content:center; border-radius:12px; color: rgba(255,255,255,.70)}
.toast__x button:hover{background: rgba(255,255,255,.06)}

.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in{opacity:1; transform: translateY(0)}

@media (max-width: 980px){
  .hero__inner{grid-template-columns: 1fr; }
  .showcase{height: 380px}
  .status{grid-template-columns: 1fr}
  .panel__grid{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 760px){
  .nav{display:none}
  .hamb{display:inline-flex}
  .title{font-size: 42px}
  .card{grid-template-columns: 150px 1fr}
  .kpi{min-width: 100%}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  .fx{display:none}
}


/* ===== v5: robust layout + no "blank page" failure modes ===== */
.hero{min-height: 100vh;}
.title{font-size:72px; line-height:.92;}
@media (max-width: 760px){ .title{font-size:48px;} }

.reveal{opacity:1; transform:none;} /* never hide content */
.reveal.is-in{opacity:1; transform:none;}

.hero__kpiwrap{margin-top: 28px; padding-bottom: 8px;}
.hero__kpiwrap .kpis{justify-content:flex-start}

.scrollgap{
  height: 68vh;
  background: linear-gradient(180deg, rgba(11,12,16,0), rgba(11,12,16,.92) 55%, rgba(11,12,16,1) 100%);
}
.plain{
  position:relative;
  background: #0b0c10;
}
.plain .section--soft{background: transparent;}


/* ===== v6: merged status into top card ===== */
.reveal{opacity:1; transform:none;}
.reveal.is-in{opacity:1; transform:none;}

.hero{min-height: 100vh;}
.title{font-size:72px; line-height:.92;}
@media (max-width: 760px){ .title{font-size:48px;} }

.hero__inner{align-items: start;}
.hero__right{padding-top: 6px;}

.statuscard{
  position:relative;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(18,19,28,.74), rgba(12,13,20,.62));
  box-shadow: var(--shadow);
  overflow:hidden;
  padding: 16px 16px 14px;
}
.statuscard__fx{
  position:absolute; inset:-2px;
  background: radial-gradient(520px 240px at 60% 10%, rgba(176,138,42,.18), transparent 55%),
              radial-gradient(520px 240px at 20% 90%, rgba(207,36,36,.16), transparent 55%);
  pointer-events:none;
  opacity:.9;
}
.statuscard > *{position:relative; z-index:1;}

.statuscard__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.srvstate{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-weight:1000;
  letter-spacing:.6px;
  font-size:12px;
}
.srvstate__icon{display:flex; align-items:center; justify-content:center; width:18px; height:18px;}
.srvstate--online{border-color: rgba(70,214,126,.28); background: rgba(70,214,126,.12);}
.srvstate--offline{border-color: rgba(207,36,36,.28); background: rgba(207,36,36,.12);}
.srvstate--startup{border-color: rgba(176,138,42,.28); background: rgba(176,138,42,.12);}
.srvstate--loading{border-color: rgba(236,72,153,.34); background: rgba(236,72,153,.14); color:#f9a8d4;}

.onlineplayers{text-align:right;}
.onlineplayers__val{font-size: 42px; font-weight:1000; line-height:1;}
.onlineplayers__lbl{margin-top:6px; font-size:12px; color: rgba(255,255,255,.62); font-weight:900; letter-spacing:.9px;}

.statuscard__mid{margin-top: 12px;}
.ipbox{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 10px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.ipbox__value{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-weight: 900;
  font-size: 12.5px;
  color: rgba(255,255,255,.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.statusgrid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.sitem{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 12px 12px;
}
.sitem__k{color: rgba(255,255,255,.62); font-size: 11px; font-weight:900; letter-spacing:.9px;}
.sitem__v{margin-top: 8px; font-size: 18px; font-weight:1000;}
.sitem__v--small{font-size: 13px; line-height: 1.2;}

.plaincards{
  background:#0b0c10;
  padding: 40px 0 16px;
}
.cards2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cards2 .card{min-height: 168px;}
@media (max-width: 900px){
  .cards2{grid-template-columns: 1fr;}
}

.anchor{position:absolute; width:1px; height:1px; overflow:hidden; clip: rect(0 0 0 0);}

.foot__links a{border:none; background:transparent; padding: 6px 0; border-radius:0; opacity:.78;}
.foot__links a:hover{background:transparent; opacity:1; text-decoration: underline;}


/* ===== v7: statuscard parallax + tighter layout + custom scrollbar ===== */

/* Make layout fit 1920x1080: bring cards up */
.plaincards--tight{
  padding-top: 14px;
  padding-bottom: 10px;
  margin-top: -10px;
}
.hero{min-height: auto; padding-bottom: 16px;}
.hero__fade{height: 90px;}

/* Status card art */
.statuscard{--px: 50; --py: 50;}
.statuscard__art{
  position:absolute;
  width: 440px;
  height:auto;
  opacity: .42;
  filter: drop-shadow(0 24px 24px rgba(0,0,0,.45));
  pointer-events:none;
  transform: translate3d(0,0,0);
  will-change: transform;
}
.statuscard__art--l{
  left:-120px;
  bottom:-90px;
  transform: translate3d(calc((var(--px) - 50) * 0.25px), calc((var(--py) - 50) * 0.20px), 0) rotate(-6deg);
}
.statuscard__art--r{
  right:-140px;
  top:50px;
  transform: translate3d(calc((var(--px) - 50) * -0.28px), calc((var(--py) - 50) * -0.20px), 0) rotate(8deg);
}

/* Smooth hover motion without blurring text */
.statuscard{
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.statuscard:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
}

/* Animate 4 tiles on hover (subtle lift + sheen) */
.sitem{
  position:relative;
  overflow:hidden;
  transition: transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.sitem::after{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(220px 120px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.14), transparent 60%);
  opacity:0;
  transition: opacity .22s var(--ease);
  pointer-events:none;
}
.statuscard:hover .sitem::after{opacity:1;}
.sitem:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
}

/* Custom scrollbar */
::-webkit-scrollbar{width: 10px;}
::-webkit-scrollbar-track{
  background: rgba(255,255,255,.03);
}
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(207,36,36,.55), rgba(176,138,42,.45));
  border-radius: 999px;
  border: 2px solid rgba(11,12,16,.9);
}
::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(207,36,36,.75), rgba(176,138,42,.60));
}

/* Firefox */
*{scrollbar-width: thin; scrollbar-color: rgba(207,36,36,.55) rgba(255,255,255,.03);}


/* ===== v8: navbar underline indicator like sample ===== */
.nav__link{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 12px 12px;
}
.nav__link::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:6px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(207,36,36,1), rgba(176,138,42,.55), rgba(255,255,255,0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
  opacity:.95;
}
.nav__link:hover::after{transform: scaleX(1);}
.nav__link.is-active::after{transform: scaleX(1);}

/* Store gold accent */
.nav__link--store{color: rgba(255, 211, 120, .92) !important;}
.nav__link--store::after{
  background: linear-gradient(90deg, rgba(255, 211, 120, 1), rgba(176,138,42,.55), rgba(255,255,255,0));
}

/* ===== v8: statuscard ensure grid stays inside, no overflow bugs ===== */
.statuscard{position:relative; display:block; }
.statusgrid{width:100%;}

/* Make the 4 tiles animate again */
.sitem{cursor: default;}

/* Online players small pill at bottom (single source of truth) */
.onlinepill{
  margin-top: 10px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.onlinepill__val{font-size: 18px; font-weight:1000;}
.onlinepill__lbl{font-size: 11px; font-weight:900; letter-spacing:.9px; color: rgba(255,255,255,.62);}

/* View button spacing in cards */
.cards2 .btn{margin-top: 6px;}

/* Store button tint */
.btn--store{
  border-color: rgba(255, 211, 120, .35) !important;
  background: linear-gradient(180deg, rgba(255, 211, 120, .16), rgba(12,13,20,.08)) !important;
}
.btn--store:hover{filter: brightness(1.08);}

/* ===== v8: toast exit animation ===== */
.toast.is-leaving{animation: notifOut .22s var(--ease) both;}
@keyframes notifOut{
  to{transform: translateY(-8px) scale(.96); opacity:0}
}


/* ===== v9 polish ===== */

/* Smooth statuscard art motion (no "teleport" on enter/leave) */
.statuscard__art{
  transition: transform .28s var(--ease);
}
.statuscard__art--l,
.statuscard__art--r{
  transform: translate3d(calc((var(--px) - 50) * 0.18px), calc((var(--py) - 50) * 0.14px), 0) rotate(var(--rot, 0deg));
}
.statuscard__art--l{ --rot: -6deg; }
.statuscard__art--r{ --rot: 8deg; }

/* Remove the solid black "block" behind the Leaderboards/Store cards section */
.plaincards{
  background: transparent !important;
}

/* Put the cards a bit lower so a small scroll is needed (1920x1080 still mostly above fold) */
.plaincards--tight{
  margin-top: 70px; /* was near 0; now needs a little scroll */
}
@media (max-width: 900px){
  .plaincards--tight{ margin-top: 40px; }
}

/* Footer: solid dark textured look (no red/gold glows) */
.foot{
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(255,255,255,.035), transparent 60%),
    radial-gradient(900px 260px at 80% 0%, rgba(255,255,255,.02), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.82));
}

/* Navbar: when hover/active, text tint slightly */
.nav__link:hover{color: rgba(255,255,255,.94) !important;}
.nav__link.is-active{color: rgba(255,255,255,.98) !important;}
.nav__link--store:hover,
.nav__link--store.is-active{color: rgba(255,211,120,.98) !important;}

/* Store card accent */
.card--store .card__title{
  color: rgba(255, 211, 120, .95);
}

/* Footer links: 2-column layout */
.foot__links--grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 80px;
  row-gap: 12px;
  align-content:start;
}
.foot__link{
  position:relative;
  display:inline-block;
  width: max-content;
  padding: 2px 0;
  opacity:.78;
  text-decoration:none;
  transition: opacity .2s var(--ease), transform .2s var(--ease), color .2s var(--ease);
}
.foot__link::after{
  content:"";
  position:absolute;
  left:0;
  right:-6px;
  bottom:-6px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(207,36,36,1), rgba(176,138,42,.55), rgba(255,255,255,0));
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .26s var(--ease);
  opacity:.95;
}
.foot__link:hover{
  opacity:1;
  transform: translateY(-1px);
}
.foot__link:hover::after{transform: scaleX(1);}
.foot__link--store{color: rgba(255, 211, 120, .92);}
.foot__link--store::after{
  background: linear-gradient(90deg, rgba(255, 211, 120, 1), rgba(176,138,42,.55), rgba(255,255,255,0));
}

/* Social column ordering: first column for socials, second for nav */
.foot__link--social{grid-column: 1;}
.foot__link:not(.foot__link--social){grid-column: 2;}

@media (max-width: 760px){
  .foot__links--grid{
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
  .foot__link--social,
  .foot__link:not(.foot__link--social){grid-column: 1;}
}

/* Add hover animation to footer links beyond default */


/* ===== v10 fixes from screenshots ===== */

/* Remove the "matte band" between hero and cards (disable hero fade overlay) */
.hero__fade{display:none !important;}
.hero{padding-bottom: 34px;} /* keep spacing without overlay */

/* Footer opacity: ~95% opaque */
.foot{
  background-color: rgba(11,12,16,.95) !important;
}

/* Footer grid spacer */
.foot__spacer{grid-column: 1; height: 1px;}

/* Active/hover text tint in navbar and footer */
.nav__link:hover{color: rgba(255,255,255,.96) !important;}
.nav__link.is-active{color: rgba(207,36,36,.95) !important;}
.nav__link--store.is-active{color: rgba(255,211,120,.98) !important;}

/* Footer active/hover text tint */
.foot__link:hover{color: rgba(255,255,255,.96);}
.foot__link.is-active{color: rgba(207,36,36,.95); opacity: 1;}
.foot__link--store:hover{color: rgba(255,211,120,.98);}
.foot__link--store.is-active{color: rgba(255,211,120,.98); opacity: 1;}


/* ===== v11: hover text tint + footer social alignment ===== */

/* Buttons: tint text on hover (match theme) */
.btn--primary:hover{
  color: rgba(255,255,255,.98);
}
.btn--ghost:hover{
  color: rgba(255, 211, 120, .95);
}
.btn--ghost:active{color: rgba(255, 211, 120, 1);}

/* Make LINK ACCOUNT feel "red" on hover */
#linkAccount.btn--primary:hover{
  color: rgba(255, 230, 230, 1);
}

/* View buttons */
.cards2 .btn--primary:hover{
  color: rgba(255,255,255,1);
}
.cards2 .btn--store:hover{
  color: rgba(255, 235, 180, 1);
}

/* Also tint navbar-like underline links on hover already handled */

/* Footer grid: force socials to start on row 2 (same level as HOME) */
.foot__links--grid{
  grid-auto-flow: row;
}
.foot__link--social{grid-column:1;}
.foot__links--grid .foot__link[href="#home"]{grid-column:2; grid-row:1;}
.foot__links--grid .foot__link[href="#store"]{grid-column:2; grid-row:2;}
.foot__links--grid .foot__link[href="#leaderboards"]{grid-column:2; grid-row:3;}
.foot__links--grid .foot__link[href="#report"]{grid-column:2; grid-row:4;}

.foot__links--grid .foot__link--social[href="#discord"]{grid-column:1; grid-row:2;}
.foot__links--grid .foot__link--social[href="#telegram"]{grid-column:1; grid-row:3;}
.foot__links--grid .foot__link--social[href^="mailto:"]{grid-column:1; grid-row:4;}


/* ===== v12: make ALL button texts tint on hover ===== */
.btn{
  transition: transform .25s var(--ease), filter .25s var(--ease), background .25s var(--ease),
              border-color .25s var(--ease), color .20s var(--ease);
  --hoverText: rgba(255,255,255,.98);
}
.btn:hover{color: var(--hoverText);}

/* Primary buttons -> red tint */
.btn--primary{--hoverText: rgba(207,36,36,.95);}

/* Ghost buttons -> gold tint */
.btn--ghost{--hoverText: rgba(255, 211, 120, .95);}

/* Store-special buttons keep stronger gold */
.btn--store{--hoverText: rgba(255, 226, 150, 1);}

/* Ensure small "View" buttons also follow */
.btn--small{--hoverText: rgba(255,255,255,.98);}
.cards2 .btn--primary.btn--small{--hoverText: rgba(207,36,36,.95);}
.cards2 .btn--store.btn--small{--hoverText: rgba(255, 226, 150, 1);}


/* ===== v13: footer has no default selected state; hover only ===== */
.foot__link.is-active{
  color: inherit !important;
  opacity: .78 !important;
}
.foot__link.is-active::after{
  transform: scaleX(0) !important;
}

/* ===== v13: push cards section down a bit more ===== */
.plaincards--tight{
  margin-top: 120px !important;
}
@media (max-width: 900px){
  .plaincards--tight{ margin-top: 70px !important; }
}


/* ===== v14 spacing tune ===== */
/* Cards section slightly higher */
.plaincards--tight{
  margin-top: 95px !important; /* was 120 */
}
@media (max-width: 900px){
  .plaincards--tight{ margin-top: 60px !important; }
}

/* Footer further down so you scroll a bit more to reach it */
.foot{
  margin-top: 120px;
}
@media (max-width: 900px){
  .foot{ margin-top: 90px; }
}


/* ===== Steam account UI ===== */
#accountArea{position:relative; display:flex; align-items:center; gap:10px}
.accountbtn{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 0 14px;
}
.accountbtn__avatar{
  width:28px; height:28px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  object-fit:cover;
}
.accountbtn__name{
  max-width: 140px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight: 900;
}
.accountbtn__chev{
  width:18px; height:18px;
  opacity:.85;
  transition: transform .22s var(--ease);
}
.accountbtn.is-open .accountbtn__chev{transform: rotate(180deg);}

.accountmenu{
  position:absolute;
  right:0;
  top:54px;
  width: 210px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,10,14,.72);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 60px rgba(0,0,0,.60);
  overflow:hidden;
  transform-origin: top right;
  animation: menuPop .18s var(--ease) both;
  z-index: 60;
}
@keyframes menuPop{
  from{opacity:0; transform: translateY(-8px) scale(.96);}
  to{opacity:1; transform: translateY(0) scale(1);}
}
.accountmenu__item{
  width:100%;
  padding: 12px 12px;
  text-align:left;
  border:none;
  background: transparent;
  color: rgba(255,255,255,.86);
  font-weight: 800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.accountmenu__item:hover{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.98);
}
.accountmenu__item:last-child{border-bottom:none}
.accountmenu__item--danger{color: rgba(255,120,120,.95); text-decoration:none}
.accountmenu__item--danger:hover{background: rgba(255,80,80,.12)}


/* ===== Home: wide Discord card ===== */
.cards3{margin-top: 14px;}
.card--wide{grid-column: 1 / -1; min-height: 132px;}
@media (max-width: 900px){ .card--wide{grid-column:auto;} }

/* ===== Leaderboards: exact layout ===== */
.lbpage{padding: 34px 0 80px;}
.lbTop{display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-bottom: 12px;}
.lbMode{
  position:relative;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  overflow:hidden;
  height: 120px;
}
.lbMode::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(520px 220px at 0% 50%, rgba(207,36,36,.22), transparent 55%);
  pointer-events:none;
}
.lbMode--pve::after{
  background: radial-gradient(520px 220px at 100% 50%, rgba(70,214,126,.18), transparent 55%);
}
.lbMode__label{position:absolute; left:18px; top:20px; color: rgba(255,255,255,.55); font-size: 16px;}
.lbMode__title{position:absolute; left:18px; top:44px; font-size: 30px; font-weight: 1000;}
.lbMode__img{
  position:absolute;
  right:-18px;
  bottom:-34px;
  height: 182px;
  width:auto;
  opacity:.95;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.55));
}
.lbMode__img--pvp{right:-14px; bottom:-30px;}
.lbMode__img--pve{right:-22px; bottom:-40px;}

.lbGrid{display:grid; grid-template-columns: 1fr 1fr; gap:14px;}
.lbCol{display:flex; flex-direction:column; gap:10px;}

.lbRow{
  display:grid;
  grid-template-columns: 76px 1fr auto;
  align-items:center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.lbIcon{width:64px; height:64px; object-fit:contain; filter: drop-shadow(0 10px 12px rgba(0,0,0,.55));}
.lbName{font-size: 28px; font-weight: 900;}
.lbValue{font-size: 16px; font-weight: 900; color: rgba(255,255,255,.88); font-variant-numeric: tabular-nums;}

@media (max-width: 980px){
  .lbTop{grid-template-columns: 1fr;}
  .lbGrid{grid-template-columns: 1fr;}
  .lbMode{height: 110px;}
  .lbName{font-size: 22px;}
}


/* ===== LB fix v2: PvP/PvE hero cards image overflow + bottom stick ===== */
.lbMode{overflow: visible;}
.lbMode::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  z-index: 0;
}
.lbMode > *{position:relative; z-index:1;}
.lbMode__img{
  bottom:-26px !important;
  top:auto !important;
  height: 210px !important;
  right:-34px !important;
  transform: translateY(-12px);
}
.lbMode__img--pvp{right:-28px !important;}
.lbMode__img--pve{right:-40px !important; bottom:-30px !important;}
.lbMode::after{z-index:0;}

/* ===== LB fix v2: row icons bigger + bottom-left ===== */
.lbRow{overflow:hidden;}
.lbIcon{
  width: 82px !important;
  height: 82px !important;
  justify-self: start;
  align-self: end;
  margin-left: -10px;
  margin-bottom: -10px;
}
.lbRow{grid-template-columns: 96px 1fr auto;}


/* ===== LB fix v4: match warbandits.gg positioning ===== */

/* PvP/PvE cards: keep bottom clipped, allow only TOP overflow by translating image upward */
.lbMode{
  overflow: hidden !important;
  position: relative;
}
.lbMode__label, .lbMode__title{position: relative; z-index: 3;}

.lbMode__img{
  position:absolute !important;
  bottom: 0 !important;        /* stick to bottom edge */
  right: -30px !important;
  height: 220px !important;    /* bigger */
  width: auto !important;
  transform: translateY(-34px) !important; /* top spills outside */
  z-index: 1 !important;
  pointer-events:none;
}
.lbMode__img--pvp{right: -18px !important;}
.lbMode__img--pve{right: -42px !important; transform: translateY(-38px) !important;}

/* Stats rows: icon should sit bottom-left and not shift layout (like ref) */
.lbRow{
  position: relative;
  overflow: hidden !important;
  grid-template-columns: 1fr auto !important;
  padding-left: 96px !important;
}
.lbIcon{
  position:absolute !important;
  left: -14px !important;
  bottom: -14px !important;
  width: 92px !important;
  height: 92px !important;
  object-fit: contain;
  z-index: 0 !important;
  opacity: .95;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.55));
}
.lbName, .lbValue{position: relative; z-index: 2;}
.lbValue{justify-self:end;}


/* ===== LB fix v5: match WarBandits (top overflow only, bottom anchored) ===== */

/* Allow top overflow to be visible (like reference). We prevent overlap by ensuring no bottom overflow. */
.lbMode{
  overflow: visible !important;
  position: relative;
}

/* Art: stick to bottom edge, rise up so it spills out of the top only */
.lbMode__img{
  bottom: 0 !important;
  height: 240px !important;            /* slightly bigger like reference */
  transform: translateY(-62px) !important; /* spill out from top */
  z-index: 1 !important;
}

/* Per-card fine tune */
.lbMode__img--pvp{
  right: -10px !important;             /* more visible */
  transform: translateY(-58px) !important;
}
.lbMode__img--pve{
  right: -26px !important;
  transform: translateY(-66px) !important;
}

/* Create breathing room between top cards and rows (shadow/overflow safe) */
.lbTop{ margin-bottom: 22px !important; }

/* ===== Row icon micro-balance: a bit more visible (up/right) ===== */
.lbIcon{
  left: -8px !important;
  bottom: -8px !important;
  width: 88px !important;
  height: 88px !important;
  opacity: .98 !important;
}
.lbRow{ padding-left: 92px !important; }


/* ===== v6: particles canvas globally on all pages ===== */
.fx{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.bg{position: fixed !important; inset:0 !important; z-index:-1 !important;}
/* keep content above particles */
.top, main, .hero, .plaincards, .lbpage, .page, .foot{
  position: relative;
  z-index: 1;
}


/* ===== v6: PvP/PvE art balance (no navbar overlap, stick to bottom) ===== */
.lbpage{ padding-top: 64px !important; } /* push down a bit */
.lbTop{ margin-top: 10px !important; }

/* keep bottom anchored, reduce upward spill */
.lbMode__img{
  bottom: 0 !important;
  height: 228px !important;
  transform: translateY(-38px) !important;
}
.lbMode__img--pvp{ right: -12px !important; transform: translateY(-36px) !important; }
.lbMode__img--pve{ right: -28px !important; transform: translateY(-42px) !important; }


/* ===== v7: PvP/PvE sit lower + smaller; page starts lower ===== */
.lbpage{
  padding-top: 92px !important; /* start lower so cards don't touch navbar */
}
.lbTop{ margin-top: 14px !important; }

/* Make the art smaller and visually lower in the card (less upward spill) */
.lbMode__img{
  height: 204px !important;
  transform: translateY(-22px) !important; /* less lift => sits lower */
}
.lbMode__img--pvp{
  right: -14px !important;
  transform: translateY(-20px) !important;
}
.lbMode__img--pve{
  right: -30px !important;
  transform: translateY(-24px) !important;
}

/* Keep particles canvas on all pages (already global, but enforce) */
.fx{position:fixed !important; inset:0 !important; z-index:0 !important; pointer-events:none !important;}


/* ===== v8: PvP/PvE images down + right (per feedback) ===== */
.lbMode__img{
  /* down: less negative translate */
  transform: translateY(-12px) !important;
}
.lbMode__img--pvp{
  right: -34px !important;            /* more to the right */
  transform: translateY(-10px) !important;
}
.lbMode__img--pve{
  right: -48px !important;
  transform: translateY(-14px) !important;
}


/* ===== v9: PvP/PvE fine balance (slightly lower, noticeably left) ===== */
.lbMode__img{ transform: translateY(-8px) !important; } /* a bit lower than v8 */
.lbMode__img--pvp{
  right: -12px !important;   /* move LEFT compared to v8 (was -34) */
  transform: translateY(-6px) !important;
}
.lbMode__img--pve{
  right: -20px !important;   /* move LEFT compared to v8 (was -48) */
  transform: translateY(-10px) !important;
}


/* ===== v9: modern nav indicator + disable selection highlight ===== */
::selection{background: transparent; color: inherit;}
::-moz-selection{background: transparent; color: inherit;}
/* optional: prevent selecting UI text/images (can still be bypassed) */
body, img, .nav, .btn, .card, .lbRow, .lbMode, .foot{
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Navbar: modern animated underline with accent glow */
.nav{position:relative;}
.nav__link{
  position: relative;
}
.nav__link::after{
  height: 3px !important;
  bottom: 2px !important;
  background: linear-gradient(90deg, rgba(207,36,36,1), rgba(255, 211, 120, .9), rgba(255,255,255,0)) !important;
  filter: drop-shadow(0 8px 18px rgba(207,36,36,.30));
}
.nav__link:hover{
  color: rgba(255,255,255,.96) !important;
}
.nav__link.is-active{
  color: rgba(255, 211, 120, .96) !important;
}
.nav__link.is-active::after{transform: scaleX(1) !important;}

/* Footer: keep hover-only, but give modern underline animation */
.foot__link{
  position: relative;
}
.foot__link::after{
  height: 3px;
  bottom: -6px;
  background: linear-gradient(90deg, rgba(207,36,36,1), rgba(255, 211, 120, .9), rgba(255,255,255,0));
  filter: drop-shadow(0 8px 18px rgba(207,36,36,.25));
}
.foot__link:hover{color: rgba(255,255,255,.96) !important;}
.foot__link--store:hover{color: rgba(255, 211, 120, .98) !important;}

/* ===== v9: Home spacing tighten ===== */
.plaincards--tight{
  margin-top: 70px !important; /* bring Store/Leaderboards/Discord closer to top section */
}
@media (max-width: 900px){
  .plaincards--tight{ margin-top: 48px !important; }
}


/* ===== v10: Atlas-like footer ===== */
.foot2{
  position: relative;
  background: rgba(11,12,16,.95);
  padding: 36px 0 22px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.foot2__top{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 28px;
  align-items:start;
}
.foot2__logoRow{display:flex; align-items:center; gap:12px; margin-bottom: 10px;}
.foot2__logo{width:34px; height:34px; border-radius:12px;}
.foot2__name{font-weight:1000; letter-spacing:.4px;}
.foot2__desc{
  color: rgba(255,255,255,.62);
  line-height: 1.65;
  max-width: 58ch;
  margin-bottom: 14px;
}
.foot2__social{display:flex; gap:10px;}
.sicon{
  width: 40px; height: 40px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  display:flex; align-items:center; justify-content:center;
  color: rgba(255,255,255,.82);
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.sicon:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255, 211, 120, .98);
}
.sicon__svg{width:20px; height:20px;}

.foot2__head{
  font-weight: 1000;
  color: rgba(255,255,255,.88);
  margin-bottom: 12px;
  position: relative;
  display:inline-block;
}
.foot2__head::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width: 28px; height: 2px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(207,36,36,1), rgba(255,211,120,.9));
  opacity:.9;
}

.foot2__link{
  display:block;
  width: fit-content;
  margin: 10px 0;
  color: rgba(255,255,255,.70);
  text-decoration:none;
  position: relative;
  transition: color .18s var(--ease), transform .18s var(--ease);
}
.foot2__link::after{
  content:"";
  position:absolute;
  left:0; right:-6px;
  bottom:-6px;
  height: 2px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(207,36,36,1), rgba(255,211,120,.9), rgba(255,255,255,0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease);
}
.foot2__link:hover{
  color: rgba(255,255,255,.94);
  transform: translateY(-1px);
}
.foot2__link:hover::after{transform: scaleX(1);}
.foot2__link--store:hover{color: rgba(255,211,120,.98);}
.foot2__mail{opacity:.92;}

.foot2__line{
  height:1px;
  background: rgba(255,255,255,.06);
  margin: 18px 0 16px;
}
.foot2__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  color: rgba(255,255,255,.60);
  font-size: 13px;
}
.heart{color: rgba(255, 80, 120, .95);}

/* Responsive footer */
@media (max-width: 980px){
  .foot2__top{grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .foot2__top{grid-template-columns: 1fr; }
  .foot2__bottom{flex-direction:column; align-items:flex-start;}
}

/* ===== v10: PvP/PvE final nudge (down + a bit right) ===== */
.lbMode__img{ transform: translateY(-4px) !important; height: 204px !important; }
.lbMode__img--pvp{ right: -22px !important; transform: translateY(-3px) !important; }
.lbMode__img--pve{ right: -34px !important; transform: translateY(-6px) !important; }


/* ===== v11: PvP/PvE art down + left ===== */
.lbMode__img{
  transform: translateY(10px) !important; /* down */
}
.lbMode__img--pvp{
  right: -4px !important;               /* left (less negative) */
  transform: translateY(12px) !important;
}
.lbMode__img--pve{
  right: -12px !important;              /* left (less negative) */
  transform: translateY(8px) !important;
}

/* ===== v11: Store tab is NOT gold by default ===== */
.nav__link--store{
  color: rgba(255,255,255,.78) !important;
}
.nav__link--store:hover,
.nav__link--store.is-active{
  color: rgba(255, 211, 120, .98) !important; /* gold only on hover/active */
}


/* ===== v12: Store tab behaves like others (no gold hover/active) ===== */
.nav__link--store{
  color: rgba(255,255,255,.78) !important;
}
.nav__link--store:hover,
.nav__link--store.is-active{
  color: rgba(255,255,255,.96) !important;
}
.nav__link--store::after{
  background: linear-gradient(90deg, rgba(207,36,36,1), rgba(255, 211, 120, .9), rgba(255,255,255,0)) !important;
}

/* ===== v12: PvP/PvE art up a bit + much more left ===== */
.lbMode__img{
  transform: translateY(0px) !important;   /* up vs v11 */
}
.lbMode__img--pvp{
  right: 28px !important;                  /* much more left (positive right pulls left) */
  transform: translateY(2px) !important;
}
.lbMode__img--pve{
  right: 12px !important;
  transform: translateY(-2px) !important;
}


/* ===== v13: Leaderboards background right glow green (keep left red) ===== */
.page--lb .bg__glow--b{
  background: radial-gradient(900px 520px at 85% 40%, rgba(70,214,126,.26), transparent 62%) !important;
}

/* ===== v13: Add HOME-like hover tilt + sheen to leaderboards cards ===== */
.shine{
  position: relative;
  transform-style: preserve-3d;
  transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.shine::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  background: radial-gradient(520px 220px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.12), transparent 60%);
  opacity: 0;
  transition: opacity .22s var(--ease);
  pointer-events:none;
}
.shine:hover::before{opacity:1;}
.shine:hover{
  border-color: rgba(255,255,255,.16);
}

/* Keep LB rows clickable feel without selecting */
.lbRow.shine{will-change: transform;}


/* ===== v14: sticky navbar on all pages ===== */
.top{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 80 !important;
  backdrop-filter: blur(14px);
  background: rgba(11,12,16,.62);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Add page offset so content doesn't go under fixed navbar */
body{padding-top: 86px;}
@media (max-width: 760px){
  body{padding-top: 78px;}
}


/* ===== v15: make Leaderboards right glow clearly green (not black) ===== */
.page--lb .bg__glow--b{
  background: radial-gradient(980px 620px at 85% 38%, rgba(90, 230, 150, .40), transparent 62%) !important;
  opacity: 1 !important;
  mix-blend-mode: screen;
}


/* ===== v16: PvP/PvE micro adjustments ===== */
/* PvP 1px up: bottom more negative by 1px (moves up) */
.lbMode__img--pvp{ bottom: -31px !important; }

/* PvE 1px down: bottom less negative by 1px (moves down) + 5px right: right more negative by 5px */
.lbMode__img--pve{ bottom: -39px !important; right: -27px !important; }


/* ===== v16: enable selection but customize highlight ===== */
body, .foot2, .foot2 *{
  -webkit-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}
img, svg, button, a{ -webkit-user-select: none !important; user-select: none !important; }

::selection{ background: rgba(255, 211, 120, .28); color: rgba(255,255,255,.98); }
::-moz-selection{ background: rgba(255, 211, 120, .28); color: rgba(255,255,255,.98); }


/* ===== v16: Leaderboards totals bar ===== */
.lbTotals{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.lbTotal{
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  overflow:hidden;
}
.lbTotal__icon img{
  width: 74px;
  height: 74px;
  object-fit: contain;
  opacity: .95;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.55));
}
.lbTotal__k{
  color: rgba(255,255,255,.60);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.lbTotal__v{
  margin-top: 8px;
  font-size: 22px;
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
}
.lbTotal--left .lbTotal__txt{ text-align:left; }
.lbTotal--right .lbTotal__txt{ text-align:right; }
@media (max-width: 980px){
  .lbTotals{grid-template-columns: 1fr;}
}


/* ===== v17: PvP/PvE art is anchored to the card (no detaching) ===== */
.lbMode{
  position: relative !important;
  overflow: visible !important; /* allow only top spill */
}
.lbMode__art{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.lbMode__label, .lbMode__title{ position: absolute; z-index: 3; }

.lbMode__img{
  position: absolute !important;
  bottom: 0 !important;          /* stick to card floor */
  width: auto !important;
  transform: translateY(-14px) !important; /* controls top spill */
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.55));
  pointer-events:none;
}

/* Tune per card: small differences */
.lbMode__img--pvp{ right: -14px !important; transform: translateY(-15px) !important; }
.lbMode__img--pve{ right: -22px !important; transform: translateY(-13px) !important; }

/* Avoid legacy overrides */
.lbMode__img--pvp, .lbMode__img--pve{ top: auto !important; left: auto !important; }


/* ===== v18: PvP/PvE final placement (anchored + balanced) ===== */
.lbMode__img{
  transform: translateY(-6px) !important;
  height: 190px !important;
}
.lbMode__img--pvp{
  right: -44px !important;
  transform: translateY(-4px) !important;
}
.lbMode__img--pve{
  right: -58px !important;
  transform: translateY(-8px) !important;
}


/* ===== v19: PvP/PvE art fully INSIDE the card (no spill) ===== */
.lbMode{
  overflow: hidden !important;
}
.lbMode__img{
  height: 160px !important;       /* smaller */
  bottom: 0 !important;           /* still grounded */
  transform: translateY(0px) !important; /* no top spill */
  opacity: .92;
}

/* Fine tuning per card so it feels balanced inside */
.lbMode__img--pvp{
  right: -26px !important;
  height: 158px !important;
}
.lbMode__img--pve{
  right: -34px !important;
  height: 168px !important;
}


/* ===== Loader overlay (removed in v76 — element gone) =====
   The pageLoader div was a fixed full-viewport black overlay
   (rgba(10,11,16,.92) + backdrop-filter: blur(14px)). Even
   when given .is-hide (opacity:0 + visibility:hidden), the
   backdrop-filter and stacking layer were still affecting
   how the page rendered underneath, making the home hero
   look black. The element is now removed from index.html
   and the JS hide-on-load IIFE was deleted. These rules
   stay neutralised in case any cached HTML still ships it. */
.loader{ display: none !important; }

/* ===== Custom selection (no default blue) ===== */
::selection{
  background: rgba(90, 230, 150, .26);
  color: rgba(255,255,255,.98);
}
::-moz-selection{
  background: rgba(90, 230, 150, .26);
  color: rgba(255,255,255,.98);
}


/* =====================================================
   v20 — Players Leaderboard table + Player Profile page
   Designed to match the existing Persian Toxic aesthetic.
   ===================================================== */

/* Display font for headings & numerics on these new sections */
.page--lb .plBoard,
.page--lb .playerPage .pp,
.page--lb .playerPage .ssBox,
.page--lb .playerPage .shotBox,
.page--lb .playerPage .ltBox{
  font-family: "Rajdhani", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  letter-spacing: .2px;
}

.page--lb .plBoard__brandName,
.page--lb .pp__name,
.page--lb .ssBox__title,
.page--lb .shotBox__title,
.page--lb .ltBox__title{
  font-family: "Russo One", "Rajdhani", ui-sans-serif, system-ui, -apple-system, sans-serif;
  letter-spacing: .6px;
}

/* ===== Players Leaderboard container ===== */
.plBoard{
  margin-top: 26px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(20,16,20,.55), rgba(10,10,16,.55)),
    rgba(0,0,0,.20);
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
  overflow: hidden;
  position: relative;
}
.plBoard::before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(800px 220px at 50% 0%, rgba(207,36,36,.18), transparent 55%);
  pointer-events:none;
  border-radius: inherit;
}

/* ===== Top bar ===== */
.plBoard__bar{
  position: relative;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,0));
}
.plBoard__tabs{display:flex; gap:8px}
.plTab{
  appearance:none; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.78);
  height: 40px; padding: 0 16px; border-radius: 12px;
  display:inline-flex; align-items:center; gap: 8px;
  font-weight: 700; font-size: 14px; letter-spacing:.4px;
  cursor:pointer;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  font-family: "Rajdhani", system-ui, sans-serif;
}
.plTab:hover{transform: translateY(-1px); background: rgba(255,255,255,.06); color: #fff}
.plTab.is-active{
  color:#fff;
  border-color: rgba(207,36,36,.55);
  background: linear-gradient(180deg, rgba(207,36,36,.22), rgba(207,36,36,.06));
  box-shadow: 0 8px 24px rgba(207,36,36,.18), inset 0 0 0 1px rgba(207,36,36,.18);
}
.plTab__svg{width:16px; height:16px; opacity:.95}

.plBoard__brand{
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap: 2px;
  min-width: 220px;
}
.plBoard__brandName{
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 1.2px;
  background: linear-gradient(90deg, #ff5454, #cf2424 60%, #ffb86b);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 14px rgba(207,36,36,.18));
}
.plBoard__brandName em{
  font-style: normal;
  background: linear-gradient(90deg, #ffb86b, #ffd270);
  -webkit-background-clip: text; background-clip:text;
  -webkit-text-fill-color: transparent;
}
.plBoard__brandSub{
  font-size: 12px;
  color: rgba(255,255,255,.66);
  font-weight: 600;
  display:inline-flex; align-items:center; gap:6px;
  letter-spacing: .3px;
}
.plDot{
  width:8px; height:8px; border-radius:99px;
  background:#46d67e; box-shadow: 0 0 0 0 rgba(70,214,126,.6);
  animation: plPulse 1.6s ease-out infinite;
}
@keyframes plPulse{
  0%{ box-shadow: 0 0 0 0 rgba(70,214,126,.55);}
  70%{ box-shadow: 0 0 0 10px rgba(70,214,126,0);}
  100%{ box-shadow: 0 0 0 0 rgba(70,214,126,0);}
}

.plBoard__rightSpacer{ min-width: 80px; justify-self: end; }

/* ===== Body grid: side panel + table ===== */
.plBoard__body{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
}

/* ===== Side panel ===== */
.plSide{
  padding: 18px 16px;
  border-right: 1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; gap: 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,0));
}
.plSearch{
  position: relative;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
  display:flex; align-items:center; padding: 0 12px 0 38px;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.plSearch:focus-within{
  border-color: rgba(207,36,36,.45);
  background: rgba(0,0,0,.40);
  box-shadow: 0 0 0 4px rgba(207,36,36,.10);
}
.plSearch svg{
  width:18px; height:18px;
  position:absolute; left:12px;
  color: rgba(255,255,255,.55);
}
.plSearch input{
  width:100%; height:100%; border:0; outline:0;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: .2px;
}
.plSearch input::placeholder{color: rgba(255,255,255,.45)}

.plCats{
  display:flex; flex-direction:column; gap: 6px;
  margin-top: 6px;
}
.plCat{
  position: relative;
  display:flex; align-items:center; gap: 12px;
  height: 44px; padding: 0 14px 0 16px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.72);
  font-weight: 700; font-size: 14px; letter-spacing: .5px;
  cursor:pointer; text-align:left;
  font-family: "Rajdhani", system-ui, sans-serif;
  transition: transform .22s var(--ease), color .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
  overflow: hidden;
}
.plCat:hover{
  color: #fff;
  background: rgba(255,255,255,.05);
  transform: translateX(2px);
}
.plCat__bar{
  position:absolute; left:0; top:8px; bottom:8px; width: 3px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #cf2424, #ff8b6b);
  opacity: 0;
  transition: opacity .22s var(--ease), width .22s var(--ease);
}
.plCat.is-active{
  color: #fff;
  background: linear-gradient(90deg, rgba(207,36,36,.22), rgba(207,36,36,.04));
  border-color: rgba(207,36,36,.45);
  box-shadow: inset 0 0 0 1px rgba(207,36,36,.16);
}
.plCat.is-active .plCat__bar{ opacity: 1; }
.plCat__icon{
  width:22px; height:22px; display:grid; place-items:center;
  color: rgba(255,255,255,.78);
}
.plCat.is-active .plCat__icon{ color: #ffb0a0; }
.plCat__icon svg{width: 18px; height: 18px}

/* ===== Table area ===== */
.plTable{
  padding: 14px 18px 18px;
  min-width: 0;
}
.plTable__inner{
  display: flex; flex-direction: column;
}

.plHead{
  display: grid;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 44px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 6px;
  position: sticky; top: 0; z-index: 2;
}
.plH{
  font-size: 12px;
  letter-spacing: 1.2px;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  background: transparent;
  border:0; cursor:pointer;
  font-family: "Rajdhani", system-ui, sans-serif;
  display: inline-flex; align-items: center; gap: 4px;
  text-align: left;
  transition: color .2s var(--ease);
}
.plH--rank{ justify-self:center; }
.plH--name{ justify-self:start; padding-left: 4px;}
.plH--num{ justify-self: end; padding-right: 4px;}
.plH:hover{ color: rgba(255,255,255,.85);}
.plH.is-sorted{ color: #ffb0a0; }
.plH__arr{ font-size: 11px; color: #cf2424; }

/* ===== Scrollable rows area ===== */
.plScroll{
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(207,36,36,.45) rgba(255,255,255,.05);
  padding-right: 4px;
}
.plScroll::-webkit-scrollbar{ width: 8px; }
.plScroll::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius: 99px; }
.plScroll::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(207,36,36,.55), rgba(176,138,42,.45));
  border-radius: 99px;
}
.plScroll::-webkit-scrollbar-thumb:hover{ background: rgba(207,36,36,.75); }

.plRows{ display:flex; flex-direction: column; gap: 6px; padding: 4px 0 4px;}

@keyframes plRowIn{
  from{ opacity: 0; transform: translateY(6px); }
  to  { opacity: 1; transform: translateY(0); }
}

.plRow{
  display: grid;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  text-decoration: none;
  color: rgba(255,255,255,.92);
  position: relative;
  overflow: hidden;
  transition: transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
  animation: plRowIn .45s var(--ease) both;
}
.plRow::after{
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(207,36,36,.12), transparent 60%);
  opacity: 0;
  transition: opacity .22s var(--ease);
  pointer-events: none;
}
.plRow:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.04);
  border-color: rgba(207,36,36,.32);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.plRow:hover::after{ opacity: 1; }

/* Top-3 highlight */
.plRow--top1{
  border-color: rgba(255,193,77,.42);
  background: linear-gradient(90deg, rgba(255,193,77,.10), rgba(255,193,77,.02) 60%);
  box-shadow: inset 0 0 0 1px rgba(255,193,77,.10);
}
.plRow--top2{
  border-color: rgba(220,220,235,.32);
  background: linear-gradient(90deg, rgba(220,220,235,.07), rgba(220,220,235,.02) 60%);
}
.plRow--top3{
  border-color: rgba(225,140,80,.36);
  background: linear-gradient(90deg, rgba(225,140,80,.08), rgba(225,140,80,.02) 60%);
}

.plRk{
  font-weight: 800;
  color: rgba(255,255,255,.62);
  font-size: 14px;
  text-align:center;
  font-family: "Rajdhani", system-ui, sans-serif;
  letter-spacing: .3px;
}
.plRk--gold, .plRk--silver, .plRk--bronze{
  width: 30px; height: 30px;
  border-radius: 99px;
  display: inline-grid; place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: #1a0e08;
  margin: 0 auto;
  position: relative;
}
.plRk--gold{
  background: linear-gradient(180deg, #ffe390, #ffb43a);
  box-shadow: 0 6px 14px rgba(255,180,58,.35), inset 0 1px 0 rgba(255,255,255,.6);
}
.plRk--silver{
  background: linear-gradient(180deg, #f4f4f7, #b9bcc6);
  box-shadow: 0 6px 14px rgba(190,195,210,.30), inset 0 1px 0 rgba(255,255,255,.6);
}
.plRk--bronze{
  background: linear-gradient(180deg, #ffb582, #c1641e);
  box-shadow: 0 6px 14px rgba(193,100,30,.30), inset 0 1px 0 rgba(255,255,255,.55);
}
.plRk--gold span, .plRk--silver span, .plRk--bronze span{ display:block; }

.plPlayer{ display:flex; align-items:center; gap: 12px; min-width: 0;}
.plAva{
  width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(207,36,36,.32), rgba(176,138,42,.32));
  display: inline-grid; place-items: center;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.10);
  flex: 0 0 34px;
  font-family: "Russo One", sans-serif;
  letter-spacing: 0;
}
.plPlayer__name{
  font-weight: 700;
  font-size: 15px;
  color: rgba(255,255,255,.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .25px;
  min-width: 0;
}
.plRow--top1 .plPlayer__name{ color: #ffd270; text-shadow: 0 0 10px rgba(255,210,112,.18); }

.plC{
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
  padding-right: 4px;
  color: rgba(255,255,255,.90);
  font-size: 14px;
  font-family: "Rajdhani", system-ui, sans-serif;
}

.plFoot{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  text-align: right;
  letter-spacing: .4px;
}

/* ===== Mobile ===== */
@media (max-width: 980px){
  .plBoard__body{ grid-template-columns: 1fr; }
  .plSide{ border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .plCats{ flex-direction: row; flex-wrap: wrap; }
  .plCat{ flex: 1 1 calc(50% - 6px); }
  .plBoard__bar{ grid-template-columns: 1fr; text-align: center; }
  .plBoard__rightSpacer{ display: none; }
  .plBoard__tabs{ justify-content: center; }
  .plH--num, .plC{ font-size: 13px; }
  .plScroll{ max-height: 60vh; }
  .plPlayer__name{ font-size: 14px;}
}
@media (max-width: 640px){
  /* Compress columns: hide non-essential ones via CSS — JS still renders, we shrink padding */
  .plRow, .plHead{ padding-left: 8px; padding-right: 8px; }
  .plH{ font-size: 10px; }
  .plBoard__brandName{ font-size: 18px; }
}


/* =====================================================
   Player Profile page
   ===================================================== */
.playerPage{ padding-top: 22px !important; }

.backLink{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700;
  color: rgba(255,255,255,.62);
  text-decoration: none;
  margin-bottom: 14px;
  font-family: "Rajdhani", system-ui, sans-serif;
  letter-spacing: .8px;
  text-transform: uppercase;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.backLink:hover{ color: #fff; transform: translateX(-2px);}
.backLink svg{ width: 16px; height: 16px; }

/* === Player header card === */
.pp{
  position: relative;
  display:grid;
  grid-template-columns: 1.2fr 1fr 1.4fr;
  gap: 18px;
  align-items: center;
  padding: 22px 26px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(600px 220px at 0% 0%, rgba(207,36,36,.16), transparent 55%),
    linear-gradient(180deg, rgba(20,16,20,.55), rgba(10,10,16,.55)),
    rgba(0,0,0,.20);
  box-shadow: 0 26px 60px rgba(0,0,0,.45);
  overflow: hidden;
}
.pp::after{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(800px 220px at 100% 100%, rgba(176,138,42,.10), transparent 60%);
  pointer-events:none;
  border-radius: inherit;
}

.pp__l{ display:flex; align-items:center; gap: 16px; min-width: 0; }
.pp__avatar{
  width: 84px; height: 84px;
  border-radius: 18px;
  position: relative;
  display:grid; place-items:center;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,210,112,.36), transparent 65%),
    linear-gradient(135deg, rgba(207,36,36,.55), rgba(176,138,42,.45));
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 16px 36px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.10);
  flex: 0 0 84px;
}
.pp__avatarTxt{
  font-family: "Russo One", sans-serif;
  font-size: 36px;
  color: #fff;
  text-shadow: 0 4px 12px rgba(0,0,0,.45);
}
.pp__avatarRing{
  position:absolute; inset:-3px;
  border-radius: inherit;
  border: 1px dashed rgba(255,255,255,.18);
  animation: ppRing 14s linear infinite;
  pointer-events:none;
}
@keyframes ppRing{ to { transform: rotate(360deg); } }

.pp__id{ min-width: 0; }
.pp__name{
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #fff;
  letter-spacing: .8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
.pp__tag{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(207,36,36,.20), rgba(176,138,42,.16));
  border: 1px solid rgba(255,212,134,.28);
  font-size: 13px; font-weight: 700;
  color: #ffd07a;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-family: "Rajdhani", system-ui, sans-serif;
}
.pp__tagDot{
  width:8px; height:8px; border-radius:99px;
  background: linear-gradient(135deg, #ffd270, #cf2424);
  box-shadow: 0 0 12px rgba(255,210,112,.55);
}
.pp__tagSep{ color: rgba(255,212,134,.48); }
.pp__tagTime{ color: rgba(255,255,255,.78); font-weight: 600; text-transform: none; letter-spacing: .3px;}

.pp__meta{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.pp__metaCell{
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
  padding: 12px 14px;
}
.pp__metaK{
  font-size: 11px; letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  font-weight: 700;
}
.pp__metaV{
  margin-top: 4px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: .4px;
  font-family: "Rajdhani", system-ui, sans-serif;
}

.pp__donuts{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: center;
}

/* === Donut === */
.donut{
  position: relative;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px;
  align-items: center;
}
.donut__svg{
  width: 130px; height: 130px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}
.donut__track{
  fill: none;
  stroke: rgba(255,255,255,.08);
  stroke-width: 12;
}
.donut__seg{
  fill: none;
  stroke-width: 12;
  stroke-linecap: butt;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  transition: stroke-dasharray .8s var(--ease);
}
.donut__seg--kills{ stroke: #cf2424; }
.donut__seg--stone{ stroke: rgba(220,220,235,.65); }
.donut__seg--metal{ stroke: #d97a3a; }
.donut__seg--sulfur{stroke: #c8d96a; }
.donut__seg--wood{ stroke: rgba(255,255,255,.18); }

.donut__center{
  position: absolute;
  left: 65px; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.donut__num{
  font-family: "Russo One", sans-serif;
  font-size: 22px;
  color: #fff;
  letter-spacing: .5px;
}
.donut__numSm{
  font-family: "Russo One", sans-serif;
  font-size: 14px;
  color: #fff;
  letter-spacing: .2px;
}
.donut__lbl{
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  font-weight: 700;
  margin-top: 2px;
}
.donut__legend{
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.78);
}
.donut__legend--grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px;
}
.donut__legend span{ display:inline-flex; align-items:center; gap: 8px; }
.donut__legend b{ color: #fff; font-variant-numeric: tabular-nums;}
.dot{ width:10px; height:10px; border-radius:99px; display:inline-block; }
.dot--red{ background: #cf2424; }
.dot--gray{ background: rgba(220,220,235,.65); }
.dot--orange{ background: #d97a3a; }
.dot--lime{ background: #c8d96a; }
.dot--brown{ background: rgba(255,255,255,.30); }

@media (max-width: 980px){
  .pp{ grid-template-columns: 1fr; }
  .pp__name{ max-width: none; }
  .pp__donuts{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .pp__donuts{ grid-template-columns: 1fr; }
  .pp__meta{ grid-template-columns: 1fr 1fr; }
  .donut{ grid-template-columns: 110px 1fr; }
  .donut__svg{ width:110px; height: 110px; }
  .donut__center{ left: 55px; }
}

/* === Server stats box === */
.ssBox{
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(20,16,20,.55), rgba(10,10,16,.55)), rgba(0,0,0,.20);
  padding: 18px 22px;
  position: relative;
  box-shadow: 0 26px 60px rgba(0,0,0,.45);
}
.ssBox__head{
  display:flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.ssBox__title{ font-size: 18px; font-weight: 700; color: #fff; margin: 0; letter-spacing: .8px; }

.ssDrop{ position: relative; }
.ssDrop__btn{
  appearance: none;
  height: 38px;
  padding: 0 12px 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(207,36,36,.45);
  background: linear-gradient(180deg, rgba(207,36,36,.22), rgba(207,36,36,.04));
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  font-family: "Rajdhani", system-ui, sans-serif;
  letter-spacing: .6px;
  min-width: 130px;
  justify-content: space-between;
  transition: filter .2s var(--ease), transform .2s var(--ease);
}
.ssDrop__btn:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.ssDrop__btn svg{ width: 14px; height: 14px; transition: transform .2s var(--ease);}
.ssDrop.is-open .ssDrop__btn svg{ transform: rotate(180deg);}
.ssDrop__menu{
  position: absolute; right: 0; top: calc(100% + 6px);
  list-style: none; margin: 0; padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15,12,18,.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  min-width: 140px;
  z-index: 5;
  font-family: "Rajdhani", system-ui, sans-serif;
}
.ssDrop__menu li{
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.78);
  cursor: pointer;
  letter-spacing: .4px;
  transition: background .15s, color .15s;
}
.ssDrop__menu li:hover{ background: rgba(255,255,255,.05); color: #fff; }
.ssDrop__menu li.is-sel{ color: #fff; background: rgba(207,36,36,.18); }

.ssBox__chart{
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  height: 200px;
  padding: 6px 6px 6px 0;
  border-top: 1px dashed rgba(255,255,255,.06);
  margin-top: 6px;
}
.ssAxis{
  display:flex; flex-direction:column; justify-content:space-between;
  font-size: 11px;
  color: rgba(255,255,255,.45);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: "Rajdhani", system-ui, sans-serif;
  letter-spacing: .2px;
}
.ssBars{
  position: relative;
  height: 100%;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 0 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 95%, rgba(255,255,255,.04) 95%),
    repeating-linear-gradient(180deg, transparent 0 39px, rgba(255,255,255,.04) 39px 40px);
  border-radius: 10px;
}
.ssCol{
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  height: 100%;
  width: 150px;
  padding: 0 18px;
}
.ssCol__top{
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center;
  gap: 6px;
  min-height: 0;
  width: 100%;
}
.ssCol__bar{
  width: 110px;
  height: var(--h, 70%);
  min-height: 6px;
  background:
    linear-gradient(180deg, #ff5454, #cf2424 60%, rgba(207,36,36,.7));
  border-radius: 6px 6px 0 0;
  box-shadow:
    0 -4px 0 rgba(255,255,255,.08) inset,
    0 8px 18px rgba(207,36,36,.32);
  position: relative;
  transition: height .65s var(--ease);
}
.ssCol__bar::after{
  content:"";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 22%);
  border-radius: inherit;
  pointer-events:none;
}
.ssCol__val{
  font-size: 14px; font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-family: "Russo One", sans-serif;
  letter-spacing: .3px;
}
.ssCol__lbl{
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.62);
  letter-spacing: .8px;
  text-transform: uppercase;
  font-family: "Rajdhani", system-ui, sans-serif;
  white-space: nowrap;
}

/* === Bottom grid: Shot Analysis + Lifetime === */
.pgrid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 14px;
}
@media (max-width: 1080px){ .pgrid{ grid-template-columns: 1fr; } }

.shotBox, .ltBox{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(20,16,20,.55), rgba(10,10,16,.55)), rgba(0,0,0,.20);
  padding: 18px 22px;
  box-shadow: 0 26px 60px rgba(0,0,0,.45);
  position: relative;
}
.shotBox__title, .ltBox__title{
  font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 10px;
  letter-spacing: .8px;
}

.shotBox__body{ display: grid; place-items: center; padding: 6px 0; }
.silh{
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 240 / 380;
}
.silh__svg{
  width: 100%; height: 100%;
  display: block;
}

.hot{
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  display: inline-flex; flex-direction: column; align-items:center;
  gap: 2px;
  pointer-events: none;
}
.hot__k{
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  font-weight: 700;
  font-family: "Rajdhani", system-ui, sans-serif;
  white-space: nowrap;
}
.hot__v{
  font-family: "Russo One", sans-serif;
  font-size: 14px;
  color: #fff;
  background: rgba(0,0,0,.55);
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 6px 14px rgba(0,0,0,.4);
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
  min-width: 30px; text-align: center;
}

/* Position adjustments per hotspot to keep labels readable */
.hot--head{ --x:50%; --y:8%; }
.hot--chest{ --x:30%; --y:30%; }
.hot--larm{ --x:6%; --y:36%; }
.hot--rarm{ --x:94%; --y:36%; }
.hot--lhand{ --x:6%; --y:60%; }
.hot--rhand{ --x:94%; --y:60%; }
.hot--lleg{ --x:14%; --y:78%; }
.hot--rleg{ --x:86%; --y:78%; }
.hot--lfoot{ --x:18%; --y:96%; }
.hot--rfoot{ --x:82%; --y:96%; }

@media (max-width: 640px){
  .silh{ width: 100%; }
  .hot__k{ font-size: 9px; }
  .hot__v{ font-size: 12px; padding: 3px 7px;}
}

/* === Lifetime stats === */
.lt{ margin-top: 12px; }
.lt:first-of-type{ margin-top: 4px;}
.lt__head{
  font-size: 13px;
  letter-spacing: 1.4px;
  font-weight: 700;
  color: #ffb0a0;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(207,36,36,.18), transparent 80%);
  border-left: 3px solid #cf2424;
  font-family: "Rajdhani", system-ui, sans-serif;
}

.lt__row{
  display: grid;
  gap: 8px;
}
.lt__row--6{ grid-template-columns: repeat(6, 1fr); }
.lt__row--4{ grid-template-columns: repeat(4, 1fr); }

.lt__cell{
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.20);
  padding: 10px 8px;
  text-align: center;
  transition: transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
}
.lt__cell:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.04);
  border-color: rgba(207,36,36,.32);
}
.lt__k{
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  font-weight: 700;
  font-family: "Rajdhani", system-ui, sans-serif;
}
.lt__v{
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-family: "Rajdhani", system-ui, sans-serif;
  letter-spacing: .3px;
}

@media (max-width: 980px){
  .lt__row--6{ grid-template-columns: repeat(3, 1fr); }
  .lt__row--4{ grid-template-columns: repeat(2, 1fr); }
}

/* ===== Polishing the existing top section a touch ===== */
.lbMode{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(207,36,36,.10), transparent 55%),
    rgba(0,0,0,.22) !important;
}
.lbMode--pve{
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(70,214,126,.10), transparent 55%),
    rgba(0,0,0,.22) !important;
}
.lbMode__title{
  font-family: "Russo One", sans-serif !important;
  font-size: 32px !important;
  letter-spacing: 1px;
}
.lbMode__label{
  font-family: "Rajdhani", system-ui, sans-serif !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.45) !important;
}
.lbValue{
  font-family: "Rajdhani", system-ui, sans-serif !important;
  font-size: 18px !important;
  letter-spacing: .4px;
}
.lbName{
  font-family: "Russo One", sans-serif !important;
  font-size: 24px !important;
  letter-spacing: .6px;
}
.lbTotal__k{
  font-family: "Rajdhani", system-ui, sans-serif !important;
}
.lbTotal__v{
  font-family: "Russo One", sans-serif !important;
  letter-spacing: .6px;
}

/* =====================================================
   v21 — Redesigned Global PvP / PvE hero cards
   Characters POP OUT above the card top edge.
   Cards are short clean rectangles; the art lives outside.
   ===================================================== */

/* Parent must NOT clip overflow */
.lbpage, .container { overflow: visible !important; }

.lbTop{
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
  margin-bottom: 22px !important;
  /* Reserve room for the head poking above the card */
  padding-top: 70px !important;
  margin-top: 0 !important;
  overflow: visible !important;
}
.lbMode{
  position: relative;
  height: 116px !important;
  border-radius: 18px !important;
  overflow: visible !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  background:
    radial-gradient(120% 110% at 95% 50%, rgba(207,36,36,.22), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.22)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 40px -28px rgba(0,0,0,.7) !important;
}
.lbMode--pve{
  background:
    radial-gradient(120% 110% at 95% 50%, rgba(70,214,126,.22), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.22)) !important;
}
/* Kill all inherited pseudo-element art layers */
.lbMode::before,
.lbMode::after{
  content: none !important;
}

/* Labels: simple, lowercase Global, gray */
.lbMode__label{
  position: absolute !important;
  left: 32px !important;
  top: 26px !important;
  font-family: "Inter", system-ui, -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(255,255,255,.40) !important;
  z-index: 3;
}
.lbMode__label::before{ content: none !important; }
.lbMode__title{
  position: absolute !important;
  left: 32px !important;
  top: 50px !important;
  font-family: "Inter", system-ui, -apple-system, sans-serif !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  letter-spacing: -.5px !important;
  color: #ffffff !important;
  z-index: 3;
  line-height: 1;
}

/* Character art: anchored at the card BOTTOM; only the head pokes above. */
.lbMode__art{
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none;
  overflow: visible !important;
  z-index: 1;
}
.lbMode__img{
  position: absolute !important;
  width: auto !important;
  top: auto !important;
  left: auto !important;
  bottom: 0 !important;
  transform: none !important;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.55));
  pointer-events: none;
}
.lbMode__img--pvp{
  height: 168px !important;
  right: 24px !important;
}
.lbMode__img--pve{
  height: 162px !important;
  right: 16px !important;
}

/* No transform-based hover (jittery with overflow art); just a soft glow shift. */
.lbMode{
  transition: background .25s var(--ease) !important;
}
.lbMode:hover{
  transform: none !important;
}
.lbMode--pvp:hover{
  background:
    radial-gradient(120% 110% at 95% 50%, rgba(207,36,36,.32), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.22)) !important;
}
.lbMode--pve:hover{
  background:
    radial-gradient(120% 110% at 95% 50%, rgba(70,214,126,.32), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.22)) !important;
}

/* Tablet / mobile */
@media (max-width: 880px){
  .lbTop{ padding-top: 70px !important; }
  .lbMode__img--pvp{ height: 150px !important; right: 14px !important; }
  .lbMode__img--pve{ height: 144px !important; right: 6px !important; }
}
@media (max-width: 620px){
  .lbTop{ grid-template-columns: 1fr !important; gap: 14px !important; padding-top: 70px !important; }
  .lbMode{ height: 100px !important; }
  .lbMode__title{ font-size: 26px !important; top: 44px !important; }
  .lbMode__label{ top: 20px !important; font-size: 13px !important; }
  .lbMode__img--pvp{ height: 138px !important; }
  .lbMode__img--pve{ height: 132px !important; }
}

/* =====================================================
   v22 — Player profile tweaks
   - Donut hover tooltips
   - Farming legend with item icons
   - Avatar supports Steam profile image
   - "All Stats" header with "Resets every wipe" pill
   ===================================================== */

/* Avatar: solid dark box until a real Steam image arrives */
.pp__avatar { position: relative; }
.pp__avatar{
  background: #1a1a1f !important;
}
.pp__avatarImg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 2;
}

/* Donut: keep segments static (no highlight thickening), just hover cursor */
.donut__seg{ cursor: pointer; }
.donut__center{ pointer-events: none; }

/* Small floating tooltip — positioned by JS at cursor offset, inside the donut box */
.donut{ position: relative; }
.donut__tip[hidden]{ display: none !important; }
.donut__tip{
  position: absolute;
  left: 0; top: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: rgba(20,20,24,.95);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(0,0,0,.55);
  pointer-events: none;
  z-index: 6;
  white-space: nowrap;
  transform: translate(-50%, -100%);
}
.donut__tipDot{ display: none; }
.donut__tipName{
  font-family: "Rajdhani", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: .8px;
}
.donut__tipVal{
  font-family: "Russo One", sans-serif;
  font-size: 13px;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
}

/* Farming legend with item icons */
.donut__legend--icons span{
  display: inline-flex; align-items: center; gap: 6px;
}
.legIco{
  width: 18px; height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
  flex-shrink: 0;
}
.donut__legend--icons b{
  font-family: "Rajdhani", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

/* (Wipe-reset pills removed per request) */
.pp__avatarTxt{ display: none !important; }


/* =====================================================
   v23 — Hero card fixes
   - Only the HEAD pokes above the card (clip sides + bottom)
   - Smooth tilt animation matching lbTotal cards
     (drop the CSS transform-transition that fights with JS tilt)
   - Slight reposition so the figure sits framed in the card
   ===================================================== */

/* Cancel the CSS transform transition that was lagging the JS tilt.
   Keep the box-shadow ease so the hover glow still fades softly. */
.lbMode{
  transition: box-shadow .25s var(--ease) !important;
}
.lbMode:hover{
  transform: none; /* let JS tilt own the transform */
}

/* Clip horizontally + below; allow huge top overflow ⇒ only head pokes out */
.lbMode{
  clip-path: inset(-9999px 0 0 0) !important;
}
.lbMode__art{
  /* art layer must let the head escape vertically too */
  overflow: visible !important;
}

/* Reposition the figures: more inside the card, less spilling sideways */
.lbMode__img--pvp{
  height: 220px !important;
  right: 28px !important;
  bottom: -6px !important;
}
.lbMode__img--pve{
  height: 210px !important;
  right: 22px !important;
  bottom: -6px !important;
}

/* The hover keyframe lifted the card 2px via CSS — now it's purely tilt */
.lbMode{ will-change: transform; }

/* =====================================================
   v24 — Refinements
   - Farming donut palette (silver / dark silver / lemon / brown)
   - Shot Analysis: real silhouette image (instead of SVG)
   - Navbar: floating pill on scroll
   ===================================================== */

/* === Farming donut colors (override v?) === */
.donut__seg--stone  { stroke: #c0c0c8 !important; }   /* silver        */
.donut__seg--metal  { stroke: #6e7180 !important; }   /* darker silver */
.donut__seg--sulfur { stroke: #e6e84a !important; }   /* lemon yellow  */
.donut__seg--wood   { stroke: #8b5a2b !important; }   /* brown         */

/* === Shot Analysis silhouette image === */
.silh{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 420px;
  padding: 14px 0;
}
.silh__img{
  display: block;
  max-height: 460px;
  width: auto;
  user-select: none; pointer-events: none;
  /* Screen blend: black pixels disappear into the dark card,
     non-black pixels (real silhouette) show normally. */
  mix-blend-mode: screen;
  opacity: .9;
}
.silh__svg{ display: none !important; } /* old SVG hidden if any leftover */

/* === Navbar floating-pill behavior === */
.top{
  /* keep sticky, but transition the inner pill smoothly */
  transition: padding .35s var(--ease), background .35s var(--ease);
}
.top__inner{
  transition:
    height .35s var(--ease),
    margin .35s var(--ease),
    border-radius .35s var(--ease),
    padding .35s var(--ease),
    background .35s var(--ease),
    border-color .35s var(--ease),
    box-shadow .35s var(--ease),
    transform .35s var(--ease);
  border: 1px solid transparent;
}

/* SCROLLED state: turn header transparent, lift inner into a rounded pill */
.top.is-scrolled{
  background: transparent !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none;
  padding-top: 12px;
  padding-bottom: 4px;
}
.top.is-scrolled .top__inner{
  height: 64px;
  margin: 0 8px;
  padding: 0 22px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(22,16,18,.92), rgba(14,12,16,.86));
  border-color: rgba(255,255,255,.08);
  box-shadow:
    0 18px 38px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Slightly tighten brand + login button only when in pill mode */
.top.is-scrolled .brand{ min-width: auto; }
.top.is-scrolled .brand__logo{ width: 36px; height: 36px; }
.top.is-scrolled .brand__name{ font-size: 14px; }
.top.is-scrolled .nav__link{ padding: 8px 12px; }
.top.is-scrolled .btn--primary{ padding: 9px 16px; font-size: 13px; }

/* Keep the same behavior on the player page (which uses the same .top) */

/* =====================================================
   v25 — Big batch of refinements
   - Hero cards: wrapper method (clipping bug-free)
   - Navbar: full-width pill + slide-from-top animation
   - K/D donut: bigger + blue Deaths
   - Shot Analysis: simpler 4-zone layout, bigger silhouette
   - Footer: uppercase items everywhere + Bale icon
   - Index: server-card hover glow + tighter card spacing
   ===================================================== */

/* ---------- Hero cards: wrapper method ---------- */

/* Hide old image style entirely (we no longer use .lbMode__img) */
.lbMode__img,
.lbMode__art{ display: none !important; }

.lbTop{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
  padding-top: 110px !important;
  margin-top: 0 !important;
  margin-bottom: 22px !important;
}

.lbModeBox{
  position: relative;
  will-change: transform;
}
.lbModeBox > .lbMode{
  position: relative;
  height: 116px !important;
  border-radius: 18px !important;
  overflow: hidden !important;       /* card itself is bounded */
  border: 1px solid rgba(255,255,255,.06) !important;
  background:
    radial-gradient(120% 110% at 95% 50%, rgba(207,36,36,.22), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.22)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 40px -28px rgba(0,0,0,.7) !important;
  clip-path: none !important;        /* clear leftover */
}
.lbModeBox--pve > .lbMode{
  background:
    radial-gradient(120% 110% at 95% 50%, rgba(70,214,126,.22), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.22)) !important;
}

.lbMode__label{
  position: absolute !important;
  left: 32px !important;
  top: 26px !important;
  font-family: "Inter", system-ui, -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(255,255,255,.40) !important;
}
.lbMode__title{
  position: absolute !important;
  left: 32px !important;
  top: 50px !important;
  font-family: "Inter", system-ui, -apple-system, sans-serif !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  letter-spacing: -.5px !important;
  color: #ffffff !important;
  line-height: 1 !important;
}

/* The character image is OUTSIDE the clipped card,
   sitting absolutely inside the wrapper, so it can extend above
   freely while the card itself remains a clean rectangle. */
.lbModeChar{
  position: absolute;
  bottom: 0;       /* align to card bottom */
  right: 28px;
  height: 220px;
  width: auto;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.55));
  user-select: none;
}
.lbModeBox--pvp .lbModeChar{ height: 230px; right: 32px; }
.lbModeBox--pve .lbModeChar{ height: 215px; right: 22px; }

/* Card hover glow (transform handled by tilt JS) */
.lbModeBox{ transition: filter .25s var(--ease); }
.lbModeBox:hover > .lbMode{
  border-color: rgba(255,255,255,.10) !important;
}
.lbModeBox--pvp:hover > .lbMode{
  background:
    radial-gradient(120% 110% at 95% 50%, rgba(207,36,36,.32), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.22)) !important;
}
.lbModeBox--pve:hover > .lbMode{
  background:
    radial-gradient(120% 110% at 95% 50%, rgba(70,214,126,.32), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.22)) !important;
}

/* Mobile */
@media (max-width: 720px){
  .lbTop{ grid-template-columns: 1fr !important; padding-top: 90px !important; }
  .lbModeBox--pvp .lbModeChar{ height: 190px; right: 18px; }
  .lbModeBox--pve .lbModeChar{ height: 178px; right: 12px; }
}

/* ---------- Navbar: full-width pill + slide-from-top ---------- */

/* When scrolled, the pill spans nearly the full viewport width
   (just a small gutter from the screen edge). */
.top{
  transition: padding .3s var(--ease), background .3s var(--ease);
}
.top__inner{
  border: 1px solid transparent;
  transition:
    height .3s var(--ease),
    padding .3s var(--ease),
    border-radius .3s var(--ease),
    background .3s var(--ease),
    border-color .3s var(--ease),
    box-shadow .3s var(--ease);
}

.top.is-scrolled{
  background: transparent !important;
  border-bottom-color: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding-top: 12px !important;
  padding-bottom: 6px !important;
}
/* Override container's max-width so the pill fills the row */
.top.is-scrolled > .container{
  width: 100% !important;
  max-width: none !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.top.is-scrolled .top__inner{
  height: 64px !important;
  padding: 0 22px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(22,16,18,.92), rgba(14,12,16,.86)) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow:
    0 18px 38px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  /* Slide it DOWN from above when class applies */
  animation: navPillSlide .42s cubic-bezier(.16,.86,.32,1) both;
}
@keyframes navPillSlide{
  from { transform: translateY(-130%); opacity: 0; }
  60%  { transform: translateY(4%); opacity: 1; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Slight tightening when in pill mode */
.top.is-scrolled .brand{ min-width: auto; }
.top.is-scrolled .brand__logo{ width: 36px; height: 36px; }
.top.is-scrolled .brand__name{ font-size: 14px; }
.top.is-scrolled .nav__link{ padding: 8px 12px; }
.top.is-scrolled .btn--primary{ padding: 9px 16px; font-size: 13px; }

/* ---------- K/D donut: bigger + blue Deaths ---------- */
.donut.donut--big{ width: 152px; height: 152px; }
.donut.donut--big .donut__svg{ width: 152px; height: 152px; }
.donut.donut--big .donut__center{
  left: 76px; /* center of the 152px circle */
}

/* Re-stroke for r=56 viewBox=140 */
.donut .donut__seg{
  stroke-width: 14;
}
.donut__seg--deaths{ stroke: #3b82f6 !important; }
.dot.dot--blue{ background: #3b82f6 !important; }

/* Re-enable Deaths tooltip (we removed the data-no-tip) */
/* Already handled in JS by scanning data-name; nothing to do here. */

/* ---------- Shot Analysis: 4 zones, bigger silhouette ---------- */
.silh{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 520px !important;
  padding: 12px 0;
}
.silh__img{
  display: block;
  max-height: 540px !important;
  width: auto;
  user-select: none; pointer-events: none;
  mix-blend-mode: screen;
  opacity: .9;
}
/* New 4-zone hotspot positions are set inline via --x/--y;
   keep the existing .hot styling. */

/* ---------- Footer: uppercase + Bale icon styling ---------- */
.foot2__col .foot2__link{
  text-transform: uppercase !important;
  letter-spacing: .6px;
}
.foot2__mail{ font-size: 13px; } /* email: a touch smaller so it doesn't wrap */

/* Bale icon: subtle teal/blue tint (Bale brand) on hover */
.sicon[aria-label="Bale"]{ color: rgba(255,255,255,.78); }
.sicon[aria-label="Bale"]:hover{ color: #00C493; }

/* ---------- Index: server-card hover glow ---------- */
.statuscard{
  /* Subtle transition target */
  transition: box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.statuscard:hover .srvstate,
.statuscard:hover .ipbox,
.statuscard:hover .sitem,
.statuscard:hover .onlinepill{
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 0 22px rgba(207,36,36,.10);
  transition: border-color .3s var(--ease), box-shadow .35s var(--ease);
}
.statuscard:hover .srvstate__icon,
.statuscard:hover .copybtn{
  filter: drop-shadow(0 0 6px rgba(207,36,36,.55));
}
/* Soft pulse on the values when card hovered */
@keyframes svPulseGlow{
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50%      { text-shadow: 0 0 12px rgba(255,180,180,.45); }
}
.statuscard:hover .sitem__v,
.statuscard:hover .onlinepill__val,
.statuscard:hover .ipbox__value{
  animation: svPulseGlow 2.4s ease-in-out infinite;
}

/* ---------- Index: card spacing tweak ---------- */
/* User: top spacing should be cut in half, bottom should grow */
.plaincards--tight{
  margin-top: 35px !important;       /* was 70px */
  padding-top: 6px !important;
  padding-bottom: 60px !important;   /* was 10px */
}
@media (max-width: 900px){
  .plaincards--tight{ margin-top: 22px !important; padding-bottom: 40px !important; }
}

/* ---------- Index: dampen pop-up animations ---------- */
/* The reveal slide-from-below + tilt + ripples can feel over-animated.
   Reduce intensities slightly and shorten durations. */
.reveal{ transition-duration: .35s !important; }
.cards2 .card,
.cards3 .card{
  transition: transform .25s var(--ease), box-shadow .3s var(--ease);
}
.cards2 .card:hover,
.cards3 .card:hover{
  transform: translateY(-2px); /* was bigger lift */
}
.btn--primary{ transition: background .2s var(--ease), transform .2s var(--ease); }

/* =====================================================
   v26 — Round of fixes
   - Hero cards: NO overflow on any side (fully contained)
   - PvE: shift right so empty rock space is hidden
   - K/D donut: revert to original size (the --big variant was buggy)
   - Farming legend: prevent number overflow
   - Server card: hover only fires on the SUB-element, not parent
   - Navbar: transparent always, pill is content-width and morphs in place
   - Bale icon: green; Discord: dark blue; Telegram: light blue
   ===================================================== */

/* ---------- Hero cards: characters fully INSIDE the card ---------- */
.lbTop{
  padding-top: 0 !important;        /* was 110px to make room for heads */
  margin-top: 0 !important;
}
.lbModeBox{
  position: relative;
  border-radius: 18px;
  overflow: hidden !important;       /* clip everything past edges */
}
.lbModeBox > .lbMode{
  height: 188px !important;          /* taller card to fit character */
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 18px !important;
}

/* Position labels — move down a touch since card is taller */
.lbMode__label{
  top: 30px !important;
}
.lbMode__title{
  top: 54px !important;
}

/* Character: contained inside card, anchored at bottom-right */
.lbModeChar{
  position: absolute;
  bottom: 0;
  height: 178px;
  width: auto;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.5));
}
.lbModeBox--pvp .lbModeChar{ right: 18px; height: 178px; }
/* For PvE: shift further right so the rock's empty/sky area
   gets clipped by the card's right edge. */
.lbModeBox--pve .lbModeChar{ right: -28px; height: 168px; }

@media (max-width: 720px){
  .lbModeBox > .lbMode{ height: 156px !important; }
  .lbModeBox--pvp .lbModeChar{ height: 148px; right: 12px; }
  .lbModeBox--pve .lbModeChar{ height: 140px; right: -20px; }
}

/* ---------- K/D + Farming donut: revert to original size ---------- */
.donut.donut--big,
.donut.donut--big .donut__svg{
  width: 120px !important;
  height: 120px !important;
}
.donut.donut--big .donut__center{
  left: 65px !important;
}
.donut .donut__seg{
  stroke-width: 12 !important;       /* was 14 in v25 */
}

/* Farming legend: tighter to prevent overflow */
.donut__legend--icons{
  font-size: 11.5px !important;
}
.donut__legend--icons span{
  gap: 4px !important;
}
.donut__legend--icons b{
  font-size: 11.5px !important;
  letter-spacing: 0 !important;
}
.legIco{
  width: 16px !important;
  height: 16px !important;
}

/* ---------- Server card: hover the SUB-element only ---------- */
/* Cancel the v25 parent-hover rules */
.statuscard:hover .srvstate,
.statuscard:hover .ipbox,
.statuscard:hover .sitem,
.statuscard:hover .onlinepill{
  border-color: inherit;
  box-shadow: none;
}
.statuscard:hover .sitem__v,
.statuscard:hover .onlinepill__val,
.statuscard:hover .ipbox__value,
.statuscard:hover .srvstate__icon,
.statuscard:hover .copybtn{
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Direct hovers — only when cursor is on that specific sub-card */
.srvstate{
  transition: border-color .25s var(--ease), box-shadow .3s var(--ease);
}
.srvstate:hover{
  border-color: rgba(207,36,36,.32);
  box-shadow: 0 0 22px rgba(207,36,36,.20);
}
.ipbox{
  transition: border-color .25s var(--ease), box-shadow .3s var(--ease);
}
.ipbox:hover{
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 0 22px rgba(255,180,180,.10);
}
.ipbox:hover .ipbox__value{
  text-shadow: 0 0 10px rgba(255,180,180,.45);
}
.sitem{
  transition: border-color .25s var(--ease), box-shadow .3s var(--ease);
}
.sitem:hover{
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 0 22px rgba(255,180,180,.10);
}
.sitem:hover .sitem__v{
  text-shadow: 0 0 10px rgba(255,180,180,.45);
}
.onlinepill{
  transition: border-color .25s var(--ease), box-shadow .3s var(--ease);
}
.onlinepill:hover{
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 0 22px rgba(255,180,180,.10);
}
.onlinepill:hover .onlinepill__val{
  text-shadow: 0 0 10px rgba(255,180,180,.45);
}

/* ---------- Navbar: transparent + content-width pill that morphs ---------- */

/* Always transparent — no dark stripe at top */
.top{
  background: transparent !important;
  border-bottom: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding-top: 8px !important;
  padding-bottom: 0 !important;
  transition: padding .3s var(--ease);
}

/* Container width unchanged when scrolled (no full-width override) */
.top.is-scrolled > .container{
  width: min(1180px, calc(100% - 44px)) !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* The inner row: morph in place — no keyframe slide-in */
.top__inner{
  border: 1px solid transparent;
  background: transparent;
  border-radius: 999px;             /* always rounded so morph is smooth */
  padding: 0 4px;
  transition:
    height .3s var(--ease),
    padding .3s var(--ease),
    background .3s var(--ease),
    border-color .3s var(--ease),
    box-shadow .3s var(--ease),
    backdrop-filter .3s var(--ease);
  animation: none !important;       /* kill v25 keyframe */
}
.top.is-scrolled .top__inner{
  height: 60px !important;
  padding: 0 22px !important;
  background:
    linear-gradient(180deg, rgba(22,16,18,.88), rgba(14,12,16,.82)) !important;
  border-color: rgba(255,255,255,.07) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  animation: none !important;
  /* Slightly narrower than container — gentle pill, not aggressive */
  max-width: 1100px !important;
  margin: 0 auto !important;
}

/* ---------- Social icon brand colors ---------- */
.foot2__social .sicon,
.sicon{
  color: rgba(255,255,255,.78);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.sicon[aria-label="Discord"]:hover{
  color: #5865F2;
  border-color: rgba(88,101,242,.45);
}
.sicon[aria-label="Telegram"]:hover{
  color: #29B6F6;
  border-color: rgba(41,182,246,.45);
}
.sicon[aria-label="Bale"]:hover{
  color: #00C493;                   /* actual Bale brand green */
  border-color: rgba(0,196,147,.45);
}

/* =====================================================
   v27 — Clean statuscard redesign + nav refinements
   ===================================================== */

/* ---------- Navbar: very slight tint at top (not fully invisible) ---------- */
.top{
  background:
    linear-gradient(180deg, rgba(10,10,14,.18), rgba(10,10,14,0)) !important;
}

/* ---------- Statuscard: stripped-down flat panel ---------- */

/* Hide the crate parallax artwork & FX gradient overlay entirely */
.statuscard__art,
.statuscard__fx{
  display: none !important;
}

/* Reset the card itself to a clean dark panel */
.statuscard{
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  background:
    linear-gradient(180deg, rgba(20,18,24,.72), rgba(14,12,18,.68)) !important;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.6) !important;
  padding: 18px !important;
  overflow: hidden !important;
  /* No hover-lift, no parallax */
  transform: none !important;
  transition: border-color .25s var(--ease) !important;
}
.statuscard:hover{
  transform: none !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* Top row: status pill on left, server name on right */
.statuscard__top{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

/* Status pill — flat, no animations */
.srvstate{
  padding: 7px 14px !important;
  font-size: 11.5px !important;
  letter-spacing: 1.2px !important;
}

/* IP box — flat, simple */
.statuscard__mid{ margin-top: 0 !important; margin-bottom: 12px !important; }
.ipbox{
  padding: 10px 12px !important;
  border-radius: 12px !important;
  border-color: rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.025) !important;
}
.ipbox__value{ font-size: 13px !important; }
.copybtn{
  padding: 6px 8px !important;
  border-radius: 8px !important;
}

/* 2x2 stat grid — minimal flat tiles, no sheen */
.statusgrid{
  margin-top: 0 !important;
  gap: 8px !important;
}
.sitem{
  padding: 11px 13px !important;
  border-radius: 12px !important;
  border-color: rgba(255,255,255,.07) !important;
  background: rgba(255,255,255,.025) !important;
  /* Kill the sheen + lift */
  transform: none !important;
  overflow: hidden !important;
}
.sitem::after{ display: none !important; }
.sitem:hover{
  transform: none !important;
  border-color: rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.035) !important;
}
.sitem__k{
  font-size: 10.5px !important;
  letter-spacing: 1px !important;
  color: rgba(255,255,255,.55) !important;
}
.sitem__v{
  margin-top: 6px !important;
  font-size: 17px !important;
}

/* Bottom NEXT WIPE pill — clean */
.onlinepill{
  margin-top: 12px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  border-color: rgba(255,255,255,.07) !important;
  background: rgba(255,255,255,.025) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.onlinepill__val{
  font-size: 16px !important;
  font-weight: 900 !important;
}
.onlinepill__lbl{
  font-size: 10.5px !important;
  letter-spacing: 1px !important;
  color: rgba(255,255,255,.55) !important;
  font-weight: 700 !important;
}

/* =====================================================
   v28 — Re-enable crate background art (with parallax)
        + remove the white border on OFFLINE/ONLINE hover
   ===================================================== */

/* Bring back the parallax crate artwork in the statuscard.
   They're positioned by inline transforms set from JS via --px/--py. */
.statuscard__art{
  display: block !important;
}

/* OFFLINE / ONLINE pill: no border highlight on hover */
.srvstate:hover{
  border-color: inherit !important;
  box-shadow: none !important;
}
/* Lock to its state-color border so red/green/amber stays correct */
.srvstate--online:hover { border-color: rgba(70,214,126,.28) !important; }
.srvstate--offline:hover{ border-color: rgba(207,36,36,.28) !important; }
.srvstate--startup:hover{ border-color: rgba(176,138,42,.28) !important; }
.srvstate--loading:hover{ border-color: rgba(236,72,153,.34) !important; }


/* =====================================================
   v31 — Navbar reverted to the original simple style,
         slightly more transparent at the top, and on
         scroll it lifts off the top edge and shrinks
         a touch into a floating bar (no full pill).
   This block resets all previous navbar overrides
   (v21 / v25 / v26 / v27 / v29 / v30).
   ===================================================== */

/* ---- Top state (no scroll) ---------------------------- */
/* Cancel the legacy v14 body offset — header is now sticky,
   so it occupies its own space in the document flow. */
body{ padding-top: 0 !important; }
@media (max-width: 760px){
  body{ padding-top: 0 !important; }
}

/* In top state: full-width strip — background lives on .top.
   In scrolled state: background moves to .top__inner so the bar
   becomes a contained, rounded floating panel. */
.top{
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  padding: 0 !important;
  background:
    linear-gradient(180deg, rgba(10,10,14,.55), rgba(10,10,14,.10)) !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  animation: none !important;
  transition:
    padding .4s var(--ease),
    background .4s var(--ease),
    border-color .4s var(--ease),
    -webkit-backdrop-filter .4s var(--ease),
    backdrop-filter .4s var(--ease) !important;
}

/* Container behaves normally at the top */
.top > .container{
  width: 100% !important;
  max-width: 1200px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transition:
    max-width .4s var(--ease),
    padding .4s var(--ease) !important;
}

/* Inner bar is transparent at top — visible at scroll */
.top__inner{
  height: 78px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  max-width: none !important;
  margin: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  animation: none !important;
  transition:
    height .4s var(--ease),
    padding .4s var(--ease),
    border-radius .4s var(--ease),
    background .4s var(--ease),
    border-color .4s var(--ease),
    box-shadow .4s var(--ease),
    -webkit-backdrop-filter .4s var(--ease),
    backdrop-filter .4s var(--ease) !important;
}

/* ---- Scrolled state ---------------------------------- */
/* On scroll: .top loses its strip background and just provides
   top padding so the bar visually detaches from the viewport top.
   The floating panel look lives on .top__inner. */
.top.is-scrolled{
  padding-top: 14px !important;
  background: transparent !important;
  border-bottom: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.top.is-scrolled > .container{
  max-width: 1180px !important;
}
.top.is-scrolled .top__inner{
  height: 66px !important;
  padding: 0 22px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(18,16,22,.86), rgba(12,11,16,.78)) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow:
    0 14px 32px -16px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

/* Subtle shrink of inner items when scrolled */
.top.is-scrolled .brand__logo{ width: 38px !important; height: 38px !important; }
.top.is-scrolled .brand__name{ font-size: 14px !important; }
.top.is-scrolled .nav__link{ padding: 8px 12px !important; }
.top.is-scrolled .btn--primary{ padding: 9px 16px !important; font-size: 13px !important; }

/* Smooth transitions on the inner items so the shrink is graceful */
.brand__logo,
.brand__name,
.nav__link,
.btn--primary{
  transition:
    width .35s var(--ease),
    height .35s var(--ease),
    font-size .35s var(--ease),
    padding .35s var(--ease),
    background .25s var(--ease),
    color .25s var(--ease) !important;
}

/* =====================================================
   v32 — Navbar fix: original layout at top (a touch more
         transparent) + on scroll the bar lifts off the
         top edge AND pulls in from the sides into a
         small floating pill. Overrides v31.
   ===================================================== */

/* ---- TOP STATE (no scroll) -------------------------- */
/* Original strip — full width inside container, slightly
   more transparent than v31 (which felt too dark). */
.top{
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  padding: 0 !important;
  background:
    linear-gradient(180deg, rgba(10,10,14,.30), rgba(10,10,14,.04)) !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  animation: none !important;
  transition:
    padding .4s var(--ease),
    background .4s var(--ease),
    border-color .4s var(--ease),
    -webkit-backdrop-filter .4s var(--ease),
    backdrop-filter .4s var(--ease) !important;
}

.top > .container{
  width: 100% !important;
  max-width: 1200px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transition: max-width .4s var(--ease) !important;
}

/* Inner row is transparent at top — content sits directly
   on the .top strip background. */
.top__inner{
  height: 78px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  max-width: none !important;
  margin: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  animation: none !important;
  transition:
    height .4s var(--ease),
    padding .4s var(--ease),
    border-radius .4s var(--ease),
    background .4s var(--ease),
    border-color .4s var(--ease),
    box-shadow .4s var(--ease),
    max-width .4s var(--ease),
    margin .4s var(--ease),
    -webkit-backdrop-filter .4s var(--ease),
    backdrop-filter .4s var(--ease) !important;
}

/* ---- SCROLLED STATE --------------------------------- */
/* The strip vanishes; the bar floats — top padding pushes
   it down off the viewport top, and a smaller max-width on
   .top__inner pulls it in from the sides into a pill. */
.top.is-scrolled{
  padding-top: 16px !important;
  padding-bottom: 0 !important;
  background: transparent !important;
  border-bottom: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.top.is-scrolled > .container{
  /* Container stays roomy; the floating bar narrows itself */
  max-width: 1200px !important;
}

.top.is-scrolled .top__inner{
  height: 64px !important;
  padding: 0 22px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(18,16,22,.88), rgba(12,11,16,.80)) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow:
    0 16px 36px -14px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  /* Floating pill: detached from the side edges */
  max-width: 1100px !important;
  margin: 0 auto !important;
}

/* Subtle inner-item shrink so content reflows nicely */
.top.is-scrolled .brand__logo{ width: 38px !important; height: 38px !important; }
.top.is-scrolled .brand__name{ font-size: 14px !important; }
.top.is-scrolled .nav__link{ padding: 8px 12px !important; }
.top.is-scrolled .btn--primary{ padding: 9px 16px !important; font-size: 13px !important; }

/* Smooth transitions on inner items */
.brand__logo,
.brand__name,
.nav__link,
.btn--primary{
  transition:
    width .35s var(--ease),
    height .35s var(--ease),
    font-size .35s var(--ease),
    padding .35s var(--ease),
    background .25s var(--ease),
    color .25s var(--ease) !important;
}

/* =====================================================
   v33 — Navbar lag fix on first scroll
   Cause: animating backdrop-filter forces costly per-frame
          layer recompositing the very first time it runs.
   Fix:   pre-warm a GPU layer on .top__inner from the start
          and DO NOT animate backdrop-filter (only its strength
          jumps; the transition list excludes it).
   ===================================================== */

.top__inner{
  /* Pre-promote to its own composite layer */
  will-change: transform, background, max-width, height, padding;
  transform: translateZ(0);
  /* Layer warmed with a 0-strength blur so the first time we go
     to blur(14px) there is no allocation cost. */
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);

  /* Remove backdrop-filter from the transition list — it was
     the property causing the jitter. Strength change is now
     instant; everything else still morphs smoothly. */
  transition:
    height .4s var(--ease),
    padding .4s var(--ease),
    border-radius .4s var(--ease),
    background .4s var(--ease),
    border-color .4s var(--ease),
    box-shadow .4s var(--ease),
    max-width .4s var(--ease),
    margin .4s var(--ease) !important;
}

/* Same trick on .top so the strip-blur change doesn't relayout */
.top{
  will-change: background, padding;
  transform: translateZ(0);
  transition:
    padding .4s var(--ease),
    background .4s var(--ease),
    border-color .4s var(--ease) !important;
}

/* Scrolled state: bump the blur on .top__inner — layer already
   exists, so this is essentially free. */
.top.is-scrolled .top__inner{
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

/* =====================================================
   v34 — Navbar height conservation + footer Title Case
   - Keep total .top height identical between top/scrolled
     states (78px both) so toggling the class doesn't shift
     body content — that shift was the second source of the
     scroll-jank near the threshold.
   - Footer columns: drop the uppercase transform so links
     read in Title Case (the HTML already says "Discord",
     "Aparat", etc.).
   ===================================================== */

/* total height = padding-top + .top__inner.height
   top:       0 + 78 = 78
   scrolled: 14 + 64 = 78  ✓ */
.top.is-scrolled{
  padding-top: 14px !important;
}

/* Footer link labels — Title Case rather than ALL CAPS,
   email reads as a real lowercase address. */
.foot2__col .foot2__link,
.foot2__col .foot2__mail{
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* =====================================================
   v35 — Account button (icon + label), Language toggle,
         Persian (Vazirmatn) typography & RTL adjustments.
   ===================================================== */

/* ---------- 1. Account button ---------- */
/* A dark, low-key pill with an outlined profile icon to its
   left. Replaces the old red "Login" CTA in the navbar. */
.btn--account{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 6px 14px -8px rgba(0,0,0,.55);
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease);
  overflow: hidden;
}
.btn--account:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.18);
  color: #fff;
  transform: translateY(-1px);
}
.btn--account__icon{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: rgba(255,255,255,.92);
}
.btn--account .btn__spark{
  /* Disable the red sweep that ships with .btn--primary */
  display: none !important;
}
.top.is-scrolled .btn--account{
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

/* ---------- 2. Language toggle ---------- */
/* A small EN / FA pill that lives next to the Account button */
.langtoggle{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 12px;
  margin-inline-start: 8px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.08);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .6px;
  color: rgba(255,255,255,.55);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease),
              transform .2s var(--ease);
}
.langtoggle:hover{
  border-color: rgba(255,255,255,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.langtoggle__opt{ padding: 2px 4px; transition: color .2s var(--ease); }
.langtoggle__sep{ opacity: .35; }
.langtoggle.is-en .langtoggle__opt[data-lang="en"]{ color: #fff; }
.langtoggle.is-fa .langtoggle__opt[data-lang="fa"]{ color: var(--red); }
.top.is-scrolled .langtoggle{
  height: 36px;
  padding: 0 10px;
  font-size: 11px;
}

/* ---------- 3. Persian typography ----------
   When the body has .lang-fa we switch the entire stack to
   Vazirmatn for prose, and to Lalezar for the loud display
   pieces (hero title, big stat numbers, page titles).
   English numerals stay in tabular Rajdhani — Persian readers
   are perfectly comfortable with Arabic digits and tabular-
   nums look much cleaner than mixed scripts. */
.lang-fa,
.lang-fa input,
.lang-fa button,
.lang-fa select,
.lang-fa textarea{
  font-family: "Vazirmatn", "Inter", system-ui, -apple-system, sans-serif;
}
/* Display pieces — heavy, condensed feel close to Russo One */
.lang-fa .title,
.lang-fa .page__title,
.lang-fa .lbMode__title,
.lang-fa .card__title,
.lang-fa .lbName,
.lang-fa .ltBox__title,
.lang-fa .shotBox__title,
.lang-fa .pp__name,
.lang-fa .lt__head,
.lang-fa .donut__lbl,
.lang-fa .srvstate__text,
.lang-fa .onlinepill__lbl,
.lang-fa .foot2__head{
  font-family: "Lalezar", "Vazirmatn", system-ui, sans-serif;
  letter-spacing: 0 !important;
  font-weight: 400;
}
/* Persian doesn't have uppercase — drop forced-uppercase on labels */
.lang-fa .nav__link,
.lang-fa .kpi__k,
.lang-fa .sitem__k,
.lang-fa .onlinepill__lbl,
.lang-fa .srvstate__text,
.lang-fa .lt__k,
.lang-fa .pp__metaK,
.lang-fa .plH,
.lang-fa .lbTotal__k,
.lang-fa .page__title,
.lang-fa .card__title,
.lang-fa .btn,
.lang-fa .plCat,
.lang-fa .plTab{
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* Numbers — keep the tabular Rajdhani look so columns line up */
.lang-fa .lbValue,
.lang-fa .pp__metaV,
.lang-fa .donut__num,
.lang-fa .donut__numSm,
.lang-fa .lt__v,
.lang-fa .kpi__v,
.lang-fa .sitem__v,
.lang-fa .onlinepill__val,
.lang-fa .lbTotal__v,
.lang-fa .ipbox__value,
.lang-fa .copybtn{
  font-family: "Rajdhani", "Vazirmatn", system-ui, sans-serif;
}
/* Hero title scaled a touch since Lalezar is wider than Russo One */
.lang-fa .title{ font-size: clamp(48px, 6.6vw, 96px); line-height: 1.05; }

/* ---------- 4. RTL layout fixes ---------- */
/* Most of the layout uses flex/grid which mirrors automatically
   when dir="rtl". A handful of absolute-positioned bits need
   manual swaps. */
[dir="rtl"] .nav,
[dir="rtl"] .top__inner,
[dir="rtl"] .top__actions{
  direction: rtl;
}
/* Statuscard art was anchored left/right with hard pixel offsets;
   leave those in place — visually the crates look fine on either
   side. The 2x2 status grid mirrors automatically. */

/* Footer in RTL: the column with the brand logo+desc would normally
   land on the right, which is correct for Persian reading order. */
[dir="rtl"] .foot2__top{ direction: rtl; }
[dir="rtl"] .foot2__bottom{ direction: rtl; }

/* Account-menu dropdown: align to the start of the navbar action area */
[dir="rtl"] .accountmenu{ left: auto; right: 0; }

/* Search icon in player-table search box was positioned on the left;
   in RTL it should be on the right side of the input */
[dir="rtl"] .plSearch svg{ left: auto; right: 14px; }
[dir="rtl"] .plSearch input{ padding-left: 14px; padding-right: 42px; text-align: right; }

/* Page header alignment */
[dir="rtl"] .page__head{ text-align: right; }
[dir="rtl"] .hero__left{ text-align: right; }

/* Lang toggle: keep "EN / FA" reading left-to-right even in RTL —
   the labels are Latin and reversing them is confusing. */
[dir="rtl"] .langtoggle{ direction: ltr; }

/* Spark sweep on btn--primary points right; mirror in RTL */
[dir="rtl"] .btn__spark{ transform: scaleX(-1); }

/* =====================================================
   v36 — Persian-only typography polish
   - Hero title: a touch smaller in FA (Lalezar runs wide)
   - Donut legend: keep its grid in LTR so the icon+number
     pairs don't break apart in RTL
   - Button text size adjustments for Vazirmatn
   ===================================================== */

.lang-fa .title{
  font-size: clamp(40px, 5vw, 72px) !important;
  line-height: 1.15;
}
/* Donut legend & tip: numbers next to images read better
   left-to-right even in RTL Persian — keep them LTR. */
[dir="rtl"] .donut__legend{ direction: ltr; }
[dir="rtl"] .donut__tip{ direction: ltr; }

/* lbValue numbers in stat rows — numbers stay LTR */
[dir="rtl"] .lbValue,
[dir="rtl"] .pp__metaV,
[dir="rtl"] .lt__v,
[dir="rtl"] .kpi__v,
[dir="rtl"] .ipbox__value,
[dir="rtl"] .lbTotal__v{
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}
/* Search input — when LTR Latin players are typed, keep
   text starting from the right edge in RTL layout. */
[dir="rtl"] #plSearch{ direction: rtl; }

/* Footer brand name keeps its English form in LTR */
[dir="rtl"] .foot2__name,
[dir="rtl"] .brand__name{ direction: ltr; }

/* "PERSIAN TOXIC 10X" pill stays LTR */
[dir="rtl"] .plBoard__brandName{ direction: ltr; }

/* Lower the Vazirmatn weight on small ALL-CAPS-style labels
   so they don't look chunky */
.lang-fa .kpi__k,
.lang-fa .sitem__k,
.lang-fa .pp__metaK,
.lang-fa .lt__k,
.lang-fa .lbTotal__k{
  font-weight: 500;
}

/* Account button — Vazirmatn 600 reads better than 700 */
.lang-fa .btn--account{ font-weight: 600; }

/* v36 patch — donut center flip in RTL.
   In LTR the SVG is the first grid column (130px) and the
   center label is anchored at left: 65px (= half of 130).
   In RTL the SVG becomes the second column, so the anchor
   has to swap to the right edge with the same offset. */
[dir="rtl"] .donut__center{ left: auto !important; right: 65px !important; }
[dir="rtl"] .donut.donut--big .donut__center{ right: 76px !important; }

/* =====================================================
   v37 — Big polish pass
   - Lang toggle: active option red in BOTH languages
   - Account button bigger so the icon+label sits well
   - Toast system: stacked, side-anchored (left in EN,
     right in FA), hover-pause progress bar, fancy in/out
   - Loading overlay during language switch
   - Donut RTL: icons sit on .pp__donuts left half, center
     anchor follows in both directions
   - Total Playtime font (Vazirmatn, mixed RTL/digits)
   - Bale image-icon styling
   - Notification icons cleaner
   ===================================================== */

/* ---------- 1. Lang toggle: red active in BOTH langs ---- */
.langtoggle.is-en .langtoggle__opt[data-lang="en"]{ color: var(--red); }
.langtoggle.is-fa .langtoggle__opt[data-lang="fa"]{ color: var(--red); }
.langtoggle.is-en .langtoggle__opt[data-lang="fa"]{ color: rgba(255,255,255,.55); }
.langtoggle.is-fa .langtoggle__opt[data-lang="en"]{ color: rgba(255,255,255,.55); }

/* ---------- 2. Bale social icon ----------
   Bale now uses an inline SVG (mask-cutout silhouette + currentColor) so
   it picks up the standard .sicon styling automatically: same size, same
   border, same background, same hover lift as Discord/Telegram. The brand
   green is applied via the [aria-label="Bale"]:hover rule elsewhere in
   this file (see "Social icon brand colors" section). No special
   overrides needed here. */

/* ---------- 3. Loading overlay during lang switch ----- */
.langSwitchOverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(8,8,12,.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s var(--ease);
}
.langSwitchOverlay.is-show{
  opacity: 1;
  pointer-events: auto;
}
.langSwitchOverlay__spin{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.12);
  border-top-color: var(--red);
  animation: langSpin 1s linear infinite;
}
@keyframes langSpin{ to { transform: rotate(360deg); } }

/* ---------- 4. Toast — stacked + side-anchored --------- */
/* Override the old centered top-stack with a sticky side
   stack (left in LTR, right in RTL). Uses the original
   .toasts container so existing JS keeps working. */
.toasts{
  position: fixed !important;
  top: auto !important;
  bottom: 22px !important;
  left: 22px !important;
  right: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  z-index: 9000 !important;
  align-items: flex-start !important;
  max-width: min(380px, calc(100vw - 44px)) !important;
  pointer-events: none;     /* container pass-through; toasts opt in */
}
[dir="rtl"] .toasts{
  left: auto !important;
  right: 22px !important;
  align-items: flex-end !important;
}

.toast{
  position: relative;
  width: min(360px, calc(100vw - 44px));
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(20,18,26,.88), rgba(12,12,16,.84));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow:
    0 18px 36px -10px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.04);
  padding: 12px 14px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  pointer-events: auto;
  overflow: hidden;
  /* Initial state owned by JS via inline style */
  transition:
    transform .42s cubic-bezier(.16,.86,.32,1),
    opacity   .25s linear;
  animation: none !important;   /* override the old notifPop keyframe */
}
/* [dir="rtl"] .toast initial-transform — owned by JS now */

/* .is-in state owned by JS */
/* .is-leaving state owned by JS */
/* RTL .is-leaving owned by JS */

/* Icon */
.toast__icon{
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 15px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
}
.toast--ok{
  border-color: rgba(70,214,126,.30);
  background:
    linear-gradient(180deg, rgba(40,80,55,.40), rgba(12,12,16,.84));
}
.toast--ok .toast__icon{
  background: rgba(70,214,126,.18);
  border-color: rgba(70,214,126,.35);
  color: #46d67e;
}
.toast--bad{
  border-color: rgba(207,36,36,.30);
}
.toast--bad .toast__icon{
  background: rgba(207,36,36,.18);
  border-color: rgba(207,36,36,.35);
  color: #ff6b6b;
}

/* Text */
.toast__txt{ flex: 1; min-width: 0; }
.toast__title{
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  color: #fff;
}
.toast__msg{
  font-size: 12.5px;
  margin-top: 3px;
  color: rgba(255,255,255,.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[dir="rtl"] .toast__title,
[dir="rtl"] .toast__msg{ text-align: right; }

/* Close button — replaces the old <div><button> wrapper */
.toast__x{
  all: unset;
  cursor: pointer;
  width: 24px; height: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 13px;
  color: rgba(255,255,255,.55);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.toast__x:hover{
  background: rgba(255,255,255,.06);
  color: #fff;
}

/* Progress bar (shrinks from 100% to 0%) */
.toast__bar{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(255,255,255,.05);
  overflow: hidden;
}
.toast__bar__fill{
  height: 100%;
  width: 100%;
  transform: scaleX(1);
  transform-origin: left center;
  background: linear-gradient(90deg, #46d67e, #2ea968);
  will-change: transform;
}
.toast--bad .toast__bar__fill{
  background: linear-gradient(90deg, #cf2424, #8a1e1e);
}
[dir="rtl"] .toast__bar__fill{ transform-origin: right center; }

/* ---------- 5. Total Playtime font (mixed text+digits) - */
.lang-fa .lbTotal__k,
.lang-fa .lbTotal__v{
  font-family: "Vazirmatn", "Rajdhani", system-ui, sans-serif !important;
  font-weight: 700;
  letter-spacing: 0;
}
.lang-fa .lbTotal__v{
  font-size: 22px;
  direction: rtl;
}

/* ---------- 6. CTA button "Account" sized in FA ------- */
.lang-fa .btn--lg{ font-size: 14px; padding: 0 20px; }

/* =====================================================
   v38 — Donut layout fix in RTL
   In LTR the .donut grid is "svg | legend" with the SVG at
   the left. In RTL the columns flip so we end up with
   "legend | svg", but .donut__center had a hard-coded
   left:65px from before — landing it on top of the legend.
   We pin the center to the SVG itself instead.
   ===================================================== */

/* SVG keeps its absolute-positioned center inside it,
   irrespective of direction. */
.donut__svg{ position: relative; }
.donut__center{
  /* Center over the SVG box (130px × 130px). 65px from the
     start of the SVG itself — works the same in LTR and RTL. */
  left: auto !important;
  right: auto !important;
  top: 50% !important;
  /* Anchor to the SVG container instead of the .donut grid */
}

/* The simplest fix: place the center inside the SVG element.
   Since the markup already has the .donut__center as a sibling
   of .donut__svg (both children of .donut), we use grid-area to
   make the center span the same column as the SVG. */
.donut{ position: relative; }
.donut__svg{ grid-column: 1; grid-row: 1; }
.donut__center{
  position: absolute;
  width: 130px;
  height: 130px;
  /* SVG is in column 1 — center the absolute box on top of it */
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
[dir="rtl"] .donut__svg{ grid-column: 2; grid-row: 1; }
[dir="rtl"] .donut__center{
  left: auto;
  right: 0;
}

/* Donut--big (bigger K/D) — same idea, larger box */
.donut.donut--big .donut__center{
  width: 152px;
  height: 152px;
}

/* Legend stays in the second column in LTR, first in RTL */
.donut__legend{ grid-column: 2; grid-row: 1; }
[dir="rtl"] .donut__legend{ grid-column: 1; grid-row: 1; }

/* v39 removed (was overriding inline-style toast lifecycle) */
/* =====================================================
   v40 — Toast container fix (RTL position bug)
   align-items:flex-end in a flex column with direction:rtl
   was pushing children outside the container box. Drop the
   alignment trick and let toast width fill the container.
   ===================================================== */
.toasts{
  align-items: stretch !important;
  /* Let the container be exactly the toast width */
  width: min(360px, calc(100vw - 44px)) !important;
  max-width: none !important;
}
[dir="rtl"] .toasts{
  align-items: stretch !important;
}
.toast{
  /* Fill the (now-fixed-width) container so position is exact */
  width: 100% !important;
  max-width: none;
}

/* =====================================================
   v41 — Toast: FINAL kill of CSS state-machine.
   Drop transform/opacity from CSS entirely; JS owns these
   via inline style (highest cascade rank for non-!important).
   This avoids every specificity-vs-direction race condition.
   ===================================================== */
.toast,
[dir="rtl"] .toast,
.toast.is-in,
[dir="rtl"] .toast.is-in,
.toast.is-leaving,
[dir="rtl"] .toast.is-leaving{
  transform: none;
  opacity: 1;
  /* IMPORTANT: no !important here — let inline style win */
}
.toast{
  /* Smooth animation between inline-style values */
  transition:
    transform .42s cubic-bezier(.16,.86,.32,1),
    opacity   .25s linear;
}

/* =====================================================
   v42 — Navbar: switch from sticky to fixed
   With sticky, even though both states sum to 78px, layout
   recalculations on class toggle were causing a tiny page
   jump for the user. Fixed positioning takes the navbar out
   of flow — body never shifts, no jump possible.
   ===================================================== */
.top{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

/* Reserve the navbar's space so content doesn't slide under it. */
body{
  padding-top: 78px;
}

/* Scroll-padding so anchor jumps land below the navbar */
html{ scroll-padding-top: 92px; }

/* The hero already has its own visual budget; trim a tiny bit
   so it still feels right with the new top spacing. */
.hero{ padding-top: 8px; }

/* When the loader is up, hide the body padding's empty bar */
body:has(#pageLoader.is-shown){ padding-top: 0; }

/* =====================================================
   v43 — plBoard always LTR
   The user wants the player table to keep its English
   layout (search left? actually right column buttons,
   table on left) in both languages. Forcing direction:ltr
   on the board container only — Persian text strings
   inside still render correctly thanks to unicode bidi.
   ===================================================== */
[dir="rtl"] .plBoard,
[dir="rtl"] .plBoard *{
  direction: ltr;
}
/* But the few translated labels still need to read RTL */
[dir="rtl"] .plBoard__brandSub,
[dir="rtl"] .plFoot,
[dir="rtl"] #plSearch,
[dir="rtl"] .plTab,
[dir="rtl"] .plCat{
  direction: rtl;
  text-align: right;
}
/* Search icon stays on the left of the input even in RTL */
[dir="rtl"] .plSearch svg{ left: 14px; right: auto; }
[dir="rtl"] .plSearch input{
  padding-left: 42px;
  padding-right: 14px;
  text-align: right;
}
/* Category buttons keep their original icon-left/text-right pattern */
[dir="rtl"] .plCat{ flex-direction: row; }

/* =====================================================
   v44 — Mobile hamburger & menu redesign
   - Hamburger animates into an X when open
   - Mobile menu becomes a proper full-width drawer with
     vertical links, icons, and slide-down animation
   - Page transition fade-in/out
   ===================================================== */

/* Hamburger button — now visible only on mobile */
@media (max-width: 900px){
  .hamb{
    display: inline-flex !important;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    transition: background .2s var(--ease);
  }
  .hamb:hover{ background: rgba(255,255,255,.08); }
  .hamb span{
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 999px;
    transition: transform .28s var(--ease), opacity .2s var(--ease);
    transform-origin: center;
  }
  /* Open state: top + bottom rotate into X, middle vanishes */
  .hamb.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .hamb.is-open span:nth-child(2){ opacity: 0; transform: scaleX(0); }
  .hamb.is-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

  /* Hide desktop nav, show mobile actions */
  .nav{ display: none !important; }
  .langtoggle{ height: 38px; padding: 0 10px; font-size: 11px; }
  .btn--account{
    height: 38px;
    padding: 0 12px;
    font-size: 13px;
  }
  .btn--account span:not(.btn__spark){ display: none; }
  .btn--account__icon{ width: 20px; height: 20px; }

  .top__inner{ padding: 0 14px !important; }
}

/* Mobile drawer — slides in from the side (like the dashboard sidebar).
   LTR pages slide from LEFT; RTL pages slide from RIGHT.

   Note: We override the [hidden] attribute's default display:none because
   we want the drawer to be present in layout for the slide animation.
/* Lock body scroll when mobile menu is open */
body.is-mobile-open{ overflow: hidden; }

/* ----- Page transition (fade) ----- */
body{
  opacity: 0;
  animation: pageFadeIn .35s var(--ease) forwards;
}
@keyframes pageFadeIn{
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.is-leaving{
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
  animation: none;
}

/* When loader is up, don't double-fade */
body:has(#pageLoader:not([hidden])){
  animation: none;
  opacity: 1;
}

/* === Mobile-specific hero / status / cards layout === */
@media (max-width: 900px){
  .hero__inner{ grid-template-columns: 1fr !important; }
  .hero__right{ order: -1; }
  .title{ font-size: clamp(38px, 9vw, 56px) !important; }
  .lead{ font-size: 15px !important; }
  .kpis{ grid-template-columns: 1fr 1fr 1fr !important; gap: 8px !important; }
  .kpi{ padding: 10px 12px !important; }
  .kpi__v{ font-size: 18px !important; }
  .kpi__k{ font-size: 11px !important; }
  .cards2{ grid-template-columns: 1fr !important; }
  .lbGrid{ grid-template-columns: 1fr !important; }
  .lbTotals{ grid-template-columns: 1fr !important; }

  /* Footer: stack columns */
  .foot2__top{ grid-template-columns: 1fr !important; gap: 24px !important; }
  .foot2__brand{ text-align: center; }
  .foot2__social{ justify-content: center; }

  /* Player profile */
  .pp{ flex-direction: column !important; gap: 14px; }
  .pp__donuts{ grid-template-columns: 1fr !important; }
  .pgrid{ grid-template-columns: 1fr !important; }

  /* Toasts: full width minus margin */
  .toasts{
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
  }
  [dir="rtl"] .toasts{ left: 12px !important; right: 12px !important; }
  .toast{ width: 100% !important; }
}

@media (max-width: 600px){
  body{ padding-top: 70px; }
  .top__inner{ height: 70px !important; }
  .top.is-scrolled{ padding-top: 10px !important; }
  .top.is-scrolled .top__inner{ height: 56px !important; }
}

/* =====================================================
   v45 — Tightening
   - Account / langtoggle: a touch tighter padding so they
     pair well with the floating pill on mobile
   - Mobile drawer dir-aware spacing
   - Plus a polish for the icon-circle bale shape
   ===================================================== */

/* Bale social icon — render the inline SVG nicely inside the round chip */
.sicon--bale{ color: rgba(70, 200, 110, .92); padding: 0 !important; }
.sicon--bale svg{ width: 56%; height: 56%; }
.sicon--bale:hover{ color: #46d67e; }

/* Loader visibility class for body:has() */
#pageLoader[hidden]{ display: none !important; }

/* Bale SVG explicit sizing (matches existing 1em pattern of others) */
.sicon--bale > svg{
  width: 1.05em;
  height: 1.05em;
  display: block;
}
.sicon--bale{
  font-size: 22px;       /* drives the SVG em sizing */
  color: #46d67e;        /* Bale green */
}
.sicon--bale:hover{
  color: #5fe28b;
  border-color: rgba(70,214,126,.45);
  background: rgba(70,214,126,.08);
}

/* =====================================================
   v46 — Force body padding for fixed navbar
   v42 set body padding-top:78 but a legacy v32 rule
   (line 3744) sets it to 0 with !important. Override.
   ===================================================== */
body{ padding-top: 78px !important; }
@media (max-width: 600px){
  body{ padding-top: 70px !important; }
}
/* Cancel the lbpage/page extra top padding now that body covers it */
.lbpage{ padding-top: 24px !important; }
.playerPage{ padding-top: 14px !important; }
.page{ padding-top: 24px !important; }

/* =====================================================
   v47 — Mobile navbar tightening
   On narrow viewports: hide brand text, hide Account label
   (icon only), shrink lang toggle. Hamburger now visible.
   ===================================================== */
@media (max-width: 600px){
  /* Logo only — no "PERSIANTOXIC" text */
  .brand__name{ display: none !important; }
  .brand__logo{ width: 36px !important; height: 36px !important; }

  /* Account button is icon-only (the inner span has data-i18n; hide it) */
  .btn--account{
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    justify-content: center;
  }
  .btn--account > span:not(.btn__spark){ display: none !important; }
  .btn--account__icon{ width: 18px !important; height: 18px !important; }

  /* Lang toggle smaller */
  .langtoggle{
    height: 38px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    letter-spacing: .4px !important;
  }
  .langtoggle__opt{ padding: 2px 2px !important; }

  /* Top actions: tighter gap so all four items fit */
  .top__actions{ gap: 6px !important; }
  .top__inner{ padding: 0 12px !important; gap: 8px !important; }

  /* Hamburger — already display:inline-flex from v44, just polish size */
  .hamb{ width: 38px !important; height: 38px !important; }
}

/* Mobile drawer top offset (matches new 70px navbar height) */
@media (max-width: 600px){
  .mobile{ top: 70px; }
  body{ padding-top: 70px !important; }
}

/* =====================================================
   v48 — Mobile navbar: kill .brand min-width: 240
   That single legacy declaration was eating 240px of
   space on a 390px viewport, throwing the hamburger
   off-screen.
   ===================================================== */
@media (max-width: 900px){
  .brand{ min-width: 0 !important; }
}
@media (max-width: 600px){
  .brand{ min-width: 0 !important; }
  .top__inner{ padding: 0 12px !important; gap: 6px !important; }
}

/* =====================================================
   v49 — Page-fade animation must not use transform
   `transform` on <body> (even identity) creates a new
   containing block, making position:fixed children scroll
   with the page. Use opacity only. The is-leaving exit
   transition already had a translateY — drop that too.
   ===================================================== */
body{
  opacity: 0;
  animation: pageFadeIn .35s var(--ease) forwards;
}
@keyframes pageFadeIn{
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.is-leaving{
  opacity: 0;
  /* No transform here — would break fixed children mid-leave */
  transition: opacity .28s var(--ease);
  animation: none;
}

/* =====================================================
   v50 — Mobile reordering
   1) Index hero: hero__left first (text + KPIs), then
      hero__right (statuscard). Drop the order:-1 from v44.
   2) Leaderbord: PvP card, PvP stats, PvE card, resources,
      then totals. Use display:contents on the wrapping
      grids so all six elements become direct flex children
      of .container, then assign order to each.
   3) Background: keep the gradient covering the whole page
      on tall pages, not just the first viewport.
   ===================================================== */

/* (1) Index hero — natural order again */
@media (max-width: 900px){
  .hero__right{ order: 0 !important; }
  .hero__left{ order: 0 !important; }
  /* Optional: a touch of breathing room between text and statuscard */
  .hero__right{ margin-top: 14px; }
}

/* (2) Leaderbord — flatten the wrappers in mobile */
@media (max-width: 900px){
  .lbpage > .container{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
  }
  /* Let children of the wrapping grids participate in the
     parent flex container. */
  .lbpage .lbTop,
  .lbpage .lbGrid,
  .lbpage .lbTotals{
    display: contents !important;
  }
  /* Then explicitly order the six items + the player table */
  .lbpage .lbModeBox--pvp{ order: 1; }
  .lbpage .lbGrid > .lbCol:nth-child(1){ order: 2; }   /* PvP stats column */
  .lbpage .lbModeBox--pve{ order: 3; }
  .lbpage .lbGrid > .lbCol:nth-child(2){ order: 4; }   /* Resources column */
  .lbpage .lbTotals .lbTotal--left{  order: 5; }
  .lbpage .lbTotals .lbTotal--right{ order: 6; }
  .lbpage .plBoard{ order: 7; margin-top: 14px; }
  /* Each lbCol stretches full width since wrappers are flattened */
  .lbpage .lbCol{ width: 100%; }
}

/* =====================================================
   v51 — Background covers tall pages
   .bg is fixed to viewport; the footer (rgba(11,12,16,.95))
   sits on top, so once the user scrolls past the first
   viewport the section between content-end and footer-start
   wasn't getting any of the warm tint.
   Fix: paint a subtle radial gradient on <body> itself so
   the entire scroll height gets the same tone as .bg.
   ===================================================== */
html, body{
  background:
    radial-gradient(1100px 700px at 0% 0%,    rgba(207,36,36,.22), transparent 60%),
    radial-gradient(900px  600px at 100% 30%, rgba(176,138,42,.16), transparent 60%),
    radial-gradient(800px  600px at 50% 100%, rgba(70,214,126,.06), transparent 60%),
    #0b0c10;
}
/* The .bg layer above adds the grid lines and bigger glow.
   Its z-index stays -1 / -3 so it still floats above the
   body gradient on the first viewport — no visual change there. */

/* =====================================================
   v52 — Donut center: kill the legacy translate(-50%,-50%)
   The original v18 rule used left:65px;top:50% with that
   translate to center the label. v38 swapped to width/
   height + flex centering but forgot to unset transform —
   so the label was still being shifted 65px left and up.
   ===================================================== */
.donut__center,
[dir="rtl"] .donut__center{
  transform: none !important;
  top: 0 !important;
}
.donut__center{ left: 0 !important; right: auto !important; }
[dir="rtl"] .donut__center{ left: auto !important; right: 0 !important; }

/* =====================================================
   v53 — Home: About / WhyUs / Support sections
   ===================================================== */

/* ---------- About Us ---------- */
.about{
  position: relative;
  padding: 80px 0;
  overflow: hidden;
}
.about__inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.about__media{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}
/* Warm radial halo behind the AK */
.about__halo{
  position: absolute;
  inset: 50% 50% auto auto;
  width: 520px;
  height: 520px;
  transform: translate(50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at center,
      rgba(207,36,36,.42) 0%,
      rgba(176,138,42,.20) 30%,
      rgba(176,138,42,.08) 55%,
      transparent 75%);
  filter: blur(8px);
  z-index: 0;
  animation: aboutHalo 7s ease-in-out infinite;
}
@keyframes aboutHalo{
  0%,100%{ transform: translate(50%, -50%) scale(1); opacity: .85; }
  50%{    transform: translate(50%, -50%) scale(1.08); opacity: 1; }
}
.about__weapon{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  filter:
    drop-shadow(0 18px 32px rgba(0,0,0,.55))
    drop-shadow(0 0 28px rgba(176,138,42,.25));
  animation: aboutGun 6s ease-in-out infinite;
}
@keyframes aboutGun{
  0%,100%{ transform: translateY(0) rotate(-3deg); }
  50%{    transform: translateY(-12px) rotate(-1deg); }
}
.about__title{
  font-family: "Russo One", system-ui, sans-serif;
  font-size: clamp(36px, 4.2vw, 60px);
  line-height: 1.05;
  margin: 0 0 22px;
  letter-spacing: .5px;
}
.about__lead{
  color: rgba(255,255,255,.74);
  font-size: 16.5px;
  line-height: 1.95;
  margin: 0;
  max-width: 560px;
}

/* ---------- Why Us ---------- */
.whyus{
  position: relative;
  padding: 70px 0 90px;
}
.whyus__head{
  text-align: center;
  margin: 0 auto 56px;
  max-width: 760px;
}
.whyus__title{
  font-family: "Russo One", system-ui, sans-serif;
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.1;
  margin: 0 0 14px;
  letter-spacing: .4px;
}
.whyus__sub{
  color: rgba(255,255,255,.65);
  font-size: 15.5px;
  line-height: 1.75;
  margin: 0;
}
.whyus__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.why{
  position: relative;
  padding: 28px 26px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.07);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.005));
  transition:
    border-color .3s var(--ease),
    transform   .3s var(--ease),
    box-shadow  .3s var(--ease);
  overflow: hidden;
  isolation: isolate;
}
.why::before{
  /* subtle red glow ring on hover */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px 200px at 0% 0%, rgba(207,36,36,.10), transparent 60%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  z-index: -1;
}
.why:hover{
  border-color: rgba(207,36,36,.32);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px -16px rgba(207,36,36,.30);
}
.why:hover::before{ opacity: 1; }
.why__icon{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(207,36,36,.16), rgba(176,138,42,.10));
  border: 1px solid rgba(207,36,36,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: #e85a5a;
}
.why__icon svg{ width: 26px; height: 26px; }
.why__title{
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 8px;
  color: #fff;
}
.why__txt{
  color: rgba(255,255,255,.62);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

/* ---------- Support Team ---------- */
.support{
  position: relative;
  padding: 110px 0 130px;
  text-align: center;
  overflow: hidden;
}
.support__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.support__pattern{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .14;
  filter: hue-rotate(20deg) brightness(.9);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.support__bg__fade{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center,
      rgba(176,138,42,.15) 0%,
      transparent 55%);
}
.support__inner{
  position: relative;
  z-index: 1;
}
.support__weapon{
  width: 130px;
  margin: 0 auto 28px;
  filter:
    drop-shadow(0 14px 28px rgba(176,138,42,.45))
    drop-shadow(0 0 50px rgba(176,138,42,.25));
  animation: supportFloat 5s ease-in-out infinite;
}
.support__weapon img{
  width: 100%;
  display: block;
  transform: rotate(-12deg);
}
@keyframes supportFloat{
  0%,100%{ transform: translateY(0); }
  50%{    transform: translateY(-8px); }
}
.support__title{
  font-family: "Russo One", system-ui, sans-serif;
  font-size: clamp(40px, 5.2vw, 68px);
  line-height: 1.05;
  margin: 0 0 28px;
  letter-spacing: .4px;
}
.support__line1{
  display: block;
  color: #fff;
}
.support__line2{
  display: block;
  background: linear-gradient(135deg, #f3c66d 0%, #b08a2a 50%, #f3c66d 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 28px rgba(176,138,42,.30);
  animation: supportShine 6s linear infinite;
}
@keyframes supportShine{
  0%   { background-position: 0%   50%; }
  100% { background-position: 200% 50%; }
}
.support__desc{
  max-width: 720px;
  margin: 0 auto;
  color: rgba(255,255,255,.78);
  font-size: 16.5px;
  line-height: 1.95;
  min-height: 4em;
}
.support__desc::after{
  content: "|";
  color: var(--amber, #b08a2a);
  margin-inline-start: 2px;
  animation: caret 1.05s steps(2) infinite;
}
.support__desc.is-done::after{ display: none; }
@keyframes caret{ 50%{ opacity: 0; } }

/* ---------- Persian font tweaks for new sections ---------- */
.lang-fa .about__title,
.lang-fa .whyus__title,
.lang-fa .support__title,
.lang-fa .support__line1,
.lang-fa .support__line2,
.lang-fa .why__title{
  font-family: "Lalezar", "Vazirmatn", system-ui, sans-serif;
  letter-spacing: 0;
  font-weight: 400;
}
.lang-fa .about__lead,
.lang-fa .whyus__sub,
.lang-fa .why__txt,
.lang-fa .support__desc{
  font-family: "Vazirmatn", system-ui, sans-serif;
  line-height: 2;
}
/* Persian keeps gun rotated mirrored so it points the natural way */
[dir="rtl"] .support__weapon img{ transform: rotate(-12deg) scaleX(-1); }
[dir="rtl"] .about__weapon{ transform: scaleX(-1); animation: aboutGunRtl 6s ease-in-out infinite; }
@keyframes aboutGunRtl{
  0%,100%{ transform: scaleX(-1) translateY(0) rotate(-3deg); }
  50%{    transform: scaleX(-1) translateY(-12px) rotate(-1deg); }
}

/* ---------- Mobile ---------- */
@media (max-width: 900px){
  .about{ padding: 56px 0; }
  .about__inner{ grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .about__media{ min-height: 240px; }
  .about__weapon{ max-width: 360px; }
  .about__lead{ margin: 0 auto; }
  .whyus__grid{ grid-template-columns: 1fr 1fr; gap: 14px; }
  .why{ padding: 22px 20px; }
  .support{ padding: 80px 0 100px; }
  .support__weapon{ width: 100px; margin-bottom: 20px; }
}
@media (max-width: 600px){
  .whyus__grid{ grid-template-columns: 1fr; }
  .about__weapon{ max-width: 300px; }
}

/* =====================================================
   v54 — Player profile small fixes
   - Playtime / Last Seen values: never wrap (force single line)
   - Donut center: always LTR so the K/D + numbers don't flip
     in Persian (and stay aligned)
   ===================================================== */
#ppPlaytime,
#ppLastSeen,
.pp__metaV{
  white-space: nowrap !important;
  text-align: left;
  direction: ltr;
}
[dir="rtl"] .pp__metaV{
  /* Even in RTL, the value is digits/English — keep it left-anchored
     under the Persian label. */
  text-align: right;        /* but visually align under the label */
  direction: ltr;
  unicode-bidi: isolate;
}

/* Donut center text — always LTR, language doesn't matter */
.donut__center,
[dir="rtl"] .donut__center{
  direction: ltr !important;
}
.donut__num,
.donut__numSm,
.donut__lbl{
  direction: ltr;
  unicode-bidi: isolate;
  text-align: center;
}

/* =====================================================
   v55 — Background: subtle gradient on inner pages only
   v51 painted a body-wide gradient that polluted the home
   page's nice fixed bg. Move it to inner pages only via
   the `page--lb` / inner body markers.
   ===================================================== */
html, body{
  /* Reset to plain dark — the .bg layer paints the home page */
  background: #0b0c10;
}

/* Inner pages (leaderbord, player) need the warm tint to
   continue past the first viewport because their content is
   long. Apply only there. */
body.page--lb,
body.page--player{
  background:
    radial-gradient(1100px 700px at 0% 0%,    rgba(207,36,36,.18), transparent 60%),
    radial-gradient(900px  600px at 100% 30%, rgba(176,138,42,.14), transparent 60%),
    radial-gradient(800px  600px at 50% 100%, rgba(70,214,126,.05), transparent 60%),
    #0b0c10;
}
/* Same for store / report / rules — short pages but consistent */
body.page--store,
body.page--report,
body.page--rules{
  background:
    radial-gradient(1100px 700px at 0% 0%,    rgba(207,36,36,.18), transparent 60%),
    #0b0c10;
}

/* =====================================================
   v56 — Top progress bar + improved page transition
   Inspired by NProgress: a thin bar at the top of the
   page that animates while navigation happens.
   ===================================================== */
.topbar{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  z-index: 10000;
  background:
    linear-gradient(90deg, #cf2424 0%, #ff5a5a 35%, #f3c66d 70%, #b08a2a 100%);
  box-shadow:
    0 0 12px rgba(207,36,36,.65),
    0 0 22px rgba(176,138,42,.40);
  border-radius: 0 3px 3px 0;
  pointer-events: none;
  opacity: 0;
  transition:
    width   .25s cubic-bezier(.16,.86,.32,1),
    opacity .25s ease;
}
.topbar.is-active{ opacity: 1; }
.topbar.is-done{
  width: 100% !important;
  opacity: 0;
  transition: width .15s linear, opacity .35s ease .12s;
}

/* A subtle pulse at the leading edge while indeterminate */
.topbar::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  filter: blur(2px);
  animation: topbarPulse 1s linear infinite;
}
.topbar.is-done::after{ animation: none; opacity: 0; }
@keyframes topbarPulse{
  0%   { transform: translateX(-100px); }
  100% { transform: translateX( 0px ); }
}

/* Improved page leaving transition: slight scale + opacity */
body.is-leaving{
  opacity: 0;
  transition: opacity .32s cubic-bezier(.4,0,1,1) !important;
}

/* =====================================================
   v57 — Lock images (no select / drag / save)
   ===================================================== */
img,
.bg__img,
.about__weapon,
.support__weapon img,
.brand__logo,
.foot2__logo,
.lbModeChar img,
.lbName__icon img,
.lt__cell img,
.shotBox__bgImg{
  -webkit-user-select: none;
  -moz-user-select:    none;
  -ms-user-select:     none;
  user-select:         none;
  -webkit-user-drag:   none;
  user-drag:           none;
  -webkit-touch-callout: none;
  pointer-events: none;          /* image itself is non-interactive */
}
/* But links/buttons containing images must still be clickable */
a img, button img{
  pointer-events: none;
}

/* =====================================================
   v58 — Support emblem (replaces the AK)
   A minimal hex-shield with crossed gradient strokes —
   coldgame-style, fits the warm palette.
   ===================================================== */
.support__emblem{
  width: 92px;
  height: 92px;
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 8px 22px rgba(207,36,36,.30))
          drop-shadow(0 0 32px rgba(176,138,42,.30));
  animation: supportFloat 5s ease-in-out infinite;
}
.support__emblem svg{
  width: 100%; height: 100%;
  display: block;
}

/* Make the staff pattern more visible — bigger & sharper than before */
.support__pattern{
  opacity: .22;            /* up from .14 */
  filter: hue-rotate(15deg) brightness(1.05) contrast(1.05);
  mask-image:        radial-gradient(ellipse 70% 75% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 50% 50%, black 30%, transparent 80%);
}
.support__bg__fade{
  background:
    radial-gradient(ellipse at center,
      rgba(176,138,42,.18) 0%,
      transparent 60%);
}


/* =====================================================
   v60 — Boost the support pattern visibility
   ===================================================== */
.support{ padding: 130px 0 150px; }
.support__pattern{
  opacity: .42 !important;
  filter: hue-rotate(15deg) brightness(1.15) contrast(1.20) saturate(1.10) !important;
  mask-image:        radial-gradient(ellipse 90% 92% at 50% 50%, black 60%, transparent 100%) !important;
  -webkit-mask-image: radial-gradient(ellipse 90% 92% at 50% 50%, black 60%, transparent 100%) !important;
}
.support__bg__fade{
  background:
    radial-gradient(ellipse at center,
      rgba(176,138,42,.22) 0%,
      rgba(207,36,36,.10) 35%,
      transparent 70%) !important;
}

/* =====================================================
   v61 — Lock the donut layout to LTR in both languages
   The earlier RTL flip kept getting tangled with the
   absolute-positioned center label. Force the whole donut
   container LTR — Persian text inside legend rows still
   reads RTL because they have unicode-bidi:isolate.
   ===================================================== */
.donut,
[dir="rtl"] .donut{
  direction: ltr !important;
}
.donut__svg,
[dir="rtl"] .donut__svg{
  grid-column: 1 !important;
  grid-row: 1 !important;
}
.donut__legend,
[dir="rtl"] .donut__legend{
  grid-column: 2 !important;
  grid-row: 1 !important;
}
.donut__center,
[dir="rtl"] .donut__center{
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
  width: 130px !important;
  height: 130px !important;
  transform: none !important;
}
.donut.donut--big .donut__center,
[dir="rtl"] .donut.donut--big .donut__center{
  width: 152px !important;
  height: 152px !important;
}
/* Legend rows are LTR by default; the Persian text inside
   them keeps its own RTL via the FA font + isolate. */
.donut__legend{
  direction: ltr;
}
.donut__legend > div,
.donut__legend > span{
  unicode-bidi: isolate;
}

/* =====================================================
   v62 — Animated gradient on the hero "BEST" / "بهترین‌ها"
   The gradient now has a wider strip and slides across.
   ===================================================== */
.title__shine{
  /* Bigger background so motion is visible inside the text */
  background: linear-gradient(
      90deg,
      rgba(255,255,255,.95) 0%,
      rgba(243,198,109,1)   18%,
      rgba(207,36,36,1)     38%,
      rgba(176,138,42,1)    58%,
      rgba(243,198,109,1)   78%,
      rgba(255,255,255,.95) 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.45));
  animation: heroShine 5s linear infinite;
}
@keyframes heroShine{
  0%   { background-position: 0%   50%; }
  100% { background-position: 220% 50%; }
}
/* RTL: same animation, no need for direction flip */

/* Hero lead rotator presentation */
.lead--rotator{
  min-height: 3.4em;        /* prevent layout jump while text changes */
  display: block;
}
.lead__txt{
  display: inline;
  white-space: pre-wrap;
}
.lead__caret{
  display: inline-block;
  margin-inline-start: 2px;
  color: var(--amber, #b08a2a);
  font-weight: 700;
  animation: caret 1.05s steps(2) infinite;
}
@keyframes caret{ 50%{ opacity: 0; } }

/* =====================================================
   v63 — Better page transitions + remove dark band on top of home
   ===================================================== */

/* The "dark band" on top of index was the body-fade animation
   doing one extra frame. Use a smoother curve and shorter so
   it matches the page-load topbar finish naturally. */
body{
  opacity: 0;
  animation: pageFadeIn .42s cubic-bezier(.16,.86,.32,1) forwards;
}
@keyframes pageFadeIn{
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
body.is-leaving{
  opacity: 0;
  transition: opacity .35s cubic-bezier(.4,0,1,1) !important;
  animation: none !important;
}

/* Make sure the home page doesn't get any darker overlay at the
   very top. Some legacy gradient on `html`/`body` was painting
   a dark stripe; reset and let .bg do its job. */
html{ background: #0b0c10; }
body:not(.page--lb):not(.page--player):not(.page--store):not(.page--report):not(.page--rules){
  background: #0b0c10;     /* index = solid base, .bg paints over it */
}

/* =====================================================
   v64 — Lighten the top band on home
   The original .top gradient was 75%→15% black and the
   default scrolled state stayed blackish. Use a softer,
   warmer overlay so the very top doesn't feel cut off
   from the rest of the hero.
   ===================================================== */
body:not(.page--lb):not(.page--player):not(.page--store):not(.page--report):not(.page--rules) .top:not(.is-scrolled){
  background: linear-gradient(180deg,
      rgba(10,10,14,.30),
      rgba(10,10,14,.04)) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.04);
}

/* A subtle warm radial glow from the top so the image's dark
   sky doesn't fight with the navbar */
.bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%,
      rgba(207,36,36,.10) 0%,
      rgba(176,138,42,.05) 35%,
      transparent 60%);
  pointer-events: none;
}

/* =====================================================
   v65 — Mobile leaderbord: horizontal scroll for player table
   ===================================================== */
@media (max-width: 900px){
  /* Make the table area scroll horizontally */
  .plScroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .plTable__inner{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .plHead, .plRows{
    min-width: 720px;
  }
  .plRow > div, .plRow > button,
  .plH{
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 12.5px !important;
    white-space: nowrap;
  }
  /* Categories: 2-column grid */
  .plCats{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .plSide{ width: 100% !important; }
}

/* Subtle scrollbar inside the table panel */
.plScroll::-webkit-scrollbar,
.plTable__inner::-webkit-scrollbar{ height: 6px; }
.plScroll::-webkit-scrollbar-track,
.plTable__inner::-webkit-scrollbar-track{ background: transparent; }
.plScroll::-webkit-scrollbar-thumb,
.plTable__inner::-webkit-scrollbar-thumb{
  background: rgba(207,36,36,.40);
  border-radius: 3px;
}

/* =====================================================
   v66 — Hero shine: seamless loop + remove home dark band
   1) The previous gradient (white→gold→red→amber→gold→white)
      with size 220% had a tiny visible jump when it looped
      back. Use a SYMMETRIC palette (start = end) and set
      background-size to 200% so the shift from 0% → 200%
      is pixel-identical at start and end. Loop is invisible.
   2) The home page is much taller than one viewport — the
      `.bg` is fixed and only covers the first 100vh, so once
      the user scrolled past the cards the body showed pure
      black. Add a soft warm radial behind the whole document
      so it never goes hard-black.
   ===================================================== */
.title__shine{
  background:
    linear-gradient(90deg,
      #fff       0%,
      #f3c66d   25%,
      #cf2424   50%,
      #f3c66d   75%,
      #fff     100%) !important;
  background-size: 200% 100% !important;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.45));
  animation: heroShine 6s linear infinite !important;
}
@keyframes heroShine{
  0%   { background-position: 0%   50%; }
  100% { background-position: 200% 50%; }
}

/* Home: paint a subtle warm tint behind the whole document
   so it doesn't fall to pure black past the first viewport. */
body:not(.page--lb):not(.page--player):not(.page--store):not(.page--report):not(.page--rules){
  background:
    radial-gradient(1200px 900px at 0% 0%,    rgba(207,36,36,.14), transparent 65%),
    radial-gradient(1100px 800px at 100% 30%, rgba(176,138,42,.12), transparent 65%),
    radial-gradient(1000px 700px at 50% 100%, rgba(176,138,42,.08), transparent 60%),
    #0b0c10 !important;
}

/* =====================================================
   v67 — Support emblem switched from SVG to PNG
   The container was sized for SVG; image needs explicit
   sizing too. Make the wrench a touch bigger and rotate
   it so it fits the visual rhythm of the section.
   ===================================================== */
.support__emblem{
  width: 130px !important;
  height: 130px !important;
}
.support__emblemImg{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
  transform: rotate(-22deg);
  filter:
    drop-shadow(0 14px 28px rgba(207,36,36,.35))
    drop-shadow(0 0 36px rgba(176,138,42,.20));
}
[dir="rtl"] .support__emblemImg{
  transform: rotate(22deg) scaleX(-1);
}

/* =====================================================
   v68 — title__shine: fix the gradient-bar bug
   v66 used `background: linear-gradient(...) !important;`
   The shorthand resets every background-* sub-property to
   its initial value. Because `background-clip: text` was
   declared *without* !important, the !important shorthand
   reset it to `border-box`. Result: the gradient painted
   the whole span instead of being clipped to glyphs, so
   the text became an invisible coloured bar.
   Fix: declare each background-* property individually,
   never via the shorthand, and put `!important` on
   background-clip so nothing later can revert it.
   ===================================================== */
.title__shine{
  background-color: transparent !important;
  background-image: linear-gradient(
      90deg,
      #fff       0%,
      #f3c66d   12.5%,
      #cf2424   25%,
      #f3c66d   37.5%,
      #fff      50%,
      #f3c66d   62.5%,
      #cf2424   75%,
      #f3c66d   87.5%,
      #fff     100%
  ) !important;
  background-size: 200% 100% !important;
  background-position: 0% 50% !important;
  background-repeat: no-repeat !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.45));
  animation: heroShine 6s linear infinite !important;
}
/* =====================================================
   v69 — Hero shine: mathematically seamless loop
   The gradient above is TWO copies of the palette
   (white→gold→red→gold→white repeated). With
   background-size: 200%, animating position from 0%
   (visible: first copy) to 100% (visible: second copy)
   produces a pixel-identical end frame, so the loop
   has no teleport.
   ===================================================== */
@keyframes heroShine{
  0%   { background-position:   0% 50%; }
  100% { background-position: 100% 50%; }
}

/* =====================================================
   v70 — Home page background: roll back to the same
   gradient inner pages use.
   v66 painted a bespoke 3-radial gradient on the home
   body to fix the dark-band-past-first-viewport issue.
   That gradient was different from the rest of the site
   and looked bad. The user wants the home page to share
   the inner-page gradient instead. Drop v66's home rule
   and make every body-with-page-class share the same
   warm radial gradient.
   ===================================================== */
body.page--home,
body.page--lb,
body.page--player,
body.page--store,
body.page--report,
body.page--rules{
  background:
    radial-gradient(1100px 700px at 0% 0%,    rgba(207,36,36,.18), transparent 60%),
    radial-gradient(900px  600px at 100% 30%, rgba(176,138,42,.14), transparent 60%),
    radial-gradient(800px  600px at 50% 100%, rgba(70,214,126,.05), transparent 60%),
    #0b0c10 !important;
}
/* Kill v66's bespoke home gradient by zeroing its more
   specific rule. Same selector, applied later → wins. */
body:not(.page--lb):not(.page--player):not(.page--store):not(.page--report):not(.page--rules){
  background:
    radial-gradient(1100px 700px at 0% 0%,    rgba(207,36,36,.18), transparent 60%),
    radial-gradient(900px  600px at 100% 30%, rgba(176,138,42,.14), transparent 60%),
    radial-gradient(800px  600px at 50% 100%, rgba(70,214,126,.05), transparent 60%),
    #0b0c10 !important;
}

/* =====================================================
   v71 — Leaderbord mobile: single horizontal scroll
   v65 put overflow-x:auto on BOTH `.plScroll` and
   `.plTable__inner`. Result: two nested scroll axes,
   so the header (.plHead) scrolled separately from
   the rows (.plRows). Move the horizontal scroll to
   `.plTable__inner` only — it contains both head and
   rows, so they slide together. `.plScroll` keeps its
   vertical scroll for tall row lists.
   ===================================================== */
@media (max-width: 900px){
  /* CSS quirk: overflow-x:visible is silently converted to `auto` if
     overflow-y is `auto`/`scroll`. .plScroll has overflow-y:auto, so
     to truly disable horizontal scroll on it we must set BOTH axes
     to visible. The vertical scroll is preserved by the parent on
     mobile (rows are short — 11 players — so no need). */
  .plScroll{
    overflow: visible !important;
    max-height: none !important;
    padding-right: 0 !important;
  }
  .plTable__inner{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Both must share the same min-width so they line up */
  .plHead, .plRows{
    min-width: 720px !important;
  }
}

/* =====================================================
   v72 — toTop button: visibility threshold + behavior fix
   Bugs:
   1) On short pages (rules, store, report) the button

/* =====================================================
   v73 — Footer header underline = word width
   .foot2__head is `display: inline-block` so 100% means
   "the rendered width of the text inside". The old rule
   used a fixed 28px, which always looked wrong in FA
   where words are longer (e.g. "قوانین و پشتیبانی").
   ===================================================== */
.foot2__head::after{
  width: 100% !important;
  /* keep the gradient + radius from the original rule */
}
/* In RTL the underline should grow from the right */
[dir="rtl"] .foot2__head::after{
  left: auto;
  right: 0;
  background: linear-gradient(270deg, rgba(207,36,36,1), rgba(255,211,120,.9));
}

/* =====================================================
   v74 — Navbar & footer hover underline = white
   Default (non-active) hover: a clean white underline,
   matching the text colour. Active state keeps the
   coloured (red→gold) gradient as the highlight cue.
   STORE is the exception: its accent colour is gold,
   so its hover underline stays gold.
   ===================================================== */

/* --- Navbar links --- */
/* Hover only (not active) → white underline */
.nav__link:not(.is-active):hover::after{
  background: linear-gradient(90deg,
      rgba(255,255,255,.95),
      rgba(255,255,255,.7),
      rgba(255,255,255,0)) !important;
}
/* RTL: reverse the gradient direction so fade starts from
   the same edge as the underline grows from. */
[dir="rtl"] .nav__link:not(.is-active):hover::after{
  background: linear-gradient(270deg,
      rgba(255,255,255,.95),
      rgba(255,255,255,.7),
      rgba(255,255,255,0)) !important;
}
/* STORE is exempt: its hover underline is gold (accent) */
.nav__link--store:not(.is-active):hover::after{
  background: linear-gradient(90deg,
      rgba(255,211,120,1),
      rgba(176,138,42,.55),
      rgba(255,255,255,0)) !important;
}
[dir="rtl"] .nav__link--store:not(.is-active):hover::after{
  background: linear-gradient(270deg,
      rgba(255,211,120,1),
      rgba(176,138,42,.55),
      rgba(255,255,255,0)) !important;
}

/* --- Footer links --- */
/* Hover only → white underline */
.foot2__link:hover::after{
  background: linear-gradient(90deg,
      rgba(255,255,255,.95),
      rgba(255,255,255,.7),
      rgba(255,255,255,0)) !important;
}
[dir="rtl"] .foot2__link:hover::after{
  background: linear-gradient(270deg,
      rgba(255,255,255,.95),
      rgba(255,255,255,.7),
      rgba(255,255,255,0)) !important;
}
/* Footer Store link is gold on hover */
.foot2__link--store:hover::after{
  background: linear-gradient(90deg,
      rgba(255,211,120,1),
      rgba(176,138,42,.55),
      rgba(255,255,255,0)) !important;
}
[dir="rtl"] .foot2__link--store:hover::after{
  background: linear-gradient(270deg,
      rgba(255,211,120,1),
      rgba(176,138,42,.55),
      rgba(255,255,255,0)) !important;
}

/* =====================================================
   v75 — Home: replace the dark bg.jpg with a strong
   gradient + grid + glow stack.

   Why this works:
   - bg.jpg is essentially RGB ≈ 30 with a few "stars" at
     RGB ≈ 45 (0.06% of pixels). It's effectively a black
     slab.
   - Even with mix-blend-mode: screen, the dark base still
     dimmed everything.
   - Fix: hide bg__img on home. Paint a strong warm
     gradient on .bg (which is fixed full-viewport) so the
     warm tint is visible everywhere, not just near
     gradient origins. Layer multiple radials + a base
     warm linear so even the centre of the viewport reads
     warm rather than black.
   ===================================================== */
body.page--home .bg{
  background:
    /* corner accents */
    radial-gradient(1400px 900px at 0%   0%,   rgba(207,36,36,.70), transparent 62%),
    radial-gradient(1200px 800px at 100% 20%,  rgba(176,138,42,.55), transparent 62%),
    radial-gradient(1200px 900px at 50% 100%,  rgba(207,36,36,.30), transparent 60%),
    /* a warm base so even the centre reads as not-black */
    linear-gradient(180deg, rgba(40,18,18,1) 0%, rgba(28,18,14,1) 60%, rgba(20,16,14,1) 100%) !important;
}
/* Bring back bg.jpg as a subtle texture overlay so the page
   keeps its starfield/grain. screen blend treats black as
   transparent so the dark base disappears, and the brightness
   filter pushes the faint stars hard enough to actually read
   over the warm gradient below. */
body.page--home .bg__img{
  display: block !important;
  mix-blend-mode: screen;
  opacity: .55;
  filter: brightness(2.6) contrast(1.4);
}
/* Boost the grid (it provides the star/grid texture) */
body.page--home .bg__grid{
  opacity: .22;
}
/* Glows give that warm bloom in the corners — keep them */
body.page--home .bg__glow{
  opacity: .65;
}
/* Kill the v64 .bg::after warm tint; v75 gradient on .bg
   already handles that, doubling them over-saturates. */
body.page--home .bg::after{
  display: none !important;
}

/* =====================================================
   v77 — Roll back v75 brightness + Store gold + smooth
   shine animation.

   1) STORE colour: an old v12 layer ("Store tab behaves
      like others") forced the link white on hover/active.
      User wants gold back: same gold as the underline so
      the colour and accent agree.

   2) Background: v75 dialled the home gradient WAY up
      (alpha .70/.55, glow .65, grid .22, plus a warm base
      linear gradient). The page now reads "neon poster"
      instead of "dark game site". Roll the alphas back to
      v66-ish levels — enough warm tint to kill the black
      slab, but not so much that the page looks tinted.
      Keep `bg.jpg` visible (screen blend) so the star/grid
      texture is back.

   3) Hero shine: drop-shadow on a text-clipped gradient
      is GPU-expensive and can cause the animation to hitch
      mid-cycle. Remove the filter and let the gradient
      itself carry the shine. Duration shortened so the
      sweep reads as a constant glide.
   ===================================================== */

/* --- 1) Store gold on hover/active (override v12) --- */
.nav__link--store{
  color: rgba(255, 211, 120, .92) !important;
}
.nav__link--store:hover,
.nav__link--store.is-active{
  color: rgba(255, 211, 120, 1) !important;
}

/* --- 2) Tone down the home background --- */
body.page--home .bg{
  background:
    radial-gradient(1400px 900px at 0% 0%,    rgba(207,36,36,.32), transparent 62%),
    radial-gradient(1200px 800px at 100% 20%, rgba(176,138,42,.22), transparent 62%),
    radial-gradient(1100px 800px at 50% 100%, rgba(207,36,36,.14), transparent 60%),
    #0b0c10 !important;
}
body.page--home .bg__img{
  display: block !important;
  mix-blend-mode: screen;
  opacity: .85;
  filter: brightness(1.6) contrast(1.15);
}
body.page--home .bg__grid{
  opacity: .17 !important;   /* default */
}
body.page--home .bg__glow{
  opacity: .45 !important;   /* default */
}

/* --- 3) Smooth, never-stalling hero shine --- */
.title__shine{
  filter: none !important;          /* drop the GPU-heavy filter */
  text-shadow: 0 14px 24px rgba(0,0,0,.45);  /* keep depth, cheaper */
  animation: heroShine 4s linear infinite !important;
}

/* =====================================================
   v78 — Match home theme to leaderbord exactly (gold
   replaces green), Store back to white-default, and a
   visible animated shine.

   1) Background: leaderbord uses the v55 body gradient:
      red .18 / amber .14 / GREEN .05. User wants home to
      use that same gradient, but with the green radial
      replaced by an amber/gold one. Move the gradient
      back to `body` and undo all of v75/v77's heavy
      `.bg` painting and `.bg__img` filtering, so home
      and inner pages render identically.

   2) STORE colour: in default state should be the same
      muted white as the other nav links. Only hover and
      active turn it gold. v77 made it gold all the time.

   3) Hero shine: stronger animation. The drop-shadow is
      back (the user is fine with the small perf cost),
      duration shortened to 3s so the sweep is visible.
   ===================================================== */

/* --- 1) Background: undo v75/v77 .bg painting --- */
body.page--home .bg{
  background: transparent !important;
}
body.page--home .bg__img{
  display: block !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  filter: none !important;
}
/* Apply the leaderbord-style gradient to the home body.
   Same shape as v55/page--lb, with amber instead of green
   in the third radial. */
body.page--home{
  background:
    radial-gradient(1100px 700px at 0% 0%,    rgba(207,36,36,.18), transparent 60%),
    radial-gradient(900px  600px at 100% 30%, rgba(176,138,42,.14), transparent 60%),
    radial-gradient(800px  600px at 50% 100%, rgba(176,138,42,.10), transparent 60%),
    #0b0c10 !important;
  background-attachment: fixed, fixed, fixed, fixed !important;
}
/* And make page--lb match (replace green with amber) */
body.page--lb,
body.page--player{
  background:
    radial-gradient(1100px 700px at 0% 0%,    rgba(207,36,36,.18), transparent 60%),
    radial-gradient(900px  600px at 100% 30%, rgba(176,138,42,.14), transparent 60%),
    radial-gradient(800px  600px at 50% 100%, rgba(176,138,42,.10), transparent 60%),
    #0b0c10 !important;
  background-attachment: fixed, fixed, fixed, fixed !important;
}

/* --- 2) STORE default white, hover/active gold --- */
.nav__link--store{
  color: rgba(255,255,255,.78) !important;
}
.nav__link--store:hover,
.nav__link--store.is-active{
  color: rgba(255, 211, 120, 1) !important;
}

/* --- 3) Hero shine: visible animated sweep --- */
.title__shine{
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.45)) !important;
  text-shadow: none !important;
  animation: heroShine 3s linear infinite !important;
}

/* =====================================================
   v79 — Better page transitions + AK spinner

   Three things:

   1) On the OLD setup, `body { opacity:0; animation: pageFadeIn }`
      was the entire entrance: the page faded as a single black
      rectangle, then was suddenly fully visible. The user wants
      individual components to animate in. We replace the body-
      level fade with a per-element `[data-reveal]` system
      animated via JS (see `revealOnLoad` in app.js), so each
      section translates up + fades in with a small stagger.

   2) Initial pageload + lang-switch overlay: now hold for
      ~1.5s (was ~280ms) and use the AK rifle icon.

   3) The lang-switch / pageload overlay spinner is now an AK
      silhouette that rotates around its centre (no spinning
      ring border). Same spinner is reused for both flows.
   ===================================================== */

/* --- 1) Drop the page-wide fade. Body shows immediately;
       individual components handle their own entrance. --- */
body{
  opacity: 1 !important;
  animation: none !important;
}

/* Per-element entrance (set on .reveal and tagged sections by
   the JS module). Initially hidden, then animated in. */
[data-reveal]{
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .55s cubic-bezier(.16,.86,.32,1),
    transform .55s cubic-bezier(.16,.86,.32,1);
  will-change: opacity, transform;
}
[data-reveal].is-in{
  opacity: 1;
  transform: translateY(0);
}

/* Leaving the page still uses a fast body fade — keeps the
   "this page is going away" cue without a dark slab on entry. */
body.is-leaving{
  opacity: 0 !important;
  transition: opacity .32s cubic-bezier(.4,0,1,1) !important;
  animation: none !important;
}

/* --- 2/3) AK spinner ------------------------------------- */
/* Reused inside both langSwitchOverlay and the new pageLoader.
   Border ring is gone; the AK icon rotates around its centre.
   The icon is an inline SVG (currentColor + amber tint so it
   reads on the dark backdrop). */
.akSpin{
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 18px rgba(255,211,120,.45));
  animation: akSpin 1.1s linear infinite;
}
.akSpin svg{
  width: 100%;
  height: 100%;
  color: rgba(255, 211, 120, .96);
}
@keyframes akSpin{
  to { transform: rotate(360deg); }
}

/* v80: appLoader removed (it was a fixed full-viewport
   layer with backdrop-filter, same defect as the old
   pageLoader: even with opacity:0 the layer still tinted
   what was beneath via the blur composite). The reveal
   stagger now starts immediately — no overlay needed. */
.appLoader{ display: none !important; }

/* Override the old border-ring spinner used by lang switch.
   We'll keep the wrapper but replace the contents via JS. */
.langSwitchOverlay__spin{
  border: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  animation: none !important;
  background: transparent !important;
}

/* =====================================================
   v80 — Three fixes:
   1) Stop the dark band that re-appears on long pages.
      The body gradient was sized (radials) so its alpha
      faded out past the first viewport. Use
      `background-attachment: fixed` on the home body so
      the gradient stays anchored to the viewport instead
      of scrolling away.
   2) Faster, less-black page transition. Drop the
      opacity-to-zero fade. Use a quick translateX +
      opacity blend instead so the page feels like it's
      sliding rather than dimming.
   3) Topbar progress: keep the existing `.topbar` element
      (already styled like the site theme — red→amber→
      gold gradient) and just make sure the JS uses it.
   ===================================================== */

/* 1) Anchor the home gradient so it doesn't fade away --- */
/* Why this is needed:
   - The body gradient has 4 layers; in the original v78 rule
     the radials are sized in pixels, so on tall pages the
     gradient runs out of paint past ~700px and the page goes
     dark.
   - Normally `background-attachment: fixed` on body would
     fix this, but body has `overflow-x: hidden`, which makes
     it a scroll container — and per spec, fixed-attachment
     bg on a scroll container behaves like local. So fixed
     on body is a no-op here.
   - Instead, paint the same gradient on `html` (which is
     never a scroll container in this layout) and clear body
     background. The html-level gradient stays in viewport
     space without any attachment trickery.
*/
html{
  background:
    radial-gradient(1100px 700px at 0% 0%,    rgba(207,36,36,.18), transparent 60%),
    radial-gradient(900px  600px at 100% 30%, rgba(176,138,42,.14), transparent 60%),
    radial-gradient(800px  600px at 50% 100%, rgba(176,138,42,.10), transparent 60%),
    #0b0c10 !important;
  background-attachment: fixed, fixed, fixed, fixed !important;
}
/* Body gradient becomes transparent since html now owns it.
   The competing rule is `body:not(.x):not(.y):not(.z):not(.w):not(.v)`
   which has specificity (0,5,1). Repeating the class on the
   selector is a portable specificity-bump trick — same
   element matches `body.page--home.page--home...`, but the
   selector is counted as having that many class-level
   contributions. (0,6,1) > (0,5,1). No IDs, no inline. */
body.page--home.page--home.page--home.page--home.page--home.page--home,
body.page--lb.page--lb.page--lb.page--lb.page--lb.page--lb,
body.page--player.page--player.page--player.page--player.page--player.page--player,
body.page--store.page--store.page--store.page--store.page--store.page--store,
body.page--report.page--report.page--report.page--report.page--report.page--report,
body.page--rules.page--rules.page--rules.page--rules.page--rules.page--rules{
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* 2) Faster, brighter page leave ------------------------ */
/* Instead of a slow opacity-only fade to black, slide the
   page contents up + fade. The old `is-leaving { opacity:0 }`
   rule is replaced by this; `!important` to win against any
   earlier copies. */
body.is-leaving{
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  transition:
    opacity   .18s cubic-bezier(.4,0,1,1),
    transform .18s cubic-bezier(.4,0,1,1) !important;
  animation: none !important;
}

/* 3) Make the topbar a touch thicker + brighter so it's a
   more visible "loading line" while navigating. */
.topbar{
  height: 4px !important;
}
.topbar.is-active{
  /* Ensure smooth fill animation */
  transition:
    width   .35s cubic-bezier(.16,.86,.32,1),
    opacity .15s ease !important;
}

/* =====================================================
   v82 — Force the Total Playtime value to render LTR
   even in FA, so "867,341 H" stays in that order instead
   of bidi-reversing to "H 867,341".
   ===================================================== */
#totalPlayers{
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: right; /* keep the value right-aligned in its cell */
}
.lang-fa #totalPlayers{
  text-align: left; /* in RTL, isolate-direction LTR means left edge is start */
}

/* =====================================================
   v83 — Rules page (rules.html)
   ===================================================== */
.rulesPage{ padding: 28px 0 80px; }
.rulesPage .container{ max-width: 1280px; }

/* Hero --------------------------------------------------- */
.rulesHero{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr);
  gap: 40px;
  align-items: center;
  padding: 28px 8px 56px;
}
@media (max-width: 900px){
  .rulesHero{ grid-template-columns: 1fr; gap: 24px; padding: 12px 0 36px; }
}

.rulesHero__media{
  position: relative;
  display: grid; place-items: center;
  min-height: 320px;
}
.rulesHero__img{
  width: clamp(220px, 32vw, 360px);
  height: auto;
  filter:
    drop-shadow(0 22px 36px rgba(207,36,36,.32))
    drop-shadow(0 0 28px rgba(255,211,120,.18));
  user-select: none; -webkit-user-drag: none;
  transform: rotate(-6deg);
  animation: rulesFloat 6s ease-in-out infinite;
}
@keyframes rulesFloat{
  0%,100% { transform: rotate(-6deg) translateY(0); }
  50%     { transform: rotate(-4deg) translateY(-10px); }
}
.rulesHero__glow{
  position: absolute; inset: 10% 10% 10% 10%;
  background: radial-gradient(circle, rgba(207,36,36,.30), transparent 60%);
  filter: blur(40px);
  z-index: -1;
}

.rulesHero__title{
  font-family: 'Russo One', system-ui, sans-serif;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.05;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: .4px;
}
.rulesHero__brand{
  display: block;
  background: linear-gradient(90deg, #cf2424 0%, #f3c66d 50%, #cf2424 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: rulesShine 5s linear infinite;
}
@keyframes rulesShine{
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}
.rulesHero__lead{
  color: rgba(255,255,255,.66);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 18px;
  max-width: 580px;
}
.rulesHero__pills{
  list-style: none; padding: 0; margin: 0 0 22px;
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 13.5px;
  color: rgba(255,255,255,.78);
}
.rulesHero__pill{ display: inline-flex; align-items: center; gap: 8px; }
.rulesHero__pillDot{
  width: 8px; height: 8px;
  border-radius: 99px;
  background: #cf2424;
  box-shadow: 0 0 12px rgba(207,36,36,.7);
}
.rulesHero__pill:nth-child(2) .rulesHero__pillDot{ background:#f3c66d; box-shadow: 0 0 12px rgba(255,211,120,.7); }
.rulesHero__pill:nth-child(3) .rulesHero__pillDot{ background:#46d67e; box-shadow: 0 0 12px rgba(70,214,126,.6); }

.rulesHero__cta{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  border: 0; border-radius: 999px;
  background: linear-gradient(90deg, #cf2424, #f3c66d);
  color: #1f0a0a;
  font-weight: 900;
  letter-spacing: .5px;
  font-size: 13.5px;
  cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease);
  box-shadow: 0 12px 30px rgba(207,36,36,.30);
}
.rulesHero__cta:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 16px 36px rgba(207,36,36,.42);
}
.rulesHero__cta svg{ width: 18px; height: 18px; }

/* Categories list ---------------------------------------- */
.rulesList{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}

.ruleCat{
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.ruleCat:hover{
  border-color: rgba(255,211,120,.30);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.ruleCat.is-open{
  border-color: rgba(207,36,36,.40);
}

.ruleCat__head{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: start;
  color: inherit;
  font: inherit;
}
.ruleCat__heading{ min-width: 0; }
.ruleCat__title{
  font-family: 'Russo One', system-ui, sans-serif;
  font-size: 20px;
  margin: 0 0 4px;
  color: #fff;
  letter-spacing: .3px;
}
.ruleCat__sub{
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,.55);
}
.ruleCat__meta{
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.ruleCat__count{
  font-size: 12px;
  color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.ruleCat__count strong{
  color: #f3c66d;
  font-weight: 800;
  margin-inline-end: 3px;
}
.ruleCat__chev{
  width: 20px; height: 20px;
  color: rgba(255,255,255,.55);
  transition: transform .25s var(--ease);
}
.ruleCat.is-open .ruleCat__chev{ transform: rotate(180deg); color:#f3c66d; }

/* Body — collapsible */
.ruleCat__body{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease);
}
.ruleCat.is-open .ruleCat__body{ grid-template-rows: 1fr; }
.ruleCat__body > .ruleList{
  overflow: hidden;
}
.ruleList{
  list-style: none;
  margin: 0;
  padding: 0 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ruleItem{
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.05);
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.ruleItem:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,211,120,.18);
}
.ruleItem__num{
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: rgba(207,36,36,.12);
  border: 1px solid rgba(207,36,36,.30);
  color: #f3c66d;
  font-family: 'Russo One', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.ruleItem__copy{ min-width: 0; }
.ruleItem__title{
  font-family: 'Russo One', system-ui, sans-serif;
  font-size: 16px;
  margin: 0 0 4px;
  color: #fff;
  letter-spacing: .3px;
}
.ruleItem__desc{
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.62);
}
.ruleItem__tag{
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #ef4444;
  background: rgba(207,36,36,.10);
  border: 1px solid rgba(207,36,36,.30);
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
@media (max-width: 600px){
  .ruleItem{ grid-template-columns: 32px 1fr; }
  .ruleItem__tag{ grid-column: 1 / -1; justify-self: start; }
}

/* Important notes ---------------------------------------- */
.ruleNotes{
  margin-top: 8px;
  padding: 22px 24px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(207,36,36,.06), rgba(255,211,120,.04));
  border: 1px solid rgba(255,211,120,.20);
}
.ruleNotes__head{
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.ruleNotes__icon{
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255,211,120,.12);
  border: 1px solid rgba(255,211,120,.30);
  color: #f3c66d;
}
.ruleNotes__icon svg{ width: 22px; height: 22px; }
.ruleNotes__title{
  font-family: 'Russo One', system-ui, sans-serif;
  font-size: 18px;
  margin: 0;
  color: #fff;
}
.ruleNotes__list{
  margin: 0; padding-inline-start: 22px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255,255,255,.78);
}
.ruleNotes__list li::marker{ color: #f3c66d; }

/* Persian (FA) tweaks ------------------------------------ */
.lang-fa .rulesHero__title,
.lang-fa .rulesHero__brand{
  font-family: 'Lalezar', 'Vazirmatn', system-ui, sans-serif;
}
.lang-fa .rulesHero__lead,
.lang-fa .rulesHero__pills,
.lang-fa .rulesHero__cta,
.lang-fa .ruleCat__sub,
.lang-fa .ruleItem__desc,
.lang-fa .ruleNotes__list{
  font-family: 'Vazirmatn', system-ui, sans-serif;
}
.lang-fa .ruleCat__title,
.lang-fa .ruleItem__title,
.lang-fa .ruleNotes__title{
  font-family: 'Vazirmatn', 'Russo One', system-ui, sans-serif;
  font-weight: 800;
}
.lang-fa .ruleItem__num{
  font-family: 'Rajdhani', system-ui, sans-serif;
}
/* Tag chips stay LTR-isolated regardless of body direction
   so the # sits on the left of the keyword. */
.ruleItem__tag{
  direction: ltr;
  unicode-bidi: isolate;
}

/* =====================================================
   v84 — Rules typography casing
   - Category titles (3 sections) → ALL CAPS in EN
   - Rule titles (per item)        → ALL CAPS in EN
   - Rule descriptions             → Title Case in EN
     (`capitalize` makes the first letter of each word
     uppercase but leaves already-capital letters alone)
   FA is unaffected — Persian script has no upper/lower
   case, so text-transform is a visual no-op there.
   ===================================================== */
body:not(.lang-fa) .ruleCat__title,
body:not(.lang-fa) .ruleItem__title{
  text-transform: uppercase;
  letter-spacing: .6px;
}
body:not(.lang-fa) .ruleItem__desc{
  text-transform: capitalize;
}
/* FA explicit reset (no transform) */
body.lang-fa .ruleCat__title,
body.lang-fa .ruleItem__title,
body.lang-fa .ruleItem__desc{
  text-transform: none;
}

/* =====================================================
   v86 — Rules page polish (5 fixes)

   1) Hero CTA: drop the lift-on-hover (the "pop up").
      Keep the glow, and add a slow ambient pulse to the
      shadow so the button breathes instead of jumping.

   2) FA hero title weight: Lalezar reads visually super
      heavy and the user agent default for h1 is bold (700)
      which only doubles down. Step down a notch — switch
      family to Vazirmatn and pin font-weight: 600 so both
      loaded and system-fallback renders feel lighter.
      Brand keeps its display heft via Vazirmatn 800 +
      the existing gradient.

   3) Collapsed-card ghost stripe under each .ruleCat:
      .ruleCat__body uses the grid-template-rows: 0fr → 1fr
      collapse trick, but .ruleList has 18px bottom padding
      which IS part of the box and is NOT clipped by the
      grid trick (`overflow: hidden` zeros content size but
      padding still renders). Fix by collapsing the bottom
      padding while closed and transitioning it back on
      open in sync with the grid transition.

   4) Count chip "5 rules" → "5 Rules" in EN (Title Case
      via text-transform: capitalize). FA reset to none
      to match the v84 pattern.

   5) facem.png — touch lockdown (-webkit-touch-callout)
      so iOS long-press doesn't show the Save Image sheet.
      contextmenu + dragstart are already blocked globally
      by the lockImages IIFE in app.js (v57).
   ===================================================== */

/* 1) CTA — no lift, ambient glow pulse, stronger hover */
.rulesHero__cta{
  animation: rulesCtaPulse 2.6s ease-in-out infinite;
}
.rulesHero__cta:hover,
.rulesHero__cta:focus-visible{
  transform: none;
  filter: brightness(1.10);
  box-shadow:
    0 18px 40px rgba(207,36,36,.50),
    0 0 0 6px rgba(255,211,120,.10);
  animation-play-state: paused;
}
.rulesHero__cta:active{
  transform: none;
}
@keyframes rulesCtaPulse{
  0%, 100% { box-shadow: 0 12px 28px rgba(207,36,36,.28); }
  50%      { box-shadow: 0 16px 38px rgba(207,36,36,.46); }
}

/* 2) FA hero title — one notch lighter, brand keeps display weight.
   Note: Vazirmatn @font-face declarations include 600/700/800/900
   but NOT 500. The 500 here is intentional for the system-fallback
   render (where Lalezar/Vazirmatn aren't available yet) — system
   fonts have a Medium face that reads clearly lighter than the
   default h1 bold (700). Once Vazirmatn TTFs are uploaded, the
   browser will round 500 to the nearest declared weight (600,
   SemiBold) which still reads as the requested step-down from
   Lalezar's display heft. */
.lang-fa .rulesHero__title{
  font-family: 'Vazirmatn', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0;
}
.lang-fa .rulesHero__brand{
  font-family: 'Vazirmatn', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0;
}

/* 3) Collapsed body — kill the padding-bottom ghost stripe */
.ruleCat__body > .ruleList{
  padding-bottom: 0;
  transition: padding-bottom .35s var(--ease);
}
.ruleCat.is-open .ruleCat__body > .ruleList{
  padding-bottom: 18px;
}

/* 4) Count chip casing — EN Title Case, FA untouched */
body:not(.lang-fa) .ruleCat__count{
  text-transform: capitalize;
}
body.lang-fa .ruleCat__count{
  text-transform: none;
}

/* 5) facem.png — iOS long-press lock */
.rulesHero__img{
  -webkit-touch-callout: none;
}

/* =====================================================
   v88 — Hero shine palette → match rules brand

   The home hero `.title__shine` (BEST / بهترین‌ها) used a
   symmetric 9-stop white→gold→red→gold→white sweep
   (v68/v69), tuned for a seamless 100% loop. The user
   wants it to feel like the `.rulesHero__brand`
   "PersianToxic" word on the rules page: a simpler
   red→gold→red 3-stop palette that slides past.

   Approach: override `.title__shine` with the SAME palette
   shape as `.rulesHero__brand` and reuse its keyframe
   (`rulesShine`, 0% → 200%). Background-size stays 200%,
   palette is symmetric (red at 0% AND 100%) so the tile
   seam is colour-identical → loop is seamless.

   Drop-shadow stays — the home hero is much larger than
   the rules brand and reads thin without it.
   ===================================================== */
.title__shine{
  background-color: transparent !important;
  background-image:
    linear-gradient(90deg,
      #cf2424   0%,
      #f3c66d  50%,
      #cf2424 100%
    ) !important;
  background-size: 200% 100% !important;
  background-position: 0% 50% !important;
  background-repeat: repeat !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.45)) !important;
  animation: rulesShine 5s linear infinite !important;
}

/* =====================================================
   v89 — Two reverts / fixes

   1) Hero shine — animation wasn't visibly moving even
      though the Web Animation API showed `playState:
      running` and `currentTime` advancing. Cause: v88
      declared `background-position: 0% 50% !important`,
      which (per CSS Animations spec) WINS over animation
      keyframe values. The keyframe `rulesShine` would
      try to set `background-position: 0% → 200%` but
      the static !important pinned it at `0% 50%`. So the
      animation ran internally but every paint showed the
      same position. Fix: drop the static bg-position
      override and ALSO drop the `filter: drop-shadow`
      which can mask repaints under bg-clip:text — replace
      with text-shadow for the same depth at lower cost.

   2) FA hero title weight — user changed their mind.
      v86 stepped it down to weight 500 with Vazirmatn;
      they prefer the original h1-default bold. Revert
      family back to Lalezar primary and use
      `font-weight: revert` to restore the user-agent
      bold default that was in effect pre-v86.
   ===================================================== */

/* 1) Title shine — let the animation actually animate */
.title__shine{
  /* Drop the static !important pin on bg-position. The
     animation's keyframes (0% → 200%) now control it. */
  background-position: revert !important;
  /* Replace drop-shadow filter with text-shadow. Same
     visual depth, no rasterized layer, repaints freely. */
  filter: none !important;
  text-shadow: 0 14px 24px rgba(0,0,0,.45) !important;
}

/* 2) FA hero title — revert weight to original UA bold */
.lang-fa .rulesHero__title{
  font-family: 'Lalezar', 'Vazirmatn', system-ui, sans-serif;
  font-weight: revert;
  letter-spacing: .4px;
}
.lang-fa .rulesHero__brand{
  font-family: 'Lalezar', 'Vazirmatn', system-ui, sans-serif;
  font-weight: revert;
}

/* =====================================================
   v90 — Hero shine: actually animate (real fix)

   Symptom: in v88 the gradient palette was correct but the
   animation didn't visibly move. v89 dropped the filter
   thinking it was a paint issue — wasn't. Real cause:
   v68 declared `background-position: 0% 50% !important`,
   and per CSS Cascade 4 spec, author !important values WIN
   over CSS Animation values. Empirically confirmed via
   getComputedStyle(): the bg-position stays pinned no
   matter what the rulesShine keyframe says, while the same
   keyframe used by `.rulesHero__brand` (which has NO
   !important on bg-position) runs fine.

   We can't drop the v68 !important without editing v68
   (layering rule) and we can't override !important with
   non-!important. So we animate a different property
   instead of bg-position — a registered custom property
   `--shineShift` that the gradient consumes via calc().
   The 5-stop palette extends from -100% to +100% and
   slides via calc(stop + var(--shineShift)). Animation
   targets only --shineShift, which is untouched by author
   !important rules. Cascade fight avoided.

   @property registration is required so the variable's
   <percentage> type interpolates smoothly (without it,
   custom-prop animations would jump discretely between
   keyframe values).

   Math: at shift=0% visible window shows red→gold→red.
   At shift=50% it shows gold→red→gold. At shift=100% it's
   back to red→gold→red — so the 0% → 100% loop is colour-
   identical at boundaries, no teleport.
   ===================================================== */

@property --shineShift {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.title__shine{
  --shineShift: 0%;
  background-image: linear-gradient(
    90deg,
    #cf2424 calc(-100% + var(--shineShift)),
    #f3c66d calc( -50% + var(--shineShift)),
    #cf2424 calc(   0% + var(--shineShift)),
    #f3c66d calc(  50% + var(--shineShift)),
    #cf2424 calc( 100% + var(--shineShift))
  ) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  animation: shineShift 5s linear infinite !important;
}
@keyframes shineShift {
  0%   { --shineShift:   0%; }
  100% { --shineShift: 100%; }
}

/* =====================================================
   v91 — FA bootstrap: kill the EN-then-FA flash on nav

   Bug: navigating to a new page while in FA showed the
   page first in EN with the reveal animation playing,
   then "ticked" to FA when i18n.js applied on
   DOMContentLoaded. Ugly.

   Mechanism:
   1) Inline <head> script on each HTML page reads
      localStorage('lang'). If 'fa', it sets html.dir='rtl'
      and adds class `lang-fa-bootstrap` to <html>
      synchronously BEFORE body parsing. So the layout
      direction is correct from the very first paint.
   2) This rule hides body while the bootstrap class is
      present — the EN text never appears on screen
      because body is invisible during that window.
   3) After i18n applies (DOMContentLoaded), the v91 IIFE
      in app.js removes the bootstrap class, body
      transitions to opacity 1 over .25s. Reveal
      animations then play in FA, cleanly.

   For EN users (no FA in localStorage) the inline script
   does nothing → no bootstrap class → body shows
   immediately, no extra fade. Default behaviour preserved.

   The transition is declared on body unconditionally so
   the class-removal triggers the fade-in. The v79 rule
   `body { opacity: 1 !important }` provides the target;
   we're just animating between 0 (bootstrap) and 1
   (after cleanup).
   ===================================================== */
body {
  transition: opacity .25s var(--ease);
}
html.lang-fa-bootstrap body {
  opacity: 0 !important;
}

/* =====================================================
   v92 — FA bootstrap: belt-and-suspenders

   v91 hid body via opacity:0 + a 250ms fade-in. The user
   reported the EN-then-FA flash still happens on tab nav,
   suggesting either (a) external CSS load races the first
   paint and the v91 opacity rule isn't yet applied when
   body renders, or (b) the body fade-in is itself perceived
   as the EN→FA snap because the eye sees content emerge.

   v92 patches both:

   1) Inline visibility lock — the bootstrap script in
      <head> now sets `documentElement.style.visibility =
      "hidden"` directly (not just adding a class). This is
      an INLINE style: it does not depend on external CSS
      loading. The browser cannot paint anything until the
      inline style is removed. Hard guarantee.

   2) Synchronous cleanup — i18n.js now removes the bootstrap
      class AND the inline style at the end of applyLang(),
      synchronously, before dispatching the i18n:applied
      event. The app.js IIFE listener becomes a redundant
      safety net rather than the primary path; the race
      window between "i18n applied text" and "cleanup
      listener fires" is closed.

   This rule is the CSS half — it backs up the inline style
   with a class-based selector so the protection still
   exists if the inline style somehow doesn't apply.
   ===================================================== */
html.lang-fa-bootstrap {
  visibility: hidden !important;
}

/* =====================================================
   v93 — Store page

   Sections:
   1) Page background (matches home/leaderbord theme)
   2) Hero (image left, copy right; FA mirrors via [dir]
      automatically; gradient brand word + CTA)
   3) "Rank list" heading with animated red→gold→red shine
   4) Ranks grid (5 cards: image, name+EN/FA, duration,
      price, two action buttons)
   5) Notice box (warning gradient, refund/transfer policy)
   6) Modal: square panel, top header (icon + name + meta +
      close), tabs row, scrolling body with two sections
      separated by a divider. Capabilities at top, Kits at
      bottom. Tabs scroll to sections.
   7) Kit grids: 6×5 inventory + 1×7 armor row, hover
      tooltip via data-name + ::after.

   Notes:
   - Animated shine on "Rank list" reuses the rulesShine
     keyframe (palette: red→gold→red).
   - .modal-open body class freezes scroll while modal
     is up (prevents page jumping).
   - Empty kit cells render with an inset shadow so the
     6×5/1×7 grid is visible even when half-empty.
   - Cards are clickable EVERYWHERE except the cart button
     (handled in JS) — entire card opens modal.
   ===================================================== */

/* ---------- 0) Theme tokens (local) ------------------ */
.page--store {
  --store-card-bg:     rgba(20, 22, 28, .55);
  --store-card-border: rgba(255,255,255,.07);
  --store-card-hover:  rgba(255, 211, 120, .35);
  --store-accent:      #f3c66d;     /* gold */
  --store-accent-2:    #cf2424;     /* red  */
  --store-text-dim:    rgba(255,255,255,.62);
  --store-text-mute:   rgba(255,255,255,.42);
}

/* Body bg — match leaderbord (red/amber radial gradient) */
body.page--store {
  background:
    radial-gradient(1200px 900px at 0% 0%,    rgba(207,36,36,.18), transparent 65%),
    radial-gradient(1100px 800px at 100% 30%, rgba(176,138,42,.14), transparent 65%),
    radial-gradient(1000px 700px at 50% 100%, rgba(176,138,42,.10), transparent 60%),
    #0b0c10 !important;
}

/* ---------- 1) Hero ---------------------------------- */
.storeHero {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(420px, 1fr);
  align-items: center;
  gap: 40px;
  padding: 56px 0 40px;
  min-height: 360px;
}
.lang-fa .storeHero {
  /* In RTL, the image naturally lands on the right.
     We want the image on the LEFT visually like the
     screenshot. So we keep the same column order
     by overriding via direction. */
  direction: rtl;
}
.lang-fa .storeHero > * { direction: rtl; }

.storeHero__media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 260px;
}
.storeHero__img {
  width: 100%;
  max-width: 380px;
  height: auto;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.55));
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  animation: storeHeroFloat 5s ease-in-out infinite;
}
@keyframes storeHeroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.storeHero__glow {
  position: absolute; inset: 50% 50% auto auto;
  width: 320px; height: 320px;
  transform: translate(50%, -50%);
  background: radial-gradient(circle, rgba(207,36,36,.28), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
}
.storeHero__copy { min-width: 0; }
.storeHero__title {
  margin: 0 0 16px;
  font-family: 'Russo One', system-ui, sans-serif;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: .4px;
  color: #fff;
}
.storeHero__title > span { display: block; }
.storeHero__brand {
  background-image: linear-gradient(90deg, #cf2424 0%, #f3c66d 50%, #cf2424 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: rulesShine 5s linear infinite;
}
.lang-fa .storeHero__title {
  font-family: 'Lalezar', 'Vazirmatn', system-ui, sans-serif;
  letter-spacing: 0;
}
.storeHero__lead {
  margin: 0 0 18px;
  color: var(--store-text-dim);
  font-size: 15px;
  line-height: 1.7;
  max-width: 580px;
}
.storeHero__pills {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: flex; flex-wrap: wrap; gap: 16px;
}
.storeHero__pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(255,255,255,.78);
}
.storeHero__pillDot {
  width: 8px; height: 8px; border-radius: 99px;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(70,214,126,.18);
}
.storeHero__pill:nth-child(2) .storeHero__pillDot { background: var(--store-accent); box-shadow: 0 0 0 4px rgba(243,198,109,.18); }
.storeHero__pill:nth-child(3) .storeHero__pillDot { background: var(--store-accent-2); box-shadow: 0 0 0 4px rgba(207,36,36,.20); }

.storeHero__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  background: linear-gradient(90deg, #cf2424, #f3c66d);
  color: #1a0f0a;
  font-weight: 700;
  border: 0; border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  box-shadow: 0 12px 28px rgba(207,36,36,.28);
  animation: rulesCtaPulse 2.6s ease-in-out infinite;
  transition: filter .2s, box-shadow .25s;
}
.storeHero__cta svg { width: 18px; height: 18px; }
.storeHero__cta:hover {
  filter: brightness(1.10);
  box-shadow:
    0 18px 40px rgba(207,36,36,.50),
    0 0 0 6px rgba(255,211,120,.10);
  animation-play-state: paused;
}
.lang-fa .storeHero__cta { font-family: 'Vazirmatn', system-ui, sans-serif; }

/* ---------- 2) "Rank list" heading ------------------- */
.ranksHead {
  text-align: center;
  margin: 56px 0 28px;
}
.ranksHead__title {
  margin: 0 0 8px;
  font-family: 'Russo One', system-ui, sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.lang-fa .ranksHead__title {
  font-family: 'Lalezar', 'Vazirmatn', system-ui, sans-serif;
  text-transform: none;
  letter-spacing: 0;
}
.ranksHead__shine {
  background-image: linear-gradient(90deg, #cf2424 0%, #f3c66d 50%, #cf2424 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: rulesShine 5s linear infinite;
  text-shadow: 0 8px 18px rgba(0,0,0,.35);
}
.ranksHead__sub {
  margin: 0;
  color: var(--store-text-mute);
  font-size: 14px;
}

/* ---------- 3) Ranks grid ---------------------------- */
.ranksGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 0 0 48px;
}

.rankCard {
  position: relative;
  cursor: pointer;
  border-radius: 18px;
  background: var(--store-card-bg);
  border: 1px solid var(--store-card-border);
  overflow: hidden;
  transition: transform .35s var(--ease),
              border-color .25s, box-shadow .35s;
}
.rankCard:hover {
  transform: translateY(-4px);
  border-color: var(--store-card-hover);
  box-shadow: 0 24px 48px rgba(0,0,0,.45),
              0 0 0 1px rgba(255,211,120,.08);
}
.rankCard--featured {
  background:
    linear-gradient(180deg, rgba(243,198,109,.10), transparent 50%),
    var(--store-card-bg);
  border-color: rgba(243,198,109,.28);
}

.rankCard__inner {
  display: flex; flex-direction: column;
  padding: 18px 18px 16px;
  gap: 14px;
  height: 100%;
}

/* Image block — 16:11 aspect, with placeholder fallback */
.rankCard__media {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 12px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(243,198,109,.10), transparent 60%),
    rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.05);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.rankCard__img {
  width: 80%; height: 80%;
  object-fit: contain;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.5));
  transition: transform .4s var(--ease);
}
.rankCard:hover .rankCard__img { transform: scale(1.06); }
.rankCard__placeholder {
  position: absolute; inset: 0;
  display: none;
  place-items: center;
  font-family: 'Russo One', system-ui, sans-serif;
  font-size: clamp(24px, 4vw, 38px);
  letter-spacing: 2px;
  color: rgba(255,211,120,.42);
  text-shadow: 0 4px 14px rgba(0,0,0,.6);
}
.rankCard__media--placeholder .rankCard__placeholder { display: grid; }
.rankCard__media--placeholder .rankCard__img { display: none; }

/* Body */
.rankCard__body {
  display: flex; flex-direction: column;
  gap: 10px;
}
.rankCard__nameRow {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
.rankCard__name {
  margin: 0;
  font-family: 'Russo One', system-ui, sans-serif;
  font-size: 20px;
  letter-spacing: .4px;
  color: #fff;
}
/* Show only the matching name per language */
.rankCard__nameFa { display: none; }
.lang-fa .rankCard__nameEn { display: none; }
.lang-fa .rankCard__nameFa { display: inline; }
.lang-fa .rankCard__name {
  font-family: 'Lalezar', 'Vazirmatn', system-ui, sans-serif;
  letter-spacing: 0;
}

.rankCard__duration {
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--store-accent);
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(243,198,109,.10);
  border: 1px solid rgba(243,198,109,.20);
  white-space: nowrap;
}
.lang-fa .rankCard__duration {
  font-family: 'Vazirmatn', system-ui, sans-serif;
  text-transform: none;
}

.rankCard__priceRow {
  display: flex; align-items: baseline; gap: 6px;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 10px;
}
.rankCard__price {
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .3px;
  /* Numbers are the same digits in both langs (Latin) per
     existing convention from leaderbord. */
  direction: ltr;
  unicode-bidi: isolate;
}
.rankCard__currency {
  font-size: 13px;
  color: var(--store-text-dim);
  font-weight: 600;
}

/* Action buttons */
.rankCard__actions {
  display: flex; gap: 8px;
  margin-top: 4px;
}
.rankCard__cart,
.rankCard__details {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
  border: 1px solid transparent;
}
.rankCard__cart svg,
.rankCard__details svg { width: 14px; height: 14px; }

.rankCard__cart {
  background: linear-gradient(90deg, #cf2424, #b02020);
  color: #fff;
  border-color: rgba(207,36,36,.6);
}
.rankCard__cart:hover {
  background: linear-gradient(90deg, #d93030, #cf2424);
  transform: translateY(-1px);
}
.rankCard__cart[data-cart-disabled]:hover { transform: none; }

.rankCard__details {
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.08);
}
.rankCard__details:hover {
  background: rgba(255,211,120,.08);
  color: var(--store-accent);
  border-color: rgba(255,211,120,.25);
}

.lang-fa .rankCard__cart,
.lang-fa .rankCard__details {
  font-family: 'Vazirmatn', system-ui, sans-serif;
}

/* ---------- 4) Notice box ---------------------------- */
.storeNotice {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 26px;
  margin: 0 0 56px;
  border-radius: 16px;
  background:
    linear-gradient(120deg, rgba(207,36,36,.18), rgba(243,198,109,.10) 80%);
  border: 1px solid rgba(243,198,109,.22);
}
.storeNotice__icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(243,198,109,.14);
  display: grid; place-items: center;
  color: var(--store-accent);
}
.storeNotice__icon svg { width: 24px; height: 24px; }
.storeNotice__body { flex: 1; min-width: 0; }
.storeNotice__title {
  margin: 0 0 6px;
  font-family: 'Russo One', system-ui, sans-serif;
  font-size: 16px;
  letter-spacing: .4px;
  color: var(--store-accent);
  text-transform: uppercase;
}
.lang-fa .storeNotice__title {
  font-family: 'Lalezar', 'Vazirmatn', system-ui, sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-size: 18px;
}
.storeNotice__text {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 14px;
  line-height: 1.7;
}

/* ---------- 5) Modal --------------------------------- */
.rankModal {
  position: fixed; inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s var(--ease);
}
.rankModal[hidden] { display: none; }
.rankModal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.rankModal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.rankModal__panel {
  position: relative;
  /* SQUARE-ish: width = height. Cap at smaller axis. */
  width: min(720px, 92vw);
  height: min(720px, 92vh);
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(40,18,18,.85), rgba(15,15,20,.92) 50%);
  border: 1px solid rgba(243,198,109,.20);
  border-radius: 18px;
  box-shadow:
    0 40px 80px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,211,120,.06);
  transform: translateY(12px) scale(.98);
  transition: transform .25s var(--ease);
  overflow: hidden;
}
.rankModal.is-open .rankModal__panel {
  transform: translateY(0) scale(1);
}

/* Top accent bar */
.rankModal__panel::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #cf2424, #f3c66d, #cf2424);
  background-size: 200% 100%;
  animation: rulesShine 5s linear infinite;
}

/* ---- Modal head: icon + name + meta + close --------- */
.rankModal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 18px;
  gap: 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.18);
}
.rankModal__headMain {
  display: flex; align-items: center; gap: 14px;
  min-width: 0; flex: 1;
}
.rankModal__icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 14px;
  background-color: rgba(243,198,109,.10);
  background-position: center;
  background-size: 80%;
  background-repeat: no-repeat;
  border: 1px solid rgba(243,198,109,.20);
}
.rankModal__heading { min-width: 0; }
.rankModal__name {
  margin: 0 0 4px;
  font-family: 'Russo One', system-ui, sans-serif;
  font-size: 24px;
  letter-spacing: .4px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lang-fa .rankModal__name {
  font-family: 'Lalezar', 'Vazirmatn', system-ui, sans-serif;
  letter-spacing: 0;
}
.rankModal__meta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 14px;
  color: var(--store-text-dim);
}
.rankModal__sep { color: rgba(255,255,255,.25); }
.rankModal__duration {
  color: var(--store-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(243,198,109,.10);
  border: 1px solid rgba(243,198,109,.20);
}
.lang-fa .rankModal__duration {
  font-family: 'Vazirmatn', system-ui, sans-serif;
  text-transform: none;
}
.rankModal__priceWrap { display: inline-flex; gap: 4px; align-items: baseline; }
.rankModal__price {
  font-weight: 700; color: #fff;
  font-size: 18px;
  direction: ltr; unicode-bidi: isolate;
}
.rankModal__currency { font-size: 12px; color: var(--store-text-dim); }

.rankModal__close {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.72);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s, color .2s, border-color .2s;
}
.rankModal__close:hover {
  background: rgba(207,36,36,.20);
  color: #fff;
  border-color: rgba(207,36,36,.5);
}
.rankModal__close svg { width: 18px; height: 18px; }

/* ---- Tabs row --------------------------------------- */
.rankModal__tabs {
  display: flex;
  gap: 6px;
  padding: 12px 18px;
  background: rgba(0,0,0,.20);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.rankModal__tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  font-family: 'Russo One', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.56);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.rankModal__tab svg { width: 14px; height: 14px; }
.rankModal__tab:hover {
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.04);
}
.rankModal__tab.is-active {
  color: var(--store-accent);
  background: rgba(243,198,109,.10);
  border-color: rgba(243,198,109,.30);
}
.lang-fa .rankModal__tab {
  font-family: 'Vazirmatn', system-ui, sans-serif;
  text-transform: none;
  letter-spacing: 0;
}

/* ---- Body (scrolls) --------------------------------- */
.rankModal__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
  scroll-behavior: smooth;
}
.rankModal__body::-webkit-scrollbar { width: 8px; }
.rankModal__body::-webkit-scrollbar-track { background: rgba(0,0,0,.2); }
.rankModal__body::-webkit-scrollbar-thumb {
  background: rgba(243,198,109,.2);
  border-radius: 99px;
}
.rankModal__body::-webkit-scrollbar-thumb:hover { background: rgba(243,198,109,.4); }

/* Sections inside body */
.rmSection {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 14px;
}
.rmSection__title {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  font-family: 'Russo One', system-ui, sans-serif;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #fff;
}
.lang-fa .rmSection__title {
  font-family: 'Lalezar', 'Vazirmatn', system-ui, sans-serif;
  text-transform: none; letter-spacing: 0;
  font-size: 18px;
}
.rmSection__bar {
  width: 4px; height: 18px; border-radius: 2px;
  background: linear-gradient(180deg, #cf2424, #f3c66d);
  display: inline-block;
}

/* Capabilities list */
.rmCaps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 16px;
}
.rmCaps__item {
  position: relative;
  padding: 8px 12px 8px 26px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.78);
  line-height: 1.5;
}
.rmCaps__item::before {
  content: "";
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--store-accent);
  box-shadow: 0 0 0 3px rgba(243,198,109,.18);
}
[dir="rtl"] .rmCaps__item { padding: 8px 26px 8px 12px; }
[dir="rtl"] .rmCaps__item::before { left: auto; right: 10px; }
.rmCaps__placeholder {
  font-style: italic;
  color: var(--store-text-mute);
  font-size: 13px;
  padding: 8px 4px;
  list-style: none;
}
.lang-fa .rmCaps__placeholder { font-style: normal; }

/* Divider between sections */
.rmDivider {
  display: flex; align-items: center; gap: 12px;
  margin: 6px 4px 14px;
}
.rmDivider__line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,211,120,.20), transparent);
}
.rmDivider__dot {
  width: 8px; height: 8px; border-radius: 99px;
  background: var(--store-accent);
  box-shadow: 0 0 12px rgba(243,198,109,.5);
}

/* ---- Kit cards inside modal ------------------------- */
.rmKits { display: flex; flex-direction: column; gap: 14px; }
.rmKit {
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 14px 14px 12px;
}
.rmKit__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 0 4px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 14px;
}
.rmKit__name {
  font-family: 'Russo One', system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: .6px;
  color: var(--store-accent);
  text-transform: uppercase;
}
.lang-fa .rmKit__name {
  font-family: 'Vazirmatn', system-ui, sans-serif;
  text-transform: none; letter-spacing: 0;
}
.rmKit__stats {
  display: flex; gap: 14px; flex-wrap: wrap;
}
.rmKit__stat {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--store-text-dim);
}
.rmKit__statLbl { text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.lang-fa .rmKit__statLbl { text-transform: none; letter-spacing: 0; font-family: 'Vazirmatn', system-ui, sans-serif; }
.rmKit__statVal {
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-weight: 700; color: #fff;
  direction: ltr; unicode-bidi: isolate;
}

.rmKit__inv {
  display: flex; flex-direction: column;
  gap: 12px;
  align-items: center;
}

/* Kit grids */
.kitGrid {
  display: grid;
  gap: 6px;
  padding: 8px;
  background: rgba(0,0,0,.40);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 8px;
  /* Force LTR layout so item slots fill left-to-right
     in both EN and FA, matching Rust's inventory UI. */
  direction: ltr;
}
.kitGrid--inv {
  grid-template-columns: repeat(6, 1fr);
  width: 100%;
  max-width: 380px;
}
.kitGrid--armor {
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
  max-width: 440px;
}
.kitCell {
  position: relative;
  aspect-ratio: 1;
  background: rgba(20, 25, 35, .8);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 4px;
  display: grid; place-items: center;
  transition: transform .18s, border-color .2s, box-shadow .2s;
}
.kitCell--has {
  background: rgba(35, 40, 55, .9);
  border-color: rgba(255,255,255,.10);
  cursor: default;
}
.kitCell--has:hover {
  transform: scale(1.12);
  border-color: rgba(243,198,109,.6);
  box-shadow: 0 6px 16px rgba(0,0,0,.5),
              0 0 0 2px rgba(243,198,109,.15);
  z-index: 5;
}
.kitCell__img {
  width: 78%; height: 78%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.kitCell__count {
  position: absolute;
  bottom: 2px; right: 4px;
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.95),
               0 0 4px rgba(0,0,0,.8);
  pointer-events: none;
  letter-spacing: .2px;
  direction: ltr; unicode-bidi: isolate;
}

/* Tooltip on hover via data-name */
.kitCell--has[data-name]:hover::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 5px 10px;
  background: rgba(15, 18, 25, .96);
  border: 1px solid rgba(243,198,109,.30);
  border-radius: 6px;
  font-family: 'Russo One', system-ui, sans-serif;
  font-size: 11px;
  color: #fff;
  letter-spacing: .3px;
  pointer-events: none;
  z-index: 50;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
  animation: kitTipIn .18s var(--ease) forwards;
}
@keyframes kitTipIn {
  from { opacity: 0; transform: translateX(-50%) translateY(2px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Body scroll-lock when modal open */
body.modal-open {
  overflow: hidden;
}

/* ---- Responsive ------------------------------------- */
@media (max-width: 720px) {
  .storeHero {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 40px 0 24px;
  }
  .storeHero__media { min-height: 200px; }
  .storeHero__pills { justify-content: center; }
  .ranksGrid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
  .rankModal__panel {
    width: 96vw; height: 90vh;
  }
  .rankModal__head { padding: 14px 16px 12px; }
  .rankModal__name { font-size: 18px; }
  .rankModal__icon { width: 44px; height: 44px; }
  .rankModal__body { padding: 14px; }
  .rmSection { padding: 14px; }
  .kitGrid { padding: 6px; gap: 4px; }
  .kitCell__count { font-size: 10px; }
}

/* =====================================================
   v94 — Store polish (4 fixes)

   1) FA "Add to cart" wraps — "افزودن به سبد" + icon
      doesn't fit in the half-card width. Tighten button
      padding and shrink icon gap; let nameRow wrap
      gracefully if needed.

   2) "Vip+" renders as "+Vip" in FA because the `+` is
      treated as a neutral character and adopts the
      surrounding RTL direction. Force bidi isolation on
      the rank name span so its content keeps LTR
      structure regardless of language.

   3) Sponsor card has dim media area in placeholder mode;
      give the placeholder text a bit more glow on the
      featured tier.

   4) Modal kit grid was centering inside the kit card;
      align it to the start (left in LTR, right in RTL)
      so the layout reads more like Rust's inventory UI
      (which is left-anchored).
   ===================================================== */

/* 1) Cart/Details button — tighter so they fit FA text */
.rankCard__cart,
.rankCard__details {
  padding: 9px 8px;
  gap: 5px;
  font-size: 12.5px;
  white-space: nowrap;
}
/* In FA, drop the leading-icon gap a hair so text has room */
.lang-fa .rankCard__cart,
.lang-fa .rankCard__details {
  font-size: 13px;
  letter-spacing: 0;
}
.rankCard__cart svg,
.rankCard__details svg {
  width: 13px; height: 13px;
  flex-shrink: 0;
}

/* 2) bidi isolation so "Vip+" stays LTR in FA layout */
.rankCard__nameEn,
.rankCard__nameFa {
  direction: ltr;
  unicode-bidi: isolate;
}

/* 3) Featured tier — brighter placeholder glow */
.rankCard--featured .rankCard__placeholder {
  color: rgba(255,211,120,.65);
  text-shadow:
    0 4px 14px rgba(0,0,0,.6),
    0 0 22px rgba(243,198,109,.3);
}

/* 4) Kit grids — anchor to start instead of centring,
      so the layout reads like Rust's inventory UI */
.rmKit__inv {
  align-items: flex-start;
}
[dir="rtl"] .rmKit__inv {
  align-items: flex-end;
}

/* =====================================================
   v95 — Placeholder text bidi fix
   The "VIP+" placeholder text inside .rankCard__media
   also reverses to "+VIP" in FA for the same reason as
   the rank name. Force LTR isolation on it too.
   ===================================================== */
.rankCard__placeholder {
  direction: ltr;
  unicode-bidi: isolate;
}

/* =====================================================
   v96 — Hero spacing + FA title weight (rules + store)

   1) FA title weight — user changed mind (again, fair).
      Previous v89 reverted to UA h1 bold (700) which
      with Lalezar reads very heavy. The home hero `.title`
      uses Lalezar 400 in FA (line 4234) which is the
      sweet spot. Match that here for `.rulesHero__title`
      and `.storeHero__title`. Drop the .4px letter-spacing
      too — Lalezar doesn't need it.

   2) Hero CTA → main-section spacing — user wants
      roughly half-viewport breathing room between the
      CTA button and the section that opens (rules list /
      ranks list), like the ColdGame reference. Bump the
      bottom margin on the hero (or top of next section)
      so there's a clear "scroll to see more" cue.
   ===================================================== */

/* 1) Lighten + de-letter-space FA hero titles */
.lang-fa .rulesHero__title,
.lang-fa .storeHero__title {
  font-family: 'Lalezar', 'Vazirmatn', system-ui, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
.lang-fa .rulesHero__brand,
.lang-fa .storeHero__brand {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* 2) Half-viewport breathing room after the hero CTA.
      Use min-height on the hero so the section that opens
      below sits roughly at "scroll once" depth, mirroring
      the ColdGame reference. min-height ensures the hero
      occupies the meaningful portion of the screen even
      when copy is short. */
.rulesHero,
.storeHero {
  min-height: 78vh;
  padding-bottom: 40px;
  align-content: center;
}
@media (max-width: 720px) {
  .rulesHero,
  .storeHero {
    min-height: 66vh;
  }
}

/* Pull the section that follows down a touch more so the
   gap between the CTA and the heading reads as deliberate
   space, not accidental margin. */
.rulesHero + .rulesList,
.storeHero + .ranksHead {
  margin-top: 16px;
}

/* =====================================================
   v97 — EN hero layout flip (rules + store)

   User wants:
   - FA: text RIGHT, image LEFT (already correct, since FA
         is RTL and grid auto-mirrors)
   - EN: text LEFT, image RIGHT (current EN has text right,
         image left because the markup put .media first
         and FA dictated the original choice)

   Fix: in EN only, reverse the grid column order via
   `direction: rtl` on the hero (for layout purposes only)
   while keeping individual children LTR for text.

   Cleaner alternative: explicit grid-template-areas so
   the language swap is independent of source order.
   ===================================================== */

/* EN-only: visually swap so image lands on the right */
body:not(.lang-fa) .rulesHero,
body:not(.lang-fa) .storeHero {
  direction: rtl;
}
body:not(.lang-fa) .rulesHero > *,
body:not(.lang-fa) .storeHero > * {
  direction: ltr;
}

/* Pills + CTA inside the copy column should keep LTR
   alignment for icons (they were already LTR but the
   parent direction:rtl above could affect inline flow) */
body:not(.lang-fa) .rulesHero__pills,
body:not(.lang-fa) .storeHero__pills,
body:not(.lang-fa) .rulesHero__cta,
body:not(.lang-fa) .storeHero__cta {
  direction: ltr;
}

/* ===== Cart icon in topbar (added v3) ===== */
.btn--cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  background: rgba(255,255,255,.04);
  transition: background .15s, border-color .15s;
}
.btn--cart:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.20);
  text-decoration: none;
}
.btn--cart svg { width: 16px; height: 16px; }
[data-cart-count] {
  display: none;
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  background: #cf2424;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 99px;
  padding: 1px 6px;
  min-width: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* =====================================================
   v100 — Mobile drawer (rewritten clean, dashboard-style)
   - Slides in from the side (LTR: left, RTL: right)
   - Backdrop overlay behind
   - Sections like dashboard sidebar (Main, Account)
   - Each link has icon + label
   - Closes via close button, backdrop click, ESC, or link click
   ===================================================== */

/* The drawer itself.
   We override [hidden]'s default display:none so the slide animation
   can play. visibility + pointer-events handle accessibility/state.

   All values use !important because the dashboard CSS bundle and some
   legacy responsive rules try to override these — we need max specificity
   to keep the drawer correctly positioned on every page. */
.mobile[hidden]{ display: flex !important; }
.mobile{
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: 280px !important;
  max-width: 86vw !important;
  height: 100vh !important;
  z-index: 1000 !important;
  background: linear-gradient(180deg, rgba(13,11,16,.985), rgba(8,8,12,.99));
  -webkit-backdrop-filter: blur(24px);
          backdrop-filter: blur(24px);
  border-inline-end: 1px solid rgba(255,255,255,.06);
  box-shadow: 12px 0 40px -12px rgba(0,0,0,.75);
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform .28s var(--ease),
    opacity   .22s var(--ease),
    visibility 0s linear .28s;
  display: flex !important;
  flex-direction: column !important;
  padding: 18px 14px 22px !important;
  margin: 0 !important;
  overflow-y: auto;
  font-family: "Inter", system-ui, sans-serif;
}
[dir="rtl"] .mobile{
  left: auto !important;
  right: 0 !important;
  border-inline-end: 0;
  border-inline-start: 1px solid rgba(255,255,255,.06);
  box-shadow: -12px 0 40px -12px rgba(0,0,0,.75);
  transform: translateX(100%);
  font-family: "Vazirmatn", "Inter", system-ui, sans-serif;
  direction: rtl;
}
.mobile:not([hidden]){
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition:
    transform .28s var(--ease),
    opacity   .22s var(--ease),
    visibility 0s;
}
[dir="rtl"] .mobile:not([hidden]){
  transform: translateX(0) !important;
}

/* Header row inside drawer */
.mobile__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mobile__brand{
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .12em;
  color: #fff;
}
.mobile__close{
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.mobile__close:hover{ background: rgba(255,255,255,.08); color: #fff; }
.mobile__close svg{ width: 14px; height: 14px; }

/* Section group label (Main, Account) */
.mobile__group{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  padding: 14px 12px 6px;
}
body.lang-fa .mobile__group{
  letter-spacing: 0;
  text-transform: none;
  font-size: 11px;
}

/* Nav group */
.mobile__nav{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Link */
.mobile__link{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .2px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.mobile__link svg{
  width: 17px; height: 17px;
  flex-shrink: 0;
  color: currentColor;
  opacity: .85;
}
.mobile__link:hover,
.mobile__link:active,
.mobile__link:focus-visible{
  background: rgba(255,255,255,.05);
  color: #fff;
  text-decoration: none;
}
.mobile__link.is-active{
  background:
    linear-gradient(90deg, rgba(207,36,36,.18), rgba(207,36,36,.04));
  color: #fff;
}
[dir="rtl"] .mobile__link{ flex-direction: row-reverse; text-align: right; }

/* Backdrop */
.mobile-backdrop{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  z-index: 999 !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s var(--ease);
}
.mobile-backdrop.is-show{
  opacity: 1;
  pointer-events: auto;
}

/* Lock body scroll when drawer open */
body.is-mobile-open{ overflow: hidden; }

/* ==============================================================
   Homepage feature cards v3 — refined: keeps original layout,
   adds subtle glow + per-card accent color, removes the
   over-the-top title underline and image scaling.

   Behavior changes vs. v2:
   - No title underline (kept titles clean)
   - No image scale on hover (image stays put — user prefers this)
   - Chips removed (rendered nothing — HTML is back to original markup)
   - Cards moved up slightly (less top margin on the section wrapper)
   - Subtle radial glow behind image, animates gently on hover
   - Soft border-glow on hover, NOT a sharp neon line
   ============================================================== */

/* Lift the whole cards section up a touch */
.plaincards.plaincards--tight{
  margin-top: 24px !important;
}

.cards2 .card,
.cards3 .card{
  --accent:      207, 36, 36;       /* default — overridden per-card */
  --accent-warm: 243, 198, 109;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(var(--accent), .07), transparent 55%),
    linear-gradient(180deg, rgba(20,22,30,.88), rgba(12,13,20,.78));
  box-shadow:
    0 10px 28px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.04);
  transition:
    transform .35s cubic-bezier(.2,.7,.3,1),
    border-color .35s ease,
    box-shadow .35s ease;
}

/* Very faint dotted-grid texture (calmer than v2) */
.cards2 .card::before,
.cards3 .card::before{
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events: none;
  opacity: .5;
  z-index: 0;
}

/* Soft accent border-glow that fades in on hover (subtle, not sharp) */
.cards2 .card::after,
.cards3 .card::after{
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(var(--accent), .55),
    rgba(var(--accent-warm), .35) 45%,
    rgba(var(--accent), 0) 75%);
  -webkit-mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 1;
}

.cards2 .card:hover,
.cards3 .card:hover{
  transform: translateY(-4px);
  border-color: rgba(var(--accent), .22);
  box-shadow:
    0 22px 50px rgba(0,0,0,.50),
    0 0 50px rgba(var(--accent), .12),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.cards2 .card:hover::after,
.cards3 .card:hover::after{ opacity: .85; }

/* Image area: ambient glow only — no image transformation on hover */
.cards2 .card .card__media,
.cards3 .card .card__media{
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(70% 80% at 50% 55%, rgba(var(--accent), .18), transparent 70%),
    radial-gradient(45% 45% at 50% 70%, rgba(var(--accent-warm), .10), transparent 70%);
}
/* Pulsing aura behind image (gentle scale + opacity loop) */
.cards2 .card .card__media::after,
.cards3 .card .card__media::after{
  content: "";
  position: absolute;
  width: 65%; height: 65%;
  background: radial-gradient(circle, rgba(var(--accent), .35), transparent 65%);
  filter: blur(28px);
  z-index: -1;
  opacity: .6;
  animation: cardAura 4.5s ease-in-out infinite;
}
.cards2 .card:hover .card__media::after,
.cards3 .card:hover .card__media::after{
  animation-duration: 2.5s;
  opacity: .85;
}
@keyframes cardAura{
  0%, 100%{ transform: scale(.95); opacity: .55; }
  50%    { transform: scale(1.10); opacity: .80; }
}
/* Image: pristine — no scale, just a slight drop-shadow */
.cards2 .card .card__media img,
.cards3 .card .card__media img{
  position: relative;
  z-index: 2;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.5));
  /* No transition / no transform on hover — user wants the image to stay put */
}

/* Body — same padding as before */
.cards2 .card .card__body,
.cards3 .card .card__body{
  position: relative;
  z-index: 2;
  padding: 14px 14px;
  gap: 10px;
}

/* Title — same weight as before, color shifts subtly on hover.
   No underline (per user request — that was the v2 thing they didn't like). */
.cards2 .card .card__title,
.cards3 .card .card__title{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 1000;
  letter-spacing: .5px;
  color: rgba(255,255,255,.95);
  transition: color .35s ease, text-shadow .35s ease;
}
.cards2 .card:hover .card__title,
.cards3 .card:hover .card__title{
  color: rgb(var(--accent-warm));
  text-shadow: 0 0 14px rgba(var(--accent), .35);
}

/* Subtitle */
.cards2 .card .card__sub,
.cards3 .card .card__sub{
  color: rgba(255,255,255,.62);
  font-size: 13px;
  line-height: 1.5;
}

/* Per-card accent colors (gold / red / blurple) */
#leaderboards{
  --accent: 243, 198, 109;       /* warm gold */
  --accent-warm: 255, 226, 150;
}
#store{
  --accent: 207, 36, 36;          /* persiantoxic red */
  --accent-warm: 243, 198, 109;
}
#discordCard{
  --accent: 88, 101, 242;         /* discord blurple */
  --accent-warm: 145, 158, 255;
}

/* Reduced-motion: kill the aura pulse */
@media (prefers-reduced-motion: reduce){
  .cards2 .card .card__media::after,
  .cards3 .card .card__media::after{ animation: none; }
  .cards2 .card,
  .cards3 .card,
  .cards2 .card .card__title,
  .cards3 .card .card__title{ transition: none !important; }
}

/* ===================== Management team — circular testimonials ===================== */
.teamRot{max-width:900px;margin:64px auto 0;display:grid;grid-template-columns:minmax(0,420px) 1fr;
  gap:56px;align-items:center;text-align:start}
@media(max-width:820px){.teamRot{grid-template-columns:1fr;gap:34px;max-width:420px}}

/* Left: stacked photos with 3D perspective */
.teamRot__media{position:relative;width:100%;aspect-ratio:1/1;perspective:1100px}
.teamRot__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:22px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);transition:transform .8s cubic-bezier(.4,2,.3,1),opacity .8s cubic-bezier(.4,2,.3,1);
  transform-origin:center;backface-visibility:hidden}
.teamRot__imgPh{position:absolute;inset:0;display:grid;place-content:center;border-radius:22px;
  font-size:96px;font-weight:800;color:#fff;background:linear-gradient(150deg,rgb(207,36,36),rgb(150,90,30));
  box-shadow:0 18px 50px rgba(0,0,0,.55);transition:transform .8s cubic-bezier(.4,2,.3,1),opacity .8s cubic-bezier(.4,2,.3,1);
  transform-origin:center;backface-visibility:hidden}

/* Right: text content */
.teamRot__content{display:flex;flex-direction:column}
.teamRot__name{margin:0 0 6px;font-size:clamp(24px,3.4vw,30px);font-weight:800;color:#fff;letter-spacing:.4px;line-height:1.1}
.teamRot__role{margin:0 0 22px;display:inline-block;width:fit-content;padding:5px 15px;border-radius:99px;
  font-size:13px;font-weight:700;color:rgb(247,210,130);background:rgba(243,198,109,.13);border:1px solid rgba(243,198,109,.32)}
.teamRot__quote{margin:0;color:rgba(255,255,255,.74);font-size:15px;line-height:2;min-height:120px}
.teamRot__quote .w{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(5px);
  animation:teamWordIn .42s ease forwards}
@keyframes teamWordIn{to{opacity:1;filter:blur(0);transform:translateY(0)}}

.teamRot__nav{display:flex;gap:16px;margin-top:30px}
.teamRot__btn{width:46px;height:46px;border-radius:50%;display:grid;place-content:center;cursor:pointer;
  color:#fff;background:linear-gradient(135deg,rgb(207,36,36),rgb(176,120,40));border:none;
  box-shadow:0 6px 18px rgba(207,36,36,.3);transition:transform .18s ease,box-shadow .25s ease,filter .2s ease}
.teamRot__btn:hover{filter:brightness(1.12);box-shadow:0 8px 24px rgba(243,198,109,.4)}
.teamRot__btn:active{transform:scale(.9)}
.teamRot__btn svg{width:21px;height:21px}
[dir="rtl"] .teamRot{text-align:right}
[dir="rtl"] .teamRot__quote{text-align:right}