/* ==========================================================================
   WOLF MC — webstore
   Design: black void base, violet→magenta "howl" gradient, angular fang-cut
   panels instead of rounded cards. Display face: Unbounded. Body: Plus Jakarta Sans.
   ========================================================================== */

/* Fonts are self-hosted (no request to Google Fonts / any third party) — see assets/fonts/ */
@font-face{ font-family:'Unbounded'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/unbounded-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Unbounded'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/unbounded-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Unbounded'; font-style:normal; font-weight:700; font-display:swap; src:url('assets/fonts/unbounded-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Unbounded'; font-style:normal; font-weight:900; font-display:swap; src:url('assets/fonts/unbounded-latin-900-normal.woff2') format('woff2'); }
@font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('assets/fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:800; font-display:swap; src:url('assets/fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2'); }

:root{
  --bg:#050308;
  --bg-2:#0a0612;
  --surface:#0e0917;
  --surface-2:#150e24;
  --line: rgba(180,150,255,0.14);
  --line-strong: rgba(190,160,255,0.28);

  --purple:#9a3dff;
  --purple-deep:#6a1fd8;
  --pink:#ff3fa0;
  --pink-deep:#ff1f7e;
  --gradient: linear-gradient(120deg, var(--purple) 0%, var(--pink) 100%);
  --gradient-soft: linear-gradient(120deg, rgba(154,61,255,0.18), rgba(255,63,160,0.18));

  --text:#f3eefc;
  --text-dim:#b7a9d1;
  --text-faint:#897ca2; /* lightened from #7c6d97 for WCAG AA contrast (4.5:1+) */

  --owner:#ff3b3b;
  --manager:#ff9736;
  --staffmanager:#3b5bff;
  --admin:#ff3b3b;
  --mod:#ffcc33;
  --helper:#a6ff3b;

  --radius-cut: 18px;
  --ease: cubic-bezier(.22,.9,.3,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Plus Jakarta Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(154,61,255,0.20), transparent 60%),
    radial-gradient(ellipse 800px 600px at 110% 10%, rgba(255,63,160,0.16), transparent 55%),
    radial-gradient(ellipse 700px 500px at 50% 120%, rgba(106,31,216,0.18), transparent 60%);
}

::selection{ background: var(--pink); color:#0a0612; }

a{ color:inherit; text-decoration:none; }
img{max-width:100%;display:block;}

.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; position:relative; z-index:1; }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--purple-deep); border-radius:8px; }

button{ font-family:inherit; cursor:pointer; }

/* Focus visibility */
a:focus-visible, button:focus-visible, select:focus-visible{
  outline:2px solid var(--pink);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------------- Top bar ---------------- */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(5,3,8,0.72);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
  max-width:1180px; margin:0 auto;
  position:relative; z-index:1;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Unbounded', sans-serif;
  font-weight:900; font-size:20px;
  color:#fff;
  background:var(--gradient);
  clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
}
.brand-name{
  font-family:'Unbounded', sans-serif;
  font-weight:700; font-size:17px; letter-spacing:0.3px;
}
.brand-name b{
  background:var(--gradient);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-sub{ font-size:11px; color:var(--text-faint); margin-top:1px; }

nav.top-links{ display:flex; align-items:center; gap:28px; }
nav.top-links a{
  font-size:14px; color:var(--text-dim); font-weight:600;
  transition: color .2s var(--ease);
}
nav.top-links a:hover{ color:var(--text); }

.top-actions{ display:flex; align-items:center; gap:14px; }

.currency-select{
  appearance:none; -webkit-appearance:none;
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--text);
  font-weight:600; font-size:13px;
  padding:9px 32px 9px 12px;
  border-radius:10px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat:no-repeat;
  transition: border-color .2s;
}
.currency-select:hover{ border-color: var(--line-strong); }

.discord-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gradient);
  color:#fff; font-weight:700; font-size:13.5px;
  padding:10px 18px;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: transform .2s var(--ease), filter .2s var(--ease);
}
.discord-btn:hover{ transform:translateY(-2px); filter:brightness(1.1); }

.menu-toggle{ display:none; }

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  padding:110px 0 90px;
  overflow:hidden;
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity:0.35;
  mask-image: radial-gradient(ellipse 700px 450px at 50% 30%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 700px 450px at 50% 30%, black, transparent 75%);
}
.hero-inner{ position:relative; z-index:2; text-align:center; }

.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--text-dim);
  border:1px solid var(--line-strong);
  padding:7px 14px;
  border-radius:100px;
  margin-bottom:28px;
}
.hero-eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background:#3bff8a;
  box-shadow:0 0 8px #3bff8a;
}

.hero h1{
  font-family:'Unbounded', sans-serif;
  font-weight:900;
  font-size:clamp(48px, 9vw, 104px);
  line-height:0.98;
  margin:0 0 22px;
  letter-spacing:-1px;
}
.hero h1 .grad{
  background:var(--gradient);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hero p.lead{
  max-width:560px; margin:0 auto 36px;
  color:var(--text-dim); font-size:17px; line-height:1.6;
}

.ip-box{
  display:inline-flex; align-items:center; gap:0;
  border:1px solid var(--line-strong);
  background:var(--surface);
  border-radius:12px;
  overflow:hidden;
  margin-bottom:44px;
}
.ip-box .label{
  font-size:12px; color:var(--text-faint); font-weight:700;
  letter-spacing:0.4px;
  padding:14px 16px;
  border-right:1px solid var(--line);
}
.ip-box .value{
  font-family:'Unbounded', sans-serif;
  font-weight:600; font-size:16px;
  padding:14px 18px;
  color:var(--text);
}
.ip-box button{
  background:var(--gradient);
  border:none; color:#fff; font-weight:700; font-size:13px;
  padding:14px 20px; height:100%;
  transition:filter .2s;
}
.ip-box button:hover{ filter:brightness(1.12); }

.hero-modes{
  display:flex; justify-content:center; gap:16px; flex-wrap:wrap;
}
.hero-mode-pill{
  font-size:13.5px; font-weight:700;
  color:var(--text-dim);
  border:1px solid var(--line);
  padding:9px 18px;
  border-radius:100px;
  transition: all .2s var(--ease);
}
.hero-mode-pill:hover{ border-color:var(--pink); color:var(--text); }

/* ---------------- Section shell ---------------- */
.section{ padding:100px 0; position:relative; }
.section-head{ margin-bottom:48px; }
.section-tag{
  font-size:12.5px; font-weight:700; color:var(--pink);
  margin-bottom:10px;
  display:flex; align-items:center; gap:8px;
}
.section-tag::before{
  content:""; width:22px; height:2px; background:var(--gradient);
}
.section-head h2{
  font-family:'Unbounded', sans-serif;
  font-weight:700; font-size:clamp(28px,4vw,42px);
  margin:0 0 12px;
  letter-spacing:-0.5px;
}
.section-head p{ color:var(--text-dim); font-size:15.5px; max-width:560px; line-height:1.6; margin:0; }

/* ---------------- Gamemode tabs ---------------- */
.mode-tabs{
  display:flex; gap:10px; margin-bottom:46px; flex-wrap:wrap;
}
.mode-tab{
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--text-dim);
  font-weight:700; font-size:14.5px;
  padding:14px 26px;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  transition: all .25s var(--ease);
}
.mode-tab .count{
  display:block; font-weight:500; font-size:11.5px; color:var(--text-faint); margin-top:2px;
}
.mode-tab.active{
  color:#fff;
  background:var(--gradient-soft);
  border-color:var(--pink);
}
.mode-tab:hover:not(.active){ border-color:var(--line-strong); color:var(--text); }

.mode-panel{ display:none; }
.mode-panel.active{ display:block; animation: fadein .4s var(--ease); }
@keyframes fadein{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

.mode-empty{
  border:1px dashed var(--line-strong);
  padding:52px 30px;
  text-align:center;
  border-radius:16px;
  color:var(--text-dim);
}
.mode-empty h3{ font-family:'Unbounded',sans-serif; color:var(--text); margin:0 0 8px; font-size:20px; }

.subsection-title{
  font-family:'Unbounded', sans-serif;
  font-size:15px; font-weight:600;
  color:var(--text-dim);
  text-transform:uppercase; letter-spacing:1px;
  margin:0 0 20px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}

/* ---------------- Rank cards ---------------- */
.rank-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:22px;
  margin-bottom:56px;
}
.rank-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  padding:30px 26px 26px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
  display:flex; flex-direction:column;
}
.rank-card:hover{ transform:translateY(-6px); border-color:var(--line-strong); }
.rank-card.featured{
  border-color:var(--pink);
  background: linear-gradient(180deg, rgba(255,63,160,0.06), var(--surface) 40%);
}
.rank-card.featured::after{
  content:"MOST POPULAR";
  position:absolute; top:0; right:0;
  font-size:10px; font-weight:800; letter-spacing:0.6px;
  background:var(--gradient); color:#fff;
  padding:6px 12px;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
}
.rank-name{
  font-family:'Unbounded', sans-serif;
  font-size:19px; font-weight:700; margin:0 0 6px;
}
.rank-price{
  font-family:'Unbounded', sans-serif;
  font-size:34px; font-weight:900;
  margin:0 0 4px;
  background:var(--gradient);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rank-price .base-note{
  display:block; font-family:'Plus Jakarta Sans',sans-serif;
  font-size:11px; font-weight:600; color:var(--text-faint);
  -webkit-text-fill-color:var(--text-faint);
}
.rank-perks{
  list-style:none; margin:18px 0 26px; padding:0;
  flex:1;
  display:flex; flex-direction:column; gap:9px;
}
.rank-perks li{
  font-size:13.5px; color:var(--text-dim);
  display:flex; align-items:flex-start; gap:9px;
  line-height:1.4;
}
.rank-perks li svg{ flex-shrink:0; margin-top:3px; }
.rank-perks li b{ color:var(--text); font-weight:600; }

.buy-btn{
  width:100%;
  background:transparent;
  border:1.5px solid var(--line-strong);
  color:var(--text);
  font-weight:700; font-size:14px;
  padding:13px 16px;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: all .25s var(--ease);
}
.buy-btn:hover{ background:var(--gradient); border-color:transparent; color:#fff; }
.rank-card.featured .buy-btn{ background:var(--gradient); border-color:transparent; color:#fff; }
.rank-card.featured .buy-btn:hover{ filter:brightness(1.12); }

/* ---------------- Key / coin grid (compact items) ---------------- */
.item-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:16px;
}
.item-card{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--surface);
  border:1px solid var(--line);
  padding:18px 20px;
  border-radius:14px;
  transition: border-color .2s;
}
.item-card:hover{ border-color:var(--line-strong); }
.item-info h3{ margin:0 0 4px; font-size:14.5px; font-weight:700; }
.item-info span{ font-size:12px; color:var(--text-faint); }
.item-price{
  font-family:'Unbounded', sans-serif;
  font-weight:700; font-size:17px;
  color:var(--text);
  white-space:nowrap;
}
.item-buy{
  background:var(--surface-2);
  border:1px solid var(--line-strong);
  color:var(--text);
  font-size:12.5px; font-weight:700;
  padding:9px 14px;
  border-radius:9px;
  margin-left:10px;
  transition: all .2s;
}
.item-buy:hover{ background:var(--gradient); border-color:transparent; }

.item-card-inner{ display:flex; align-items:center; gap:14px; flex:1; }

/* ---------------- Team ---------------- */
.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:18px;
}
.team-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  padding:24px 20px;
  border-radius:16px;
  overflow:hidden;
}
.team-card::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--role-color, var(--pink));
}
.team-avatar{
  width:52px; height:52px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Unbounded', sans-serif; font-weight:700; font-size:18px;
  color:#050308;
  background:var(--role-color, var(--pink));
  margin-bottom:16px;
}
.team-name{ font-weight:700; font-size:15.5px; margin-bottom:4px; }
.team-role{
  font-size:12px; font-weight:700;
  color:var(--role-color, var(--pink));
  text-transform:uppercase; letter-spacing:0.5px;
}

/* ---------------- Coins/Shards strip ---------------- */
.dual-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
}
@media (max-width:760px){ .dual-grid{ grid-template-columns:1fr; } }

/* ---------------- Currency note ---------------- */
.fx-note{
  margin-top:18px;
  font-size:12px; color:var(--text-faint);
  display:flex; align-items:center; gap:8px;
}

/* ---------------- Footer ---------------- */
footer{
  border-top:1px solid var(--line);
  padding:56px 0 34px;
  margin-top:40px;
}
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:40px; flex-wrap:wrap;
  margin-bottom:40px;
}
.footer-brand p{ color:var(--text-faint); font-size:13.5px; max-width:320px; line-height:1.6; margin-top:10px;}
.footer-cta{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--gradient);
  color:#fff; font-weight:700; font-size:14px;
  padding:13px 22px;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  margin-top:18px;
}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:26px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--text-faint);
  flex-wrap:wrap; gap:10px;
}

/* ---------------- Modal ---------------- */
.modal-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(3,2,7,0.78);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease);
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal-box{
  background:var(--surface-2);
  border:1px solid var(--line-strong);
  max-width:400px; width:100%;
  padding:34px 30px 28px;
  border-radius:20px;
  position:relative;
  transform:translateY(16px) scale(0.97);
  transition:transform .28s var(--ease);
  text-align:center;
}
.modal-overlay.open .modal-box{ transform:translateY(0) scale(1); }
.modal-icon{
  width:56px; height:56px; margin:0 auto 18px;
  border-radius:14px;
  background:var(--gradient);
  display:flex; align-items:center; justify-content:center;
}
.modal-box h3{
  font-family:'Unbounded', sans-serif;
  font-size:19px; margin:0 0 6px;
}
.modal-item{
  font-size:13px; color:var(--pink); font-weight:700; margin-bottom:14px;
}
.modal-box p{ color:var(--text-dim); font-size:14px; line-height:1.6; margin:0 0 24px; }
.modal-actions{ display:flex; flex-direction:column; gap:10px; }
.modal-go{
  background:var(--gradient); color:#fff; border:none;
  font-weight:700; font-size:14.5px;
  padding:14px; border-radius:12px;
}
.modal-close{
  background:transparent; border:1px solid var(--line);
  color:var(--text-dim); font-weight:600; font-size:13.5px;
  padding:12px; border-radius:12px;
}
.modal-close:hover{ color:var(--text); border-color:var(--line-strong); }

/* ---------------- Responsive ---------------- */
@media (max-width:900px){
  nav.top-links{ display:none; }
}
@media (max-width:640px){
  .hero{ padding:80px 0 60px; }
  .ip-box{ flex-direction:column; width:100%; }
  .ip-box .label, .ip-box .value{ border-right:none; border-bottom:1px solid var(--line); width:100%; }
  .ip-box button{ width:100%; padding:14px; }
  .section{ padding:70px 0; }
  .footer-top{ flex-direction:column; }
}

/* ============================================================
   MULTI-PAGE ADDITIONS
   ============================================================ */

/* ---- promo strip ---- */
.promo-strip{
  background:var(--gradient);
  color:#fff;
  text-align:center;
  font-size:13px; font-weight:700;
  padding:9px 16px;
  letter-spacing:0.2px;
}
.promo-strip a{ text-decoration:underline; text-underline-offset:2px; }

/* ---- active nav link ---- */
nav.top-links a.active{
  color:var(--text);
  position:relative;
}
nav.top-links a.active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-19px;
  height:2px; background:var(--gradient);
}

/* ---- hero split (home) ---- */
.hero-split{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px;
  align-items:center; text-align:left;
}
@media (max-width:900px){ .hero-split{ grid-template-columns:1fr; text-align:center; } }
.hero-split .hero-copy h1{ font-size:clamp(42px,7vw,76px); }
.hero-split .hero-copy p.lead{ margin:0 0 30px; }
.hero-split .hero-copy .ip-box{ margin-bottom:28px; }
.hero-cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
@media (max-width:900px){ .hero-cta-row{ justify-content:center; } }
.btn-primary{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gradient); color:#fff; font-weight:700; font-size:14.5px;
  padding:14px 24px;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: transform .2s var(--ease), filter .2s var(--ease);
}
.btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.1); }
.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:1.5px solid var(--line-strong);
  color:var(--text); font-weight:700; font-size:14.5px;
  padding:13px 24px;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: all .2s var(--ease);
}
.btn-ghost:hover{ border-color:var(--pink); background:var(--gradient-soft); }

/* ---- status card ---- */
.status-card{
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:20px;
  padding:26px 26px 22px;
  position:relative;
  overflow:hidden;
}
.status-card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 90% -10%, rgba(255,63,160,0.16), transparent 55%);
  pointer-events:none;
}
.status-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; position:relative; }
.status-head h2{ margin:0; font-family:'Unbounded',sans-serif; font-size:14px; font-weight:700; }
.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700;
  padding:5px 10px; border-radius:100px;
  background:rgba(59,255,138,0.12); color:#3bff8a;
}
.status-pill .dot{ width:6px; height:6px; border-radius:50%; background:#3bff8a; box-shadow:0 0 6px #3bff8a; }
.status-pill.offline{ background:rgba(255,80,80,0.12); color:#ff6060; }
.status-pill.offline .dot{ background:#ff6060; box-shadow:0 0 6px #ff6060; }
.status-pill.loading{ background:rgba(180,150,255,0.12); color:var(--text-dim); }
.status-pill.loading .dot{ background:var(--text-dim); box-shadow:none; }

.status-players{
  font-family:'Unbounded', sans-serif;
  font-size:44px; font-weight:900;
  margin:6px 0 2px;
  position:relative;
}
.status-players span{ font-size:20px; font-weight:600; color:var(--text-faint); }
.status-sub{ font-size:12.5px; color:var(--text-faint); margin-bottom:20px; position:relative; }
.status-bar-track{
  height:6px; border-radius:100px; background:var(--surface-2);
  overflow:hidden; margin-bottom:18px; position:relative;
}
.status-bar-fill{ height:100%; background:var(--gradient); border-radius:100px; width:0%; transition:width .6s var(--ease); }
.status-meta{ display:flex; justify-content:space-between; font-size:12px; color:var(--text-faint); position:relative; }
.status-meta b{ color:var(--text); font-weight:700; }

/* ---- gamemode preview cards ---- */
.gm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .gm-grid{ grid-template-columns:1fr; } }
.gm-card{
  background:var(--surface); border:1px solid var(--line);
  padding:30px 26px; border-radius:20px;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
  display:flex; flex-direction:column; height:100%;
}
.gm-card:hover{ transform:translateY(-6px); border-color:var(--line-strong); }
.gm-icon{
  width:48px; height:48px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; margin-bottom:20px;
  background:var(--gradient-soft); border:1px solid var(--line-strong);
}
.gm-card h3{ font-family:'Unbounded',sans-serif; font-size:19px; margin:0 0 8px; }
.gm-card p{ color:var(--text-dim); font-size:13.5px; line-height:1.6; margin:0 0 22px; flex:1; }
.gm-link{ font-size:13.5px; font-weight:700; display:inline-flex; align-items:center; gap:6px; color:var(--text); }
.gm-link svg{ transition:transform .2s var(--ease); }
.gm-card:hover .gm-link svg{ transform:translateX(4px); }

/* ---- feature grid ---- */
.feat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line); border-radius:18px; overflow:hidden; }
@media (max-width:900px){ .feat-grid{ grid-template-columns:repeat(2,1fr); } }
.feat-item{ background:var(--surface); padding:28px 22px; }
.feat-item .num{ font-family:'Unbounded',sans-serif; font-size:12px; color:var(--pink); font-weight:700; margin-bottom:14px; }
.feat-item h3{ font-size:15px; margin:0 0 8px; font-family:'Unbounded',sans-serif; font-weight:600; }
.feat-item p{ font-size:13px; color:var(--text-dim); line-height:1.6; margin:0; }

/* ---- team preview strip (home) ---- */
.team-strip{ display:flex; align-items:center; gap:0; flex-wrap:wrap; }
.team-strip-avatar{
  width:52px; height:52px; border-radius:12px; overflow:hidden;
  border:2px solid var(--bg); margin-left:-12px;
  box-shadow:0 0 0 2px var(--line-strong);
  transition: transform .2s var(--ease), z-index 0s;
}
.team-strip-avatar:first-child{ margin-left:0; }
.team-strip-avatar:hover{ transform:translateY(-6px) scale(1.08); z-index:5; }
.team-strip-avatar img{ width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }

/* ---- big team page ---- */
.team-grid-big{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.team-card-big{
  background:var(--surface); border:1px solid var(--line);
  border-radius:20px; padding:0; overflow:hidden;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
  position:relative;
}
.team-card-big:hover{ transform:translateY(-5px); border-color:var(--role-color, var(--pink)); }
.team-card-big .head-banner{
  height:72px; background:linear-gradient(160deg, var(--role-color, var(--pink)), transparent 130%);
  opacity:0.35; position:relative;
}
.team-card-big .mc-head{
  width:84px; height:84px; border-radius:16px;
  overflow:hidden;
  image-rendering:pixelated;
  border:3px solid var(--surface);
  background:var(--surface-2);
  position:absolute; left:22px; top:34px;
  box-shadow:0 6px 18px rgba(0,0,0,0.4);
}
.team-card-big .mc-head img{ width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
.team-card-big .body{ padding:52px 22px 24px; }
.team-card-big .tname{ font-weight:700; font-size:16.5px; margin-bottom:6px; }
.team-card-big .trole{
  display:inline-block; font-size:11px; font-weight:800;
  letter-spacing:0.5px; text-transform:uppercase;
  color:var(--role-color, var(--pink));
  background: color-mix(in srgb, var(--role-color, var(--pink)) 14%, transparent);
  padding:4px 10px; border-radius:100px;
  margin-bottom:14px;
}
.team-card-big .tdesc{ font-size:12.5px; color:var(--text-faint); line-height:1.55; margin:0; }

/* ---- store search ---- */
.store-search{
  display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:12px 16px;
  margin-bottom:28px;
  max-width:420px;
}
.store-search svg{ flex-shrink:0; color:var(--text-faint); }
.store-search input{
  background:none; border:none; outline:none;
  color:var(--text); font-family:inherit; font-size:14px; width:100%;
}
.store-search input::placeholder{ color:var(--text-faint); }
[data-searchable].hide{ display:none !important; }

/* ---- FAQ accordion ---- */
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; overflow:hidden;
}
.faq-q{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:20px 22px; cursor:pointer;
  font-weight:700; font-size:15px;
  gap:14px;
  background:none; border:none; font-family:inherit; color:inherit; text-align:left;
}
.faq-q .plus{
  flex-shrink:0; width:26px; height:26px; border-radius:8px;
  background:var(--surface-2); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  transition: transform .25s var(--ease);
  position:relative;
}
.faq-q .plus::before, .faq-q .plus::after{
  content:""; position:absolute; background:var(--text-dim);
}
.faq-q .plus::before{ width:11px; height:1.6px; }
.faq-q .plus::after{ width:1.6px; height:11px; transition:opacity .2s; }
.faq-item.open .plus{ transform:rotate(180deg); }
.faq-item.open .plus::after{ opacity:0; }
.faq-a{
  max-height:0; overflow:hidden;
  transition:max-height .3s var(--ease);
}
.faq-a-inner{ padding:0 22px 20px; color:var(--text-dim); font-size:14px; line-height:1.65; }
.faq-item.open .faq-a{ max-height:400px; }

/* ---- stat strip ---- */
.stat-strip{ display:flex; gap:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.stat-strip > div{ flex:1; padding:22px; text-align:center; border-right:1px solid var(--line); }
.stat-strip > div:last-child{ border-right:none; }
.stat-strip .stat-num{ font-family:'Unbounded',sans-serif; font-weight:800; font-size:26px; background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-strip .stat-label{ font-size:11.5px; color:var(--text-faint); margin-top:4px; font-weight:600; letter-spacing:0.3px; }
@media (max-width:640px){ .stat-strip{ flex-wrap:wrap; } .stat-strip > div{ flex:1 1 50%; border-bottom:1px solid var(--line);} }

/* ---- page hero (inner pages) ---- */
.page-hero{ padding:64px 0 50px; text-align:center; position:relative; }
.page-hero h1{ font-family:'Unbounded',sans-serif; font-weight:800; font-size:clamp(34px,6vw,54px); margin:0 0 14px; letter-spacing:-0.5px; }
.page-hero p{ color:var(--text-dim); max-width:520px; margin:0 auto; font-size:15.5px; line-height:1.6; }

/* ---- toast ---- */
.toast{
  position:fixed; bottom:26px; left:50%; transform:translate(-50%, 20px);
  background:var(--surface-2); border:1px solid var(--line-strong);
  color:var(--text); font-size:13.5px; font-weight:600;
  padding:13px 22px; border-radius:12px;
  opacity:0; pointer-events:none; transition:all .3s var(--ease);
  z-index:200; display:flex; align-items:center; gap:10px;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }
.toast .dot{ width:7px; height:7px; border-radius:50%; background:#3bff8a; }

/* ============================================================
   V2 — logo, theme colors, advanced feature styling
   ============================================================ */

:root{
  --c-lime:#a6ff3b;
  --c-orange:#ff9736;
  --c-blue:#3b82ff;
  --c-yellow:#ffd23b;
  --c-red:#ff4b4b;
  --c-purple:#a63bff;
  --c-golden:#ffcf40;
  --c-shard-pink:#ff5fc4;
}

/* ---- image logo ---- */
.brand-mark-img{
  width:42px; height:42px;
  object-fit:contain;
  filter: drop-shadow(0 2px 10px rgba(154,61,255,0.35));
}
footer .brand-mark-img{ width:40px; height:40px; }

/* ---- gamemode accent badges ---- */
.gm-card{ border-top:3px solid var(--gm-color, var(--line)); }
.gm-icon{ background: color-mix(in srgb, var(--gm-color, var(--purple)) 16%, transparent); border-color: color-mix(in srgb, var(--gm-color, var(--purple)) 45%, transparent); }
.gm-tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800; letter-spacing:0.4px; text-transform:uppercase;
  color: var(--gm-color, var(--pink));
  margin-bottom:14px;
}
.gm-tag::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--gm-color, var(--pink)); box-shadow:0 0 6px var(--gm-color, var(--pink)); }

.page-hero.themed .hero-eyebrow{ border-color: color-mix(in srgb, var(--gm-color, var(--pink)) 55%, transparent); color: var(--gm-color, var(--text-dim)); }
.page-hero.themed h1 .grad{
  background: linear-gradient(120deg, var(--gm-color, var(--purple)), var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---- rank card accent theme ---- */
.rank-card{ border-top:3px solid var(--accent, var(--line)); position:relative; }
.rank-card .rank-price{
  background: linear-gradient(120deg, var(--accent, var(--purple)), var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rank-card.featured{ border-color:var(--line); background:linear-gradient(180deg, color-mix(in srgb, var(--accent, var(--pink)) 8%, transparent), var(--surface) 42%); }
.rank-card.featured::after{ background: linear-gradient(120deg, var(--accent, var(--purple)), var(--pink)); }
.rank-card .buy-btn:hover{ background: linear-gradient(120deg, var(--accent, var(--purple)), var(--pink)); }
.rank-card.featured .buy-btn{ background: linear-gradient(120deg, var(--accent, var(--purple)), var(--pink)); }
.rank-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:800; letter-spacing:0.5px; text-transform:uppercase;
  color: var(--accent, var(--pink));
  background: color-mix(in srgb, var(--accent, var(--pink)) 14%, transparent);
  padding:4px 10px; border-radius:100px;
  margin-bottom:14px;
}

/* rainbow rank (Custom) */
.rank-card.rainbow{ border-image: none; border-top:3px solid transparent; }
.rank-card.rainbow::before{
  content:""; position:absolute; top:-3px; left:0; right:0; height:3px;
  background: linear-gradient(90deg, #ff4b4b, #ff9736, #ffd23b, #a6ff3b, #3bd6ff, #a63bff, #ff5fc4, #ff4b4b);
  background-size: 300% 100%;
  animation: rainbow-slide 4s linear infinite;
}
.rank-card.rainbow .rank-name{
  background: linear-gradient(90deg, #ff4b4b, #ff9736, #ffd23b, #a6ff3b, #3bd6ff, #a63bff, #ff5fc4, #ff4b4b);
  background-size: 300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: rainbow-slide 4s linear infinite;
}
.rank-card.rainbow .rank-price{
  background: linear-gradient(90deg, #ff4b4b, #ff9736, #ffd23b, #a6ff3b, #3bd6ff, #a63bff, #ff5fc4, #ff4b4b);
  background-size: 300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: rainbow-slide 4s linear infinite;
}
.rank-card.rainbow .rank-badge{
  background: linear-gradient(90deg, #ff4b4b, #ff9736, #ffd23b, #a6ff3b, #3bd6ff, #a63bff, #ff5fc4, #ff4b4b);
  background-size:300% 100%; animation: rainbow-slide 4s linear infinite;
  color:#0a0612; -webkit-text-fill-color:#0a0612;
}
.rank-card.rainbow .buy-btn{ background: linear-gradient(90deg, #ff4b4b, #ff9736, #ffd23b, #a6ff3b, #3bd6ff, #a63bff, #ff5fc4, #ff4b4b); background-size:300% 100%; animation: rainbow-slide 4s linear infinite; color:#0a0612; border-color:transparent; }
.rank-card.rainbow .buy-btn:hover{ filter:brightness(1.08); }
@keyframes rainbow-slide{ to{ background-position: 300% 0; } }

/* ---- crate key / coin / shard accent items ---- */
.item-card{ border-left:3px solid var(--accent, var(--line)); }
.item-card .item-dot{
  width:10px; height:10px; border-radius:50%;
  background: var(--accent, var(--pink));
  box-shadow: 0 0 8px var(--accent, var(--pink));
  flex-shrink:0;
}
.item-price{ color: var(--accent, var(--text)); }

/* ---- promo strip countdown ---- */
.promo-strip{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.promo-countdown{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(0,0,0,0.22); padding:3px 10px; border-radius:100px;
  font-family:'Unbounded', sans-serif; font-size:11.5px; font-weight:600; letter-spacing:0.3px;
}

/* ---- scroll reveal ---- */
.reveal{ opacity:0; transform:translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ---- back to top ---- */
.back-to-top{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:46px; height:46px; border-radius:14px;
  background:var(--surface-2); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  color:var(--text); cursor:pointer;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition: all .25s var(--ease);
}
.back-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.back-to-top:hover{ background:var(--gradient); border-color:transparent; }

/* ---- team avatar refinements ---- */
.mc-head img, .team-strip-avatar img{ image-rendering:pixelated; }

/* ---- footer socials note ---- */
.status-card.offline-note{ border-color: rgba(255,80,80,0.3); }

/* ============================================================
   V3 — MOTD widget, particles, cart/checkout, OG polish
   ============================================================ */

@font-face{ font-family:'Press Start 2P'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/press-start-2p-latin-400-normal.woff2') format('woff2'); }

/* ---- brand name coloring: WOLF = gradient, MC = white ---- */
.brand-name .b-wolf, .hero h1 .b-wolf{
  background:var(--gradient);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-name .b-mc, .hero h1 .b-mc{ color:#fff; }

/* ---- MOTD server-preview panel ---- */
.server-motd{
  display:flex; align-items:center; gap:13px;
  background:var(--surface-2);
  border:1px solid var(--line-strong);
  border-radius:12px;
  padding:13px 16px;
  margin-bottom:20px;
  position:relative; z-index:1;
}
.server-motd .motd-icon{
  width:38px; height:38px; border-radius:8px; overflow:hidden; flex-shrink:0;
  background:var(--bg); display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
}
.server-motd .motd-icon img{ width:78%; height:78%; object-fit:contain; }
.server-motd .motd-lines{ font-family:'Press Start 2P', monospace; line-height:2.1; overflow-x:auto; white-space:nowrap; }
.server-motd .motd-line1{ font-size:11px; }
.server-motd .motd-line2{ font-size:9.5px; }
.server-motd .m-wolf{ background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.server-motd .m-mc{ color:#fff; }
.server-motd .m-ver{ color:var(--text-faint); }
.server-motd .m-box{ color:var(--c-lime); }
.server-motd .m-shop{ color:var(--c-orange); }
.server-motd .m-prac{ color:var(--c-blue); }
.server-motd .m-sep{ color:var(--text-faint); }

/* ---- hero particles ---- */
.particles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.particle{
  position:absolute; border-radius:50%;
  background:var(--pink);
  opacity:0.5;
  animation: particle-float linear infinite;
}
@keyframes particle-float{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:0.55; }
  90%{ opacity:0.4; }
  100%{ transform:translateY(-140px) translateX(12px); opacity:0; }
}

/* ---- cart button (topbar) ---- */
.cart-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  background:var(--surface-2);
  border:1px solid var(--line-strong);
  border-radius:10px;
  color:var(--text);
  transition: all .2s var(--ease);
}
.cart-btn:hover{ border-color:var(--pink); }
.cart-badge{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; padding:0 4px;
  border-radius:100px;
  background:var(--gradient);
  color:#fff; font-size:10.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(0.6); transition: all .2s var(--ease);
}
.cart-badge.show{ opacity:1; transform:scale(1); }

/* ---- cart drawer ---- */
.cart-overlay{
  position:fixed; inset:0; z-index:110;
  background:rgba(3,2,7,0.7); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
}
.cart-overlay.open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:111;
  width:min(400px, 92vw);
  background:var(--surface-2);
  border-left:1px solid var(--line-strong);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .32s var(--ease);
}
.cart-overlay.open .cart-drawer{ transform:translateX(0); }
.cart-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 22px 16px; border-bottom:1px solid var(--line);
}
.cart-head h3{ font-family:'Unbounded', sans-serif; font-size:17px; margin:0; }
.cart-close{
  width:34px; height:34px; border-radius:9px;
  background:var(--surface); border:1px solid var(--line);
  color:var(--text-dim); display:flex; align-items:center; justify-content:center;
}
.cart-close:hover{ color:var(--text); border-color:var(--line-strong); }
.cart-items{ flex:1; overflow-y:auto; padding:14px 22px; display:flex; flex-direction:column; gap:12px; }
.cart-empty{ text-align:center; color:var(--text-faint); font-size:13.5px; padding:60px 10px; }
.cart-item{
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:12px 14px;
}
.cart-item-info{ flex:1; min-width:0; }
.cart-item-info h5{ margin:0 0 3px; font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-item-info span{ font-size:12px; color:var(--text-faint); }
.cart-qty{ display:flex; align-items:center; gap:8px; }
.cart-qty button{
  width:24px; height:24px; border-radius:7px;
  background:var(--surface-2); border:1px solid var(--line-strong);
  color:var(--text); font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center;
}
.cart-qty span{ font-size:13px; font-weight:700; min-width:16px; text-align:center; }
.cart-remove{ color:var(--text-faint); font-size:11px; text-decoration:underline; margin-left:6px; }
.cart-remove:hover{ color:var(--pink); }
.cart-foot{ padding:18px 22px 24px; border-top:1px solid var(--line); }
.cart-total-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.cart-total-row span:first-child{ font-size:13px; color:var(--text-dim); font-weight:600; }
.cart-total-row span:last-child{
  font-family:'Unbounded', sans-serif; font-weight:800; font-size:22px;
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cart-checkout{
  width:100%; background:var(--gradient); border:none; color:#fff;
  font-weight:700; font-size:14.5px; padding:14px;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  margin-bottom:10px;
}
.cart-checkout:hover{ filter:brightness(1.1); }
.cart-clear{
  width:100%; background:transparent; border:1px solid var(--line);
  color:var(--text-faint); font-weight:600; font-size:12.5px; padding:10px; border-radius:10px;
}
.cart-clear:hover{ color:var(--text-dim); border-color:var(--line-strong); }
.cart-note{ font-size:11px; color:var(--text-faint); margin-top:12px; line-height:1.5; }

/* ---- card actions row (buy + add to cart) ---- */
.card-actions{ display:flex; gap:8px; }
.card-actions .buy-btn{ flex:1; }
.cart-add{
  flex-shrink:0; width:44px;
  background:transparent; border:1.5px solid var(--line-strong);
  color:var(--text); font-weight:700; font-size:17px;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transition: all .2s var(--ease);
}
.cart-add:hover{ background:var(--surface); border-color:var(--pink); color:var(--pink); }
.rank-card.rainbow .cart-add:hover{ border-color:#ff5fc4; color:#ff5fc4; }
.item-buy-row{ display:flex; align-items:center; gap:8px; margin-left:10px; }
.item-cart-add{
  width:32px; height:32px; flex-shrink:0;
  background:var(--surface-2); border:1px solid var(--line-strong);
  color:var(--text); font-weight:700; border-radius:8px; font-size:15px;
}
.item-cart-add:hover{ border-color:var(--pink); color:var(--pink); }

/* ---- compare table ---- */
.compare-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:16px; margin-bottom:56px; }
table.compare-table{ width:100%; border-collapse:collapse; min-width:560px; font-size:13.5px; }
table.compare-table th, table.compare-table td{ padding:14px 18px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
table.compare-table th{ font-family:'Unbounded',sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:0.4px; color:var(--text-faint); background:var(--surface); }
table.compare-table td:first-child, table.compare-table th:first-child{ position:sticky; left:0; background:var(--surface); font-weight:700; }
table.compare-table tr:last-child td{ border-bottom:none; }
table.compare-table td.yes{ color:var(--c-lime); font-weight:700; }
table.compare-table td.dim{ color:var(--text-faint); }

/* ============================================================
   V4 — dedicated Store hub (Tebex/Hypixel-style layout)
   ============================================================ */

/* ---- store shell: sidebar + content ---- */
.store-shell{ display:grid; grid-template-columns:230px 1fr; gap:36px; align-items:start; }
@media (max-width:900px){ .store-shell{ grid-template-columns:1fr; } }

.store-sidebar{
  position:sticky; top:96px;
  display:flex; flex-direction:column; gap:4px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
}
@media (max-width:900px){
  .store-sidebar{
    position:static;
    flex-direction:row; overflow-x:auto;
    gap:8px; padding:10px;
    -webkit-overflow-scrolling:touch;
  }
  .store-sidebar::-webkit-scrollbar{ display:none; }
}
.store-sidebar a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px;
  border-radius:10px;
  font-size:13.5px; font-weight:700;
  color:var(--text-dim);
  white-space:nowrap;
  border-left:3px solid transparent;
  transition: all .18s var(--ease);
}
.store-sidebar a .cat-count{
  font-size:11px; font-weight:700; color:var(--text-faint);
  background:var(--surface-2); padding:2px 7px; border-radius:100px;
}
.store-sidebar a:hover{ background:var(--surface-2); color:var(--text); }
.store-sidebar a.active{
  background: color-mix(in srgb, var(--cat-color, var(--pink)) 12%, var(--surface-2));
  color:var(--text);
  border-left-color: var(--cat-color, var(--pink));
}
.store-sidebar a.active .cat-count{ background: var(--cat-color, var(--pink)); color:#0a0612; }

.store-main{ min-width:0; }
.store-category{ scroll-margin-top:96px; margin-bottom:58px; }
.store-category:last-child{ margin-bottom:0; }
.store-cat-head{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.store-cat-head .cat-dot{ width:10px; height:10px; border-radius:50%; background:var(--cat-color, var(--pink)); box-shadow:0 0 8px var(--cat-color, var(--pink)); }
.store-cat-head h2{ font-family:'Unbounded', sans-serif; font-size:18px; font-weight:600; margin:0; text-transform:none; letter-spacing:0; }
.store-cat-head .cat-sub{ font-size:12.5px; color:var(--text-faint); margin-left:auto; }

/* ---- store top bar ---- */
.store-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-bottom:30px;
}
.store-topbar .store-search{ margin-bottom:0; flex:1; min-width:220px; }

/* ---- package icon (Tebex-style badge icon on cards) ---- */
.pkg-icon{
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:21px;
  background: color-mix(in srgb, var(--accent, var(--pink)) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--accent, var(--pink)) 40%, transparent);
  margin-bottom:16px;
}
.rank-card.rainbow .pkg-icon{
  background: linear-gradient(120deg, rgba(255,75,75,0.16), rgba(166,59,255,0.16));
  border-color: rgba(255,95,196,0.4);
}

/* ---- mobile category chip nav (visible under 640px instead of full labels) ---- */
@media (max-width:640px){
  .store-sidebar a span.cat-label{ display:inline; }
}

/* ============================================================
   V5 — Store hub (category tiles), per-gamemode store pages,
   breadcrumbs, trust badges, cross-sell
   ============================================================ */

/* ---- breadcrumb ---- */
.breadcrumb{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; color:var(--text-faint);
  margin-bottom:18px;
}
.breadcrumb a{ color:var(--text-dim); }
.breadcrumb a:hover{ color:var(--text); }
.breadcrumb .sep{ opacity:0.5; }
.breadcrumb .current{ color:var(--text); }

/* ---- trust badges row ---- */
.trust-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:var(--line); border-radius:16px; overflow:hidden;
  margin:36px 0 8px;
}
@media (max-width:700px){ .trust-row{ grid-template-columns:1fr; } }
.trust-item{
  background:var(--surface); padding:20px 22px;
  display:flex; align-items:center; gap:14px;
}
.trust-item .trust-icon{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  background:var(--gradient-soft); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.trust-item h5{ margin:0 0 2px; font-size:13.5px; font-weight:700; }
.trust-item p{ margin:0; font-size:11.5px; color:var(--text-faint); line-height:1.4; }

/* ---- store hub category tiles ---- */
.category-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
@media (max-width:760px){ .category-grid{ grid-template-columns:1fr; } }
.category-tile{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  padding:36px 32px;
  overflow:hidden;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
  display:block;
}
.category-tile::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--cat-color, var(--pink)) 22%, transparent), transparent 60%);
  pointer-events:none;
}
.category-tile:hover{ transform:translateY(-6px); border-color: color-mix(in srgb, var(--cat-color, var(--pink)) 50%, var(--line)); }
.category-tile .cat-icon-big{
  width:60px; height:60px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; margin-bottom:22px;
  background: color-mix(in srgb, var(--cat-color, var(--pink)) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--cat-color, var(--pink)) 45%, transparent);
  position:relative;
}
.category-tile h2, .category-tile h3{ font-family:'Unbounded',sans-serif; font-size:23px; margin:0 0 10px; position:relative; font-weight:700; }
.category-tile p{ color:var(--text-dim); font-size:14px; line-height:1.6; margin:0 0 22px; position:relative; max-width:420px; }
.category-tile .cat-meta{ display:flex; align-items:center; gap:16px; font-size:12.5px; color:var(--text-faint); margin-bottom:22px; position:relative; }
.category-tile .cat-meta b{ color:var(--cat-color, var(--text)); }
.category-tile .cat-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700; color:var(--text);
  position:relative;
}
.category-tile .cat-cta svg{ transition:transform .2s var(--ease); }
.category-tile:hover .cat-cta svg{ transform:translateX(5px); }
.category-tile .cat-price-from{
  position:absolute; top:32px; right:32px;
  text-align:right;
}
.category-tile .cat-price-from .from-label{ font-size:10.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.4px; }
.category-tile .cat-price-from .from-price{
  font-family:'Unbounded',sans-serif; font-weight:800; font-size:20px;
  color: var(--cat-color, var(--pink));
}

/* ---- cross-sell ---- */
.crosssell{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px 28px;
  margin-top:60px;
}
.crosssell-text h3{ font-family:'Unbounded',sans-serif; font-size:16px; margin:0 0 6px; }
.crosssell-text p{ margin:0; font-size:13px; color:var(--text-faint); }

/* ============================================================
   V6 — Season Payouts pages
   ============================================================ */

@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('assets/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2'); }

/* ---- season banner ---- */
.season-banner{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:16px;
  padding:20px 24px;
  margin-bottom:40px;
}
.season-banner .season-icon{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  background:var(--gradient-soft); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.season-banner h2{ font-family:'Unbounded',sans-serif; font-size:14px; margin:0 0 4px; }
.season-banner p{ margin:0; font-size:13px; color:var(--text-dim); line-height:1.6; }

/* ---- payout card ---- */
.payout-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-top:3px solid var(--cat-color, var(--pink));
  border-radius:18px;
  padding:30px 28px;
  margin-bottom:24px;
}
.payout-card .payout-title{
  display:flex; align-items:center; gap:10px;
  font-family:'Unbounded', sans-serif; font-weight:700; font-size:15px;
  margin:0 0 24px; color:var(--text);
  text-transform:uppercase; letter-spacing:0.5px;
}
.payout-card .payout-title .leaf{ font-size:19px; }
.payout-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.payout-list li{
  font-size:14.5px; line-height:2; color:var(--text);
  display:flex; align-items:flex-start; gap:9px;
}
.payout-list li::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--cat-color, var(--pink));
  margin-top:10px; flex-shrink:0;
}
.payout-list .rank-label{ font-weight:800; white-space:nowrap; }
.reward-pill{
  display:inline-flex; align-items:center;
  font-family:'JetBrains Mono', monospace; font-size:12.5px; font-weight:700;
  background:var(--surface-2); border:1px solid var(--line-strong);
  color:var(--text); padding:5px 11px; border-radius:8px;
  margin:2px 3px;
}
.reward-plus{ color:var(--text-faint); font-weight:700; margin:0 1px; }

/* ---- payout hub tiles reuse .category-tile but with count label variant ---- */
.category-tile .cat-price-from.season-tag{ text-align:right; }
.category-tile .cat-price-from.season-tag .from-label{ color:var(--text-faint); }
.category-tile .cat-price-from.season-tag .from-price{ font-size:15px; color:var(--cat-color, var(--pink)); }

/* ============================================================
   V7 — Glassmorphism, mobile nav, PWA polish, extra features
   ============================================================ */

/* ---- glassmorphism: translucent blurred surfaces on major cards ---- */
.rank-card, .item-card, .gm-card, .feat-item, .team-card-big, .faq-item,
.category-tile, .payout-card, .status-card, .modal-box, .cart-drawer,
.store-sidebar, .season-banner, .crosssell, .trust-item, .compare-wrap,
.cart-item, .toast, .ip-box, .server-motd, .store-search,
.mobile-nav-panel{
  background: rgba(18, 13, 30, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.28);
}
.topbar{ box-shadow: 0 4px 24px rgba(0,0,0,0.25); }
table.compare-table th, table.compare-table td:first-child, table.compare-table th:first-child{
  background: rgba(14, 9, 23, 0.7);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .rank-card, .item-card, .gm-card, .feat-item, .team-card-big, .faq-item,
  .category-tile, .payout-card, .status-card, .modal-box, .cart-drawer,
  .store-sidebar, .season-banner, .crosssell, .trust-item, .compare-wrap,
  .cart-item, .toast, .ip-box, .server-motd, .store-search, .mobile-nav-panel{
    background: rgba(14, 9, 23, 0.94);
  }
}

/* ---- scroll progress bar ---- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--gradient); z-index:210;
  transition:width .12s linear;
}

/* ---- mobile hamburger + nav panel ---- */
.menu-toggle{
  display:none;
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  background:var(--surface-2); border:1px solid var(--line-strong);
  color:var(--text); align-items:center; justify-content:center;
}
@media (max-width:900px){ .menu-toggle{ display:flex; } }

.mobile-nav-overlay{
  position:fixed; inset:0; z-index:150;
  background:rgba(3,2,7,0.7);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
}
.mobile-nav-overlay.open{ opacity:1; pointer-events:auto; }
.mobile-nav-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:151;
  width:min(300px, 80vw);
  border-left:1px solid var(--line-strong);
  padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px));
  transform:translateX(100%);
  transition:transform .3s var(--ease);
  display:flex; flex-direction:column; gap:5px;
  overflow-y:auto;
}
.mobile-nav-overlay.open .mobile-nav-panel{ transform:translateX(0); }
.mobile-nav-close{
  align-self:flex-end; width:36px; height:36px; border-radius:9px;
  background:var(--surface-2); border:1px solid var(--line);
  color:var(--text-dim); margin-bottom:14px; flex-shrink:0;
}
.mobile-nav-panel a{
  padding:14px 14px; border-radius:11px;
  font-weight:700; font-size:15.5px; color:var(--text-dim);
}
.mobile-nav-panel a.active, .mobile-nav-panel a:hover{ background:var(--surface-2); color:var(--text); }
.mobile-nav-panel a.mnav-discord{
  margin-top:10px; color:#fff; background:var(--gradient); text-align:center;
}
.mobile-nav-panel .mnav-label{
  font-size:11px; font-weight:700; color:var(--text-faint); text-transform:uppercase;
  letter-spacing:0.5px; margin:14px 14px 4px;
}

/* ---- mobile quick-action bar ---- */
.mobile-quickbar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  background: rgba(12, 8, 20, 0.82);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border-top:1px solid var(--line-strong);
  padding:9px 10px calc(9px + env(safe-area-inset-bottom, 0px));
  gap:4px;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.3);
}
@media (max-width:640px){
  .mobile-quickbar{ display:flex; }
  body{ padding-bottom:70px; }
}
.mobile-quickbar a, .mobile-quickbar button.cart-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:10.5px; font-weight:700; color:var(--text-dim);
  padding:6px 4px; border-radius:12px;
  background:none; border:none; width:auto; height:auto;
}
.mobile-quickbar .qb-icon{ font-size:18px; line-height:1; }
.mobile-quickbar a.primary{ background:var(--gradient); color:#fff; }
.mobile-quickbar button.cart-btn .cart-badge{ top:-2px; right:14px; }

/* ---- mobile responsive refinements ---- */
@media (max-width:480px){
  .top-actions{ gap:7px; }
  .currency-select{ padding:8px 24px 8px 9px; font-size:12px; }
  .top-actions .discord-btn{ display:none; } /* reachable via hamburger menu + bottom quick bar instead */
  .brand-sub{ display:none; }
  .brand-name{ font-size:15px; }
  .item-cart-add{ width:38px; height:38px; }
  .cart-add{ width:48px; }
  .section{ padding:56px 0; }
  .wrap{ padding:0 18px; }
  .rank-card, .item-card{ padding-left:20px; padding-right:20px; }
}
@media (max-width:640px){
  .status-players{ font-size:36px; }
  .payout-card{ padding:24px 20px; }
  .payout-list li{ flex-wrap:wrap; }
}

/* ============================================================
   V8 — Full revamp: Discord branding, premium glass, spotlight
   cards, command palette, live badge, micro-interactions
   ============================================================ */

:root{
  --discord-blurple:#5865F2;
  --discord-blurple-hover:#4752C4;
}

/* ---- film-grain texture over the whole page (premium glass feel) ---- */
body::after{
  content:"";
  position:fixed; inset:0; z-index:5; pointer-events:none;
  opacity:0.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- refined glass edges: soft inner highlight on major glass surfaces ---- */
.rank-card, .item-card, .gm-card, .feat-item, .team-card-big, .faq-item,
.category-tile, .payout-card, .status-card, .modal-box, .cart-drawer,
.store-sidebar, .season-banner, .crosssell, .trust-item, .compare-wrap,
.mobile-nav-panel, .cmdk-box{
  box-shadow: 0 8px 30px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ---- Discord button: real Discord branding ---- */
.discord-btn{
  background: var(--discord-blurple);
  display:inline-flex; align-items:center; gap:8px;
}
.discord-btn:hover{ background: var(--discord-blurple-hover); filter:none; }
.discord-btn svg{ flex-shrink:0; }
.footer-cta{
  background: var(--discord-blurple);
  display:inline-flex; align-items:center; gap:9px;
}
.footer-cta:hover{ background: var(--discord-blurple-hover); }
.mobile-nav-panel a.mnav-discord{ background: var(--discord-blurple); display:flex; align-items:center; justify-content:center; gap:8px; }
.mobile-quickbar a[href*="discord"]{ color:#8ea1ff; }

/* ---- cursor-tracked spotlight glow on cards ---- */
.rank-card, .item-card, .gm-card, .payout-card{ position:relative; }
.rank-card::after, .item-card::after, .gm-card::after, .payout-card::after, .category-tile::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.07), transparent 65%);
  opacity:0; transition:opacity .35s var(--ease);
}
.rank-card:hover::after, .item-card:hover::after, .gm-card:hover::after, .payout-card:hover::after, .category-tile:hover::after{ opacity:1; }

/* ---- micro-interactions: tactile press feedback ---- */
.buy-btn:active, .cart-add:active, .item-buy:active, .item-cart-add:active,
.btn-primary:active, .btn-ghost:active, .discord-btn:active, .footer-cta:active,
.cart-checkout:active, .modal-go:active, .copy-ip-btn:active, .cat-cta:active{
  transform: scale(0.96);
}
.buy-btn, .cart-add, .item-buy, .item-cart-add, .btn-primary, .btn-ghost,
.discord-btn, .footer-cta, .cart-checkout, .modal-go, .copy-ip-btn{
  transition: transform .12s var(--ease), background .2s var(--ease), border-color .2s var(--ease), filter .2s var(--ease);
}

/* ---- live player badge (topbar) ---- */
.brand-sub{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.live-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:#665a80; flex-shrink:0; }
.live-dot.on{ background:#3bff8a; box-shadow:0 0 6px #3bff8a; }
#live-count{ color:var(--text-faint); font-size:11px; }

/* ---- command palette trigger + overlay ---- */
.cmdk-trigger{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--surface-2); border:1px solid var(--line-strong); color:var(--text-dim);
  padding:9px 11px; border-radius:10px; font-size:12.5px; font-weight:600;
  flex-shrink:0;
}
.cmdk-trigger:hover{ border-color:var(--pink); color:var(--text); }
.cmdk-trigger kbd{
  background:var(--surface); border:1px solid var(--line-strong); border-radius:5px;
  padding:1px 6px; font-size:10.5px; font-family:inherit; color:var(--text-faint);
}
@media (max-width:760px){ .cmdk-trigger .cmdk-kbd-hint{ display:none; } }

.cmdk-overlay{
  position:fixed; inset:0; z-index:170;
  background:rgba(3,2,7,0.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:12vh 16px 16px;
  opacity:0; pointer-events:none; transition:opacity .2s var(--ease);
}
.cmdk-overlay.open{ opacity:1; pointer-events:auto; }
.cmdk-box{
  width:min(560px, 100%); max-height:66vh; display:flex; flex-direction:column;
  background: rgba(18,13,30,0.78); backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
  border:1px solid var(--line-strong); border-radius:18px; overflow:hidden;
  transform:translateY(-14px); transition:transform .22s var(--ease);
}
.cmdk-overlay.open .cmdk-box{ transform:translateY(0); }
.cmdk-input-row{ display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line); flex-shrink:0; }
.cmdk-input-row svg{ flex-shrink:0; color:var(--text-faint); }
.cmdk-input{ flex:1; background:none; border:none; outline:none; color:var(--text); font-size:15px; font-family:inherit; }
.cmdk-input::placeholder{ color:var(--text-faint); }
.cmdk-esc-hint{ font-size:11px; color:var(--text-faint); border:1px solid var(--line-strong); padding:3px 7px; border-radius:6px; flex-shrink:0; }
.cmdk-list{ flex:1; overflow-y:auto; padding:8px; }
.cmdk-group-label{ font-size:11px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.5px; padding:12px 10px 6px; }
.cmdk-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:10px; cursor:pointer; color:var(--text-dim);
}
.cmdk-item .cmdk-icon{
  width:30px; height:30px; border-radius:8px; flex-shrink:0;
  background:var(--surface-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.cmdk-item.active, .cmdk-item:hover{ background:var(--surface-2); color:var(--text); }
.cmdk-item-hint{ margin-left:auto; font-size:11px; color:var(--text-faint); flex-shrink:0; }
.cmdk-empty{ padding:44px 20px; text-align:center; color:var(--text-faint); font-size:13.5px; }

/* ============================================================
   V9 — Legal pages, data-control panel
   ============================================================ */
.legal-doc{ max-width:760px; margin:0 auto; }
.legal-doc .updated{ font-size:12.5px; color:var(--text-faint); margin-bottom:34px; }
.legal-doc h2{ font-family:'Unbounded',sans-serif; font-size:19px; font-weight:700; margin:40px 0 14px; }
.legal-doc h2:first-of-type{ margin-top:0; }
.legal-doc h3{ font-family:'Unbounded',sans-serif; font-size:14.5px; font-weight:700; margin:22px 0 10px; }
.legal-doc p{ color:var(--text-dim); font-size:14.5px; line-height:1.8; margin:0 0 14px; }
.legal-doc ul{ padding-left:22px; margin:0 0 16px; display:flex; flex-direction:column; gap:7px; }
.legal-doc li{ color:var(--text-dim); font-size:14.5px; line-height:1.7; }
.legal-doc a{ color:var(--pink); text-decoration:underline; text-underline-offset:2px; }
.legal-doc strong{ color:var(--text); }
.legal-placeholder{
  background:rgba(255,180,50,0.07);
  border:1px solid rgba(255,180,50,0.35);
  border-radius:12px;
  padding:14px 16px;
  color:#ffd38a;
  font-size:13px; line-height:1.6;
  margin:14px 0 20px;
}
.legal-placeholder b{ color:#ffe3ad; }
.legal-toc{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; margin-bottom:36px;
}
.legal-toc h2{ margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-faint); }
.legal-toc ol{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:5px; }
.legal-toc a{ font-size:13.5px; color:var(--text-dim); text-decoration:none; }
.legal-toc a:hover{ color:var(--pink); }

.data-control-card{
  background:var(--surface); border:1px solid var(--line-strong); border-radius:16px;
  padding:24px 26px; margin:24px 0 32px;
}
.data-control-card h3{ margin-top:0; }
.data-control-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:12px 0; border-top:1px solid var(--line); }
.data-control-row:first-of-type{ border-top:none; }
.data-control-row .dc-label{ font-size:13.5px; color:var(--text); font-weight:600; }
.data-control-row .dc-sub{ font-size:12px; color:var(--text-faint); margin-top:2px; }
.data-control-btn{
  background:var(--surface-2); border:1px solid var(--line-strong); color:var(--text);
  font-size:12.5px; font-weight:700; padding:9px 16px; border-radius:9px; flex-shrink:0;
}
.data-control-btn:hover{ border-color:var(--pink); color:var(--pink); }
.data-control-btn.danger:hover{ border-color:#ff5a5a; color:#ff8080; }

footer .footer-top{ flex-wrap:wrap; }
footer .footer-col nav{ display:flex; flex-direction:column; gap:12px; }
footer .footer-col nav a{ color:var(--text-dim); font-size:14px; }
footer .footer-col nav a:hover{ color:var(--text); }

/* ============================================================
   V10 — Performance & simplicity pass
   Flat, fast, ChatGPT-style UI: no blur, no particles, no
   continuous animation. Overrides win by cascade order.
   ============================================================ */

/* ---- remove film-grain noise overlay (costly to composite) ---- */
body::after{ content:none; display:none; }

/* ---- flatten all "glass" cards to simple solid surfaces ---- */
.rank-card, .item-card, .gm-card, .feat-item, .team-card-big, .faq-item,
.category-tile, .payout-card, .status-card, .modal-box, .cart-drawer,
.store-sidebar, .season-banner, .crosssell, .trust-item, .compare-wrap,
.cart-item, .toast, .ip-box, .server-motd, .store-search,
.mobile-nav-panel, .cmdk-box{
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
table.compare-table th, table.compare-table td:first-child, table.compare-table th:first-child{
  background: var(--surface);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ---- flat topbar / overlays: no blur ---- */
.topbar{ background: var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:0 1px 0 var(--line); }
.modal-overlay, .cart-overlay, .mobile-nav-overlay, .cmdk-overlay{
  backdrop-filter:none; -webkit-backdrop-filter:none;
  background: rgba(3,2,7,0.78);
}

/* ---- remove cursor spotlight hover glow (continuous pointer tracking) ---- */
.rank-card::after, .item-card::after, .gm-card::after, .payout-card::after, .category-tile::after{
  display:none;
}

/* ---- stop continuous/infinite animations ---- */
.particles{ display:none; } /* hero particle layer fully disabled */
.rank-card.rainbow::before, .rank-card.rainbow .rank-name, .rank-card.rainbow .rank-price,
.rank-card.rainbow .rank-badge, .rank-card.rainbow .buy-btn{
  animation: none;
  background-position: 0 0;
}

/* ---- simpler, calmer hover/transition (snappier, less GPU work) ---- */
.rank-card, .item-card, .gm-card, .category-tile, .team-card-big{
  transition: border-color .15s ease, transform .15s ease;
}
.rank-card:hover, .category-tile:hover{ transform:none; border-color:var(--line-strong); }
.gm-card:hover{ transform:none; }
.team-card-big:hover{ transform:none; }

/* ---- reduced-motion-friendly: scroll reveal becomes an instant, cheap fade ---- */
.reveal{ transition: opacity .2s ease; transform:none; }

/* ============================================================
   V11 — Full simple/flat redesign: ChatGPT-style dark UI
   No gradients, no glow, no angular cuts, no glass. Monochrome
   surfaces with one flat accent colour used sparingly.
   Later in the cascade, so these rules win over earlier ones.
   ============================================================ */

:root{
  /* Monochrome ChatGPT-style surfaces */
  --bg:#212121;
  --bg-2:#171717;
  --surface:#2a2a2a;
  --surface-2:#343434;
  --line: rgba(255,255,255,0.09);
  --line-strong: rgba(255,255,255,0.16);

  --text:#ececec;
  --text-dim:#b4b4b4;
  --text-faint:#8e8ea0;

  /* One flat accent, used sparingly — no gradients anywhere */
  --accent:#8b5cf6;
  --accent-hover:#7c4ded;
  --purple:var(--accent);
  --purple-deep:var(--accent-hover);
  --pink:var(--accent);
  --pink-deep:var(--accent-hover);
  --gradient:var(--accent);
  --gradient-soft: rgba(139,92,246,0.12);
}

/* ---- flat page background, no decorative blobs/grid ---- */
body::before{ content:none; display:none; }
.hero-grid{ display:none; }
.hero::before, .hero::after{ content:none; }

/* ---- typography: clean, calmer weights, one font family ---- */
h1, h2, h3, h4, h5, h6,
.brand-name, .rank-name, .rank-price, .stat-num, .hero h1, .page-hero h1,
.cat-icon-big, .category-tile h2, .category-tile h3, .section-head h2,
.gm-card h3, .team-card-big .tname, .payout-title, .status-head h2,
.server-motd .motd-lines, .modal-box h3, .cart-head h3{
  font-family:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.hero h1{ font-weight:700 !important; letter-spacing:-0.5px; }
.section-head h2, .page-hero h1{ font-weight:700 !important; }
.rank-name, .gm-card h3{ font-weight:700 !important; }

/* ---- flat text colour everywhere gradient text was used ---- */
.brand-name .b-wolf, .hero h1 .b-wolf, .grad,
.rank-price, .rank-card.rainbow .rank-name, .rank-card.rainbow .rank-price,
.rank-card.rainbow .rank-badge, .stat-num, .m-wolf,
.category-tile .from-price{
  background:none !important;
  -webkit-background-clip:unset !important;
  background-clip:unset !important;
  color:var(--text) !important;
  -webkit-text-fill-color:var(--text) !important;
}
.brand-name .b-mc, .hero h1 .b-mc, .m-mc{ color:var(--text) !important; }

/* ---- flat, simple buttons: no angular clip-path, just rounded corners ---- */
.discord-btn, .footer-cta, .rank-card .buy-btn, .buy-btn, .btn-primary, .btn-ghost,
.cart-checkout, .cart-add, .item-cart-add, .ip-box button, .modal-go, .copy-ip-btn,
.footer-cta{
  clip-path:none !important;
  border-radius:10px !important;
}
.discord-btn, .footer-cta{ background:#2f81f7; } /* keep Discord's own blurple, distinct from site accent */
.discord-btn:hover, .footer-cta:hover{ background:#2868c7; }

.btn-primary, .buy-btn:hover, .rank-card.featured .buy-btn, .rank-card.rainbow .buy-btn,
.cart-checkout, .cmdk-trigger:hover{
  background:var(--accent) !important;
  filter:none !important;
}
.btn-primary:hover, .cart-checkout:hover{ background:var(--accent-hover) !important; }
.rank-card.rainbow .buy-btn{ color:#fff !important; }

/* ---- flat cards: simple border, no accent top-border, no icon tint ---- */
.rank-card{ clip-path:none !important; border-radius:14px !important; border-top:1px solid var(--line) !important; }
.rank-card.featured{ background:var(--surface) !important; border-color:var(--accent) !important; }
.rank-card.featured::after{
  clip-path:none !important; border-radius:0 8px 0 10px !important;
  background:var(--accent) !important;
}
.rank-card.rainbow{ border-top:1px solid var(--accent) !important; }
.rank-card.rainbow::before{ animation:none !important; background:var(--accent) !important; }
.rank-badge{ background:var(--surface-2) !important; color:var(--text-dim) !important; }
.item-card{ border-left:1px solid var(--line) !important; }
.item-dot{ background:var(--text-faint) !important; box-shadow:none !important; }
.item-price{ color:var(--text) !important; }

.category-tile{ border-top:none; }
.category-tile::before{ display:none; }
.category-tile .cat-icon-big{ background:var(--surface-2); border-color:var(--line); }
.gm-card{ border-top:1px solid var(--line) !important; }
.gm-icon{ background:var(--surface-2) !important; border-color:var(--line) !important; }
.gm-tag::before{ background:var(--text-faint) !important; box-shadow:none !important; }

/* ---- payout / season banner accents flattened ---- */
.payout-card{ border-top:1px solid var(--line) !important; }
.payout-list li::before{ background:var(--text-faint) !important; }
.store-cat-head .cat-dot{ background:var(--text-faint) !important; box-shadow:none !important; }
.store-sidebar a.active{ background:var(--surface-2) !important; border-left-color:var(--accent) !important; }
.store-sidebar a .cat-count{ background:var(--surface) !important; }
.store-sidebar a.active .cat-count{ background:var(--accent) !important; color:#fff !important; }

/* ---- MOTD widget: monochrome, one accent only ---- */
.server-motd .m-box, .server-motd .m-shop, .server-motd .m-prac{ color:var(--text-dim); }

/* ---- team role colours: no glow, simple left border only ---- */
.team-card-big::before{ box-shadow:none !important; }
.team-avatar, .team-strip-avatar{ box-shadow:none !important; }
.live-dot.on{ box-shadow:none !important; }

/* ---- status widgets: flat ---- */
.status-pill{ background:var(--surface-2) !important; color:var(--text-dim) !important; }
.status-pill .dot{ box-shadow:none !important; }
.status-bar-fill{ background:var(--accent) !important; }

/* ---- hero ip-box / eyebrow: simple flat border, no glow ---- */
.hero-eyebrow{ border-color:var(--line-strong); }
.hero-eyebrow .dot{ box-shadow:none; }

/* ---- links / focus ring use the single accent, not pink ---- */
a:focus-visible, button:focus-visible, select:focus-visible{ outline-color:var(--accent); }
::selection{ background:var(--accent); color:#fff; }
.legal-doc a{ color:var(--accent); }

/* ---- scrollbar, flat ---- */
::-webkit-scrollbar-thumb{ background:var(--surface-2); }

/* ---- skip link (new) ---- */
.skip-link{
  position:fixed; top:-60px; left:12px; z-index:300;
  background:var(--accent); color:#fff; font-weight:700; font-size:13px;
  padding:10px 16px; border-radius:8px; transition:top .15s ease;
}
.skip-link:focus{ top:12px; }

/* ---- recently viewed chips (new feature) ---- */
.recent-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:-10px 0 34px; }
.recent-chips a{
  font-size:12.5px; font-weight:600; color:var(--text-dim);
  background:var(--surface); border:1px solid var(--line);
  padding:7px 13px; border-radius:100px;
}
.recent-chips a:hover{ border-color:var(--accent); color:var(--text); }
.recent-chips .recent-label{ font-size:11px; color:var(--text-faint); align-self:center; margin-right:2px; }