/* ==========================================================================
   WizzRust - Shared design system
   One consolidated stylesheet for every page (index, leaderboard, rules,
   applications, profile, vip, server). Component based, deduplicated.

   Rules of the system:
   - Dark theme: bg #0F0F13, panels #17181D, hairline #2A2B30, gold #FFC943,
     cream #ECE7E1. Fonts: Oswald (headings/labels) + Inter (body).
   - One spacing scale (--space-*). Every section shares the same vertical
     rhythm via .section. Cards, grids and gaps use the tokens.
   - NO box-shadow, NO blur, NO glow. High contrast, flat, professional.
   - No em-dash / en-dash anywhere.
   - Fully responsive incl. mobile hamburger menu.

   Class-name map (old inline -> design system):
     .wrap        -> .container   (both supported)
     section.band -> .section     (plain content section)
     .band                        (NEW: full-bleed section WITH a background
                                    image, e.g. the "Get In The Fight" CTA)
     .main-nav    -> .nav         (both supported)
     .btn-gold    -> .btn--gold   (both supported)
     .btn-ghost   -> .btn--ghost  (both supported)
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* colour */
  --bg:#0F0F13;
  --panel:#17181D;
  --panel-2:#1C1D23;
  --line:#2A2B30;
  --cream:#ECE7E1;
  --muted:#9A9AA2;
  --gold:#FFC943;
  --gold-hover:#E0B53A;
  --ink:#141014;          /* text on gold */
  --ok:#3FBF5F;           /* online dot */

  /* spacing scale */
  --space-1:.5rem;
  --space-2:1rem;
  --space-3:1.5rem;
  --space-4:2rem;
  --space-5:2.5rem;
  --space-6:3rem;
  --space-8:5rem;

  /* layout */
  --max:78rem;

  /* type */
  --font-head:'Oswald',sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--gold);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--gold-hover)}
img{max-width:100%;display:block}
h1,h2,h3,h4{
  font-family:var(--font-head);
  text-transform:uppercase;
  color:var(--cream);
  line-height:1.08;
  font-weight:700;
}
.gold{color:var(--gold)}

/* ---------- Layout primitives ---------- */
.container,
.wrap{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--space-3);
}

/* Plain content section: uniform vertical rhythm on every page */
.section{
  padding-block:clamp(3.5rem,7vw,6rem);
  border-bottom:1px solid var(--line);
}
.section:last-child{border-bottom:none}

/* Section heading block */
.section-head{margin-bottom:var(--space-5)}
.section-head .kicker,
.kicker{
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:.22em;
  font-size:.78rem;color:var(--gold);font-weight:600;margin-bottom:var(--space-1);
}
.section-head h2{font-size:clamp(1.6rem,4vw,2.375rem);letter-spacing:.02em}
.section-head p.lead,
.lead{color:var(--muted);margin-top:.75rem;max-width:40rem}
.section-head p.lead a{font-weight:600}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-head);text-transform:uppercase;font-weight:600;
  letter-spacing:.06em;font-size:.875rem;
  padding:.8125rem 1.5rem;border:1px solid transparent;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn--gold,.btn-gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn--gold:hover,.btn-gold:hover{background:var(--gold-hover);border-color:var(--gold-hover);color:var(--ink)}
.btn--ghost,.btn-ghost{background:transparent;color:var(--cream);border-color:var(--line)}
.btn--ghost:hover,.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn--sm,.btn-sm{padding:.5625rem 1.125rem;font-size:.78rem}
.btn--lg,.btn-lg{padding:1rem 2.125rem;font-size:1rem}

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:66px;gap:var(--space-2);
}
.brand{display:flex;align-items:center;gap:.75rem}
/* Real logo, NEVER boxed: no border, no background, no padding */
.brand-logo{display:flex;align-items:center;flex:none;background:none;border:none;padding:0}
.brand-logo img{height:30px;width:auto;display:block}
.brand-name{
  font-family:var(--font-head);text-transform:uppercase;font-weight:700;
  letter-spacing:.05em;font-size:1.1875rem;color:var(--cream);
}
.nav,
.main-nav{display:flex;align-items:center;gap:var(--space-3)}
.nav a,
.main-nav a{
  font-family:var(--font-head);text-transform:uppercase;font-weight:500;
  letter-spacing:.05em;font-size:.875rem;color:var(--cream);
}
.nav a:hover,.main-nav a:hover,
.nav a.active,.main-nav a.active{color:var(--gold)}
.header-right{display:flex;align-items:center;gap:var(--space-2)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.375rem}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--cream);margin:5px 0;transition:.2s}

/* Mobile menu */
.mobile-menu{
  position:fixed;inset:0;z-index:200;background:var(--bg);
  display:none;flex-direction:column;padding:var(--space-3);
}
.mobile-menu.open{display:flex}
.mobile-menu-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-5)}
.mobile-menu-top .brand{gap:.75rem}
.mobile-menu nav{display:flex;flex-direction:column;gap:.375rem}
.mobile-menu nav a{
  font-family:var(--font-head);text-transform:uppercase;font-weight:600;
  font-size:1.625rem;letter-spacing:.04em;color:var(--cream);padding:.625rem 0;
  border-bottom:1px solid var(--line);
}
.mobile-menu nav a:hover{color:var(--gold)}
.mobile-close{background:none;border:none;color:var(--cream);font-size:1.875rem;cursor:pointer;line-height:1}

/* ==========================================================================
   BAND - full-bleed section with a background image.
   Used by .hero, .page-hero, .profile-hero and the community/CTA .band
   ("Get In The Fight"). The background ALWAYS fills the full height of the
   section: no whitespace under the image on any page. Parallax layers are
   sized with enough overhang that they never reveal a gap while translating.
   ========================================================================== */
.band,
.hero,
.page-hero,
.profile-hero,
.discord-cta{
  position:relative;isolation:isolate;overflow:hidden;
  border-bottom:1px solid var(--line);
}

/* Background layer: absolute image (.band__bg or .parallax) that covers the
   whole band (inset with overhang top/bottom so parallax cannot expose a gap). */
.band__bg,
.band > .parallax,
.hero > .parallax,
.page-hero > .parallax,
.profile-hero > .parallax,
.discord-cta > .parallax{
  position:absolute;left:0;right:0;top:-20%;
  width:100%;height:140%;
  object-fit:cover;
  background-position:center center;background-size:cover;background-repeat:no-repeat;
  z-index:0;will-change:transform;pointer-events:none;
}

/* Default background images per band type (overridable inline) */
.hero > .parallax,
.page-hero > .parallax,
.profile-hero > .parallax{background-image:url('img/background.jpg')}
.discord-cta > .parallax,
.band--pattern > .parallax,
.band--pattern .band__bg{background-image:url('img/pattern.jpg');opacity:.5}

/* Dark scrim so text stays high contrast over the image */
.band__scrim,
.scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(15,15,19,.72) 0%,rgba(15,15,19,.55) 40%,rgba(15,15,19,.92) 100%);
}
.discord-cta .scrim,
.band--cta .band__scrim{background:linear-gradient(180deg,rgba(15,15,19,.9),rgba(15,15,19,.94))}
.profile-hero .scrim{background:linear-gradient(180deg,rgba(15,15,19,.78) 0%,rgba(15,15,19,.7) 50%,rgba(15,15,19,.95) 100%)}

/* Content layer sits above bg + scrim */
.band__inner,
.band .inner,
.hero-content,
.page-hero-content,
.profile-hero .inner,
.discord-cta .inner{position:relative;z-index:2}

/* ---------- Hero ---------- */
.hero-content{text-align:center;padding:clamp(6rem,12vw,8.125rem) var(--space-3) clamp(5.25rem,10vw,7.375rem);max-width:51.25rem;margin-inline:auto}
.hero-content img.hero-mono{height:64px;width:auto;margin:0 auto var(--space-3)}
.hero-content img.hero-word{height:40px;width:auto;margin:0 auto var(--space-4)}
.hero h1{font-size:clamp(2.125rem,6vw,3.75rem);letter-spacing:.02em;margin-bottom:var(--space-3)}
.hero p.sub,
.sub{color:var(--cream);font-size:clamp(.9375rem,2vw,1.125rem);max-width:38.75rem;margin:0 auto var(--space-4);font-family:var(--font-body)}
.hero-btns{display:flex;gap:.875rem;justify-content:center;flex-wrap:wrap}

/* Page hero (leaderboard, rules and any interior header) */
.page-hero-content{text-align:center;padding:clamp(4rem,8vw,5.375rem) var(--space-3);max-width:51.25rem;margin-inline:auto}
.page-hero h1{font-size:clamp(2.125rem,6vw,3.625rem);letter-spacing:.02em;margin-bottom:var(--space-2)}
.page-hero .wiped-note,
.wiped-note{
  display:inline-flex;align-items:center;gap:.5625rem;
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:.12em;
  font-size:.8125rem;color:var(--cream);font-weight:500;
  border:1px solid var(--line);background:rgba(23,24,29,.72);padding:.5rem 1rem;
}
.wiped-note .dot{width:8px;height:8px;background:var(--gold);border-radius:50%;flex:none}

/* CTA band body */
.discord-cta .inner,
.band--cta .band__inner{text-align:center;padding:clamp(4rem,8vw,5.125rem) var(--space-3);max-width:40rem;margin-inline:auto}
.discord-cta h2,
.band--cta h2{font-size:clamp(1.625rem,4vw,2.5rem);letter-spacing:.02em;margin-bottom:var(--space-2)}
.discord-cta p,
.band--cta p{color:var(--cream);margin-bottom:var(--space-4);font-size:1rem}

/* ---------- Generic card / panel ---------- */
.card,
.panel{
  background:var(--panel);border:1px solid var(--line);
  padding:var(--space-4);
}
.panel .p-title{
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:.16em;
  font-size:.78rem;color:var(--muted);font-weight:600;margin-bottom:var(--space-3);
}

/* ---------- Wipe countdown ---------- */
.wipe-banner{
  background:var(--panel);border:1px solid var(--line);
  padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;
}
.wipe-banner .wipe-label{
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;
  font-size:.875rem;color:var(--muted);font-weight:600;
}
.wipe-banner .wipe-label strong{color:var(--cream);display:block;font-size:1.25rem;margin-top:.25rem;letter-spacing:.06em}
.countdown{display:flex;gap:.75rem}
.cd-unit{text-align:center;min-width:64px;background:var(--panel-2);border:1px solid var(--line);padding:.75rem .625rem}
.cd-unit .num{font-family:var(--font-head);font-weight:700;font-size:1.875rem;color:var(--gold);line-height:1}
.cd-unit .lab{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.12em;font-size:.6875rem;color:var(--muted);margin-top:.375rem}
.countdown-fallback{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.08em;font-size:.9375rem;color:var(--gold)}

/* ---------- Upcoming wipes list (local-time tooltip) ---------- */
.upcoming{
  background:var(--panel);border:1px solid var(--line);
  padding:1.125rem var(--space-3);margin-bottom:var(--space-5);
  display:flex;align-items:center;gap:.875rem;flex-wrap:wrap;
}
.upcoming .up-label{
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;
  font-size:.75rem;color:var(--muted);font-weight:600;margin-right:.375rem;
}
.upcoming ul{list-style:none;display:flex;gap:.625rem;flex-wrap:wrap}
.upcoming li{
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:.06em;
  font-size:.78rem;color:var(--cream);border:1px solid var(--line);
  background:var(--panel-2);padding:.375rem .75rem;position:relative;cursor:default;
}
.upcoming li:hover{border-color:var(--gold)}
.up-local{
  display:none;position:absolute;left:0;bottom:calc(100% + 6px);
  white-space:nowrap;background:var(--panel-2);border:1px solid var(--gold);
  color:var(--cream);padding:.375rem .625rem;font-size:.6875rem;letter-spacing:.04em;z-index:5;
}
.upcoming li:hover .up-local,.upcoming li:focus-within .up-local{display:block}

/* ==========================================================================
   Server cards
   Two layouts: the rich clickable card (home) and the compact card (used on
   applications role cards etc). Both share .server-card.
   ========================================================================== */
.server-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(19.375rem,1fr));gap:var(--space-3)}
.server-card{
  background:var(--panel);border:1px solid var(--line);
  padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2);
}
/* clickable variant */
.server-card[data-href],
.server-card.is-link{cursor:pointer;transition:border-color .15s ease,transform .15s ease}
.server-card[data-href]:hover,
.server-card.is-link:hover{border-color:var(--gold)}
.server-card[data-href]:focus-visible{border-color:var(--gold);outline:2px solid var(--gold);outline-offset:2px}
.sc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.875rem}
.server-card h3{font-size:1.1875rem;letter-spacing:.02em;line-height:1.2}
.server-card .sc-tag{
  display:block;margin-top:.375rem;
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:.1em;
  font-size:.72rem;color:var(--gold);font-weight:600;
}
/* compact card top (applications / simple lists) */
.server-card .sc-top{display:flex;flex-direction:column;gap:.375rem}
.server-card .rate{
  display:inline-block;align-self:flex-start;
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:.1em;font-size:.6875rem;
  color:var(--gold);border:1px solid var(--line);padding:.25rem .5625rem;
}
.server-card .wiped{color:var(--muted);font-size:.8125rem;margin-top:.125rem}
.server-card .btn{margin-top:auto}

.region-badge{
  font-family:var(--font-head);text-transform:uppercase;font-weight:700;letter-spacing:.08em;
  font-size:.75rem;color:var(--ink);background:var(--gold);padding:.3125rem .625rem;flex:none;
}
.region-badge.au{background:var(--cream)}

.sc-players{display:flex;flex-direction:column;gap:.4375rem}
.sc-players .sc-count{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-head);letter-spacing:.04em}
.sc-players .sc-count .now{font-weight:700;font-size:1.0625rem;color:var(--cream)}
.sc-players .sc-count .now b{color:var(--gold)}
.sc-players .sc-count .pct{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.sc-bar{height:8px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden}
.sc-bar i{display:block;height:100%;background:var(--gold)}
.sc-meta{display:flex;flex-direction:column;gap:.25rem;font-size:.84rem;color:var(--muted)}
.sc-meta .sc-loc{color:var(--cream)}
.copy-ok{color:var(--gold)}

/* ---------- "Why" feature grid ---------- */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.why-item{background:var(--panel);padding:var(--space-4) var(--space-3)}
.why-item .why-num{font-family:var(--font-head);font-weight:700;font-size:.9375rem;color:var(--gold);letter-spacing:.1em;margin-bottom:.75rem}
.why-item h3{font-size:1.125rem;letter-spacing:.03em;margin-bottom:.5rem}
.why-item p{color:var(--muted);font-size:.9rem}

/* ==========================================================================
   Leaderboard
   ========================================================================== */
/* Compact preview table (home) */
.lb-table{border:1px solid var(--line);background:var(--panel);overflow-x:auto}
.lb-row{
  display:grid;grid-template-columns:70px 1fr auto;align-items:center;
  padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line);gap:var(--space-2);
}
.lb-row:last-child{border-bottom:none}
.lb-row.head{background:var(--panel-2);padding:.8125rem var(--space-3)}
.lb-row.head span{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;color:var(--muted);font-weight:600}
.lb-rank{font-family:var(--font-head);font-weight:700;font-size:1.25rem;color:var(--muted)}
.lb-row:nth-child(2) .lb-rank,.lb-row:nth-child(3) .lb-rank,.lb-row:nth-child(4) .lb-rank{color:var(--gold)}
.lb-name{font-weight:600;color:var(--cream);font-size:.97rem}
.lb-name .tag{color:var(--muted);font-weight:400;font-size:.84rem}
.lb-kills{font-family:var(--font-head);font-weight:700;font-size:1.25rem;color:var(--cream)}
.lb-kills span{font-family:var(--font-body);font-weight:400;font-size:.78rem;color:var(--muted);margin-left:.3125rem}
.lb-cta{margin-top:var(--space-4);text-align:center}

/* Server tabs */
.server-tabs{display:flex;flex-wrap:wrap;gap:.625rem;margin-bottom:var(--space-5)}
.server-tab{
  font-family:var(--font-head);text-transform:uppercase;font-weight:600;
  letter-spacing:.07em;font-size:.8125rem;color:var(--muted);
  background:var(--panel);border:1px solid var(--line);
  padding:.6875rem 1.125rem;cursor:pointer;
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.server-tab:hover{color:var(--cream);border-color:var(--gold)}
.server-tab.active{color:var(--ink);background:var(--gold);border-color:var(--gold)}

/* Controls bar */
.lb-controls{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-3)}
.control-group{display:flex;flex-direction:column;gap:.5rem}
.control-group label{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;font-size:.6875rem;color:var(--muted);font-weight:600}
.lb-select,.lb-search{
  font-family:var(--font-body);font-size:.875rem;color:var(--cream);
  background:var(--panel);border:1px solid var(--line);padding:.6875rem .875rem;
  transition:border-color .15s ease;
}
.lb-select{
  appearance:none;-webkit-appearance:none;cursor:pointer;min-width:11.875rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%239A9AA2' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:2.25rem;
}
.lb-search{min-width:16.25rem}
.lb-select:focus,.lb-search:focus{outline:none;border-color:var(--gold)}
.lb-search::placeholder{color:var(--muted)}

/* Full leaderboard table */
.lb-table-full{border:1px solid var(--line);background:var(--panel);overflow-x:auto}
.lb-grid{width:100%;min-width:47.5rem;border-collapse:collapse}
.lb-grid th{
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:.12em;
  font-size:.72rem;color:var(--muted);font-weight:600;text-align:right;
  background:var(--panel-2);padding:.875rem 1.125rem;border-bottom:1px solid var(--line);white-space:nowrap;
}
.lb-grid th.col-rank,.lb-grid th.col-user{text-align:left}
.lb-grid td{font-size:.9rem;color:var(--cream);text-align:right;padding:.875rem 1.125rem;border-bottom:1px solid var(--line);white-space:nowrap}
.lb-grid tr:last-child td{border-bottom:none}
.lb-grid td.col-rank,.lb-grid td.col-user{text-align:left}
.lb-grid td.col-rank{font-family:var(--font-head);font-weight:700;font-size:1.125rem;color:var(--muted);width:70px}
.lb-grid td.col-user{font-weight:600;color:var(--cream)}
.lb-grid td.col-user .tag{color:var(--muted);font-weight:400;font-size:.8125rem;margin-left:.25rem}
.lb-grid td.col-kills{font-family:var(--font-head);font-weight:700;font-size:1.0625rem}
.lb-grid td.col-kda{color:var(--cream)}
.lb-grid tbody tr:hover td{background:var(--panel-2)}
.lb-grid tr.top td{background:rgba(255,201,67,.05)}
.lb-grid tr.top:hover td{background:rgba(255,201,67,.09)}
.lb-grid tr.top td.col-rank,.lb-grid tr.top td.col-user,.lb-grid tr.top td.col-kills{color:var(--gold)}

/* Pagination */
.lb-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-4)}
.page-size{display:flex;align-items:center;gap:.625rem;flex-wrap:wrap}
.page-size .ps-label{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--muted);font-weight:600}
.page-size .ps-options{display:flex;gap:.375rem}
.ps-btn{
  font-family:var(--font-head);font-weight:600;font-size:.8125rem;
  color:var(--muted);background:var(--panel);border:1px solid var(--line);
  padding:.4375rem .8125rem;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.ps-btn:hover{color:var(--cream);border-color:var(--gold)}
.ps-btn.active{color:var(--ink);background:var(--gold);border-color:var(--gold)}
.page-count{font-size:.84rem;color:var(--muted)}
.page-nums{display:flex;gap:.375rem;flex-wrap:wrap}
.pg-btn{
  font-family:var(--font-head);font-weight:600;font-size:.875rem;min-width:38px;
  color:var(--cream);background:var(--panel);border:1px solid var(--line);
  padding:.5rem .6875rem;cursor:pointer;text-align:center;
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.pg-btn:hover{color:var(--gold);border-color:var(--gold)}
.pg-btn.active{color:var(--ink);background:var(--gold);border-color:var(--gold)}
.pg-btn.dots{border-color:transparent;background:transparent;color:var(--muted);cursor:default;min-width:auto;padding:.5rem .25rem}
.pg-btn.nav{color:var(--muted)}

/* ==========================================================================
   Rules - accordion blocks
   ========================================================================== */
.intro-panel{background:var(--panel);border:1px solid var(--line);padding:var(--space-4)}
.intro-panel p{color:var(--cream);font-size:1rem}
.intro-panel p a{font-weight:600}

.rules-layout{display:grid;grid-template-columns:13.75rem 1fr;gap:var(--space-5);align-items:start}
.rules-toc{position:sticky;top:88px;background:var(--panel);border:1px solid var(--line);padding:1.125rem var(--space-3)}
.rules-toc h3{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;color:var(--muted);font-weight:600;margin-bottom:.875rem}
.rules-toc ul{list-style:none;display:flex;flex-direction:column;gap:.25rem}
.rules-toc a{display:block;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.04em;font-size:.84rem;color:var(--cream);padding:.4375rem 0;border-bottom:1px solid var(--line)}
.rules-toc li:last-child a{border-bottom:none}
.rules-toc a:hover{color:var(--gold)}

.rule-block{margin-bottom:var(--space-3);scroll-margin-top:90px}
.rule-block:last-child{margin-bottom:0}
.rule-accordion,
.rule-details{background:var(--panel);border:1px solid var(--line)}
.rule-summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
  padding:var(--space-3) var(--space-4);
}
.rule-summary::-webkit-details-marker{display:none}
.rule-summary .rs-left{display:flex;align-items:baseline;gap:.875rem;flex-wrap:wrap}
.rule-summary .rs-num{font-family:var(--font-head);font-weight:700;font-size:.9375rem;color:var(--gold);letter-spacing:.1em;flex:none}
.rule-summary h2{font-size:clamp(1.1875rem,2.6vw,1.5rem);letter-spacing:.02em}
.rule-summary .rs-icon{
  flex:none;width:26px;height:26px;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--gold);
  font-family:var(--font-head);font-weight:700;font-size:1.125rem;line-height:1;transition:background .15s ease;
}
.rule-accordion[open] .rs-icon,
.rule-details[open] .rs-icon{background:var(--panel-2)}
.rule-accordion[open] .rs-icon .plus,
.rule-details[open] .rs-icon .plus{display:none}
.rule-summary .rs-icon .minus{display:none}
.rule-accordion[open] .rs-icon .minus,
.rule-details[open] .rs-icon .minus{display:block}
.rule-body{padding:.25rem var(--space-4) var(--space-4);border-top:1px solid var(--line)}
.rule-body > p.block-intro{color:var(--muted);margin:var(--space-3) 0 var(--space-3);max-width:47.5rem}

ul.rule-list{list-style:none;display:flex;flex-direction:column;gap:0}
ul.rule-list > li{position:relative;padding:.875rem 0 .875rem 1.625rem;border-bottom:1px solid var(--line);color:var(--cream);font-size:.9375rem}
ul.rule-list > li:last-child{border-bottom:none}
ul.rule-list > li::before{content:"";position:absolute;left:0;top:22px;width:9px;height:9px;background:var(--gold)}
ul.rule-list > li strong{color:var(--cream);font-weight:600}

.sub-head{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.12em;font-size:.8125rem;color:var(--gold);font-weight:600;margin:var(--space-3) 0 .25rem;padding-top:var(--space-3);border-top:1px solid var(--line)}
.rule-body > .sub-head:first-of-type{border-top:none;padding-top:0;margin-top:var(--space-2)}

.limit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13.75rem,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1.125rem}
.limit-grid .lg-cell{background:var(--panel-2);padding:1.125rem var(--space-3)}
.limit-grid .lg-cell .lg-team{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.08em;font-size:.8125rem;color:var(--gold);font-weight:600;margin-bottom:.375rem}
.limit-grid .lg-cell .lg-val{color:var(--cream);font-size:.9rem}

.pun-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(11.25rem,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1.125rem}
.pun-strip .pun-cell{background:var(--panel-2);padding:1.125rem var(--space-3)}
.pun-strip .pun-cell .pun-n{font-family:var(--font-head);font-weight:700;font-size:1.375rem;color:var(--gold);line-height:1;margin-bottom:.5rem}
.pun-strip .pun-cell .pun-t{color:var(--cream);font-size:.875rem}

.note{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--gold);padding:var(--space-2) var(--space-3);margin-top:var(--space-3);color:var(--cream);font-size:.9rem}

.closing{background:var(--panel);border:1px solid var(--line);padding:var(--space-6) var(--space-4);text-align:center}
.closing h2{font-size:clamp(1.375rem,3.4vw,1.875rem);letter-spacing:.02em;margin-bottom:.875rem}
.closing p{color:var(--cream);max-width:38.75rem;margin:0 auto var(--space-4);font-size:1rem}
.closing .cbtns{display:flex;gap:.875rem;justify-content:center;flex-wrap:wrap}

/* ==========================================================================
   Applications
   ========================================================================== */
.stat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));gap:var(--space-2);margin-bottom:var(--space-5)}
.stat-tile{background:var(--panel);border:1px solid var(--line);padding:var(--space-4) var(--space-3)}
.stat-tile .stat-num{font-family:var(--font-head);font-weight:700;font-size:2.75rem;color:var(--gold);line-height:1}
.stat-tile .stat-lab{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--muted);font-weight:600;margin-top:.625rem}
.login-note{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);
  padding:var(--space-3) var(--space-4);margin-bottom:var(--space-5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;
}
.login-note .ln-text h3{font-size:1.125rem;letter-spacing:.03em;margin-bottom:.375rem}
.login-note .ln-text p{color:var(--muted);font-size:.9rem;max-width:32.5rem}
.role-card .rc-meta{display:flex;align-items:center;gap:.75rem;color:var(--muted);font-size:.8125rem}
.role-card p.rc-desc{color:var(--muted);font-size:.9rem}

/* ==========================================================================
   VIP - perk cards
   ========================================================================== */
.vip-intro{background:var(--panel);border:1px solid var(--line);padding:var(--space-4);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-bottom:.875rem}
.vip-intro p{color:var(--cream);font-size:1rem;max-width:45rem}
.vip-intro .vip-intro-cta{flex:none}

.vip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:var(--space-3)}
.vip-card{background:var(--panel);border:1px solid var(--line);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}
.vip-card .vip-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.vip-card h3{font-size:1.25rem;letter-spacing:.03em}
.vip-card .vip-badge{font-family:var(--font-head);text-transform:uppercase;font-weight:700;letter-spacing:.08em;font-size:.72rem;color:var(--ink);background:var(--gold);padding:.3125rem .625rem;flex:none}
.vip-card .vip-badge.all{background:var(--cream)}

.perk-list{list-style:none;display:flex;flex-direction:column;gap:0}
.perk-list li{display:flex;gap:.75rem;align-items:flex-start;padding:.8125rem 0;border-bottom:1px solid var(--line)}
.perk-list li:last-child{border-bottom:none}
.perk-list li .mark{flex:none;font-family:var(--font-head);font-weight:700;color:var(--gold);font-size:.9375rem;line-height:1.5}
.perk-list li .perk-text{color:var(--cream);font-size:.9375rem}
.perk-list li .perk-text b{font-weight:600;color:var(--cream)}
.perk-list li .perk-text span{display:block;color:var(--muted);font-size:.84rem;margin-top:.125rem}

.vip-note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);padding:var(--space-3) var(--space-4)}
.vip-note .vip-note-label{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.16em;font-size:.75rem;color:var(--gold);font-weight:600;margin-bottom:.5rem}
.vip-note p{color:var(--cream);font-size:.9375rem;max-width:47.5rem}

/* ==========================================================================
   Profile
   ========================================================================== */
.profile-hero .inner{padding:var(--space-6) var(--space-3) var(--space-5)}
.profile-head{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.avatar{
  width:112px;height:112px;border-radius:50%;flex:0 0 auto;
  background:var(--panel-2);border:3px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:700;font-size:2.5rem;color:var(--gold);
  text-transform:uppercase;letter-spacing:.02em;overflow:hidden;
}
.profile-id{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.profile-name-row{display:flex;align-items:center;gap:.875rem;flex-wrap:wrap}
.profile-name-row h1{font-size:clamp(1.875rem,5vw,2.875rem);letter-spacing:.02em}
.rank-badge{font-family:var(--font-head);font-weight:700;font-size:1rem;letter-spacing:.06em;background:var(--gold);color:var(--ink);padding:.375rem .75rem;line-height:1}
.profile-meta{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--muted);font-weight:600}
.profile-meta .gold{color:var(--gold)}
.profile-controls{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-left:auto}

.stats-toggle{display:flex;flex-direction:column;gap:.4375rem}
.stats-toggle .tog-label{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;font-size:.6875rem;color:var(--muted);font-weight:600}
.seg{display:inline-flex;border:1px solid var(--line);background:var(--panel)}
.seg button{font-family:var(--font-head);text-transform:uppercase;font-weight:600;letter-spacing:.08em;font-size:.78rem;color:var(--muted);background:transparent;border:none;padding:.5625rem 1.125rem;cursor:pointer;transition:background .15s ease,color .15s ease}
.seg button.on{background:var(--gold);color:var(--ink)}
.seg button:not(.on):hover{color:var(--cream)}

.server-select{display:flex;flex-direction:column;gap:.4375rem}
.server-select .sel-label{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;font-size:.6875rem;color:var(--muted);font-weight:600}
.server-select select{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.06em;font-size:.8125rem;font-weight:600;color:var(--cream);background:var(--panel);border:1px solid var(--line);padding:.625rem .875rem;cursor:pointer;min-width:13.75rem}
.server-select select:focus{outline:none;border-color:var(--gold)}

/* Stat cards / grid (shared: .stat + .stat-grid) */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11.25rem,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.stat,
.stat-card{background:var(--panel);padding:var(--space-4) var(--space-3);display:flex;flex-direction:column;gap:.625rem}
.stat .stat-lab,
.stat-card .stat-lab{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;color:var(--muted);font-weight:600}
.stat .stat-num,
.stat-card .stat-num{font-family:var(--font-head);font-weight:700;font-size:clamp(2.375rem,5vw,3.25rem);color:var(--gold);line-height:1;letter-spacing:.01em}
.stat .stat-num .suffix,
.stat-card .stat-num .suffix{font-size:.5em;color:var(--cream);margin-left:.125rem}

.srv-table{border:1px solid var(--line);background:var(--panel);overflow-x:auto;margin-top:var(--space-4)}
.srv-row{display:grid;grid-template-columns:1.6fr repeat(4,1fr);align-items:center;padding:.9375rem var(--space-3);border-bottom:1px solid var(--line);gap:var(--space-2);min-width:38.75rem}
.srv-row:last-child{border-bottom:none}
.srv-row.head{background:var(--panel-2);padding:.8125rem var(--space-3)}
.srv-row.head span{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;color:var(--muted);font-weight:600}
.srv-name{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.03em;font-weight:600;font-size:.9375rem;color:var(--cream)}
.srv-val{font-family:var(--font-head);font-weight:700;font-size:1.0625rem;color:var(--cream)}
.srv-val.gold{color:var(--gold)}

.own-note{background:var(--panel);border:1px solid var(--line);padding:var(--space-3) var(--space-4);margin-top:var(--space-5);display:flex;gap:1.125rem;align-items:flex-start}
.own-note .dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--gold);margin-top:.5rem}
.own-note h4{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.06em;font-size:.9375rem;color:var(--cream);margin-bottom:.375rem}
.own-note p{color:var(--muted);font-size:.9rem}
.own-note p a{font-weight:600}

/* ==========================================================================
   Server detail (.server-detail) + player-rate chart
   ========================================================================== */
.server-detail .sv-top,
.sv-top{border-bottom:1px solid var(--line);padding:var(--space-5) 0 var(--space-4)}
.sv-back{margin-bottom:var(--space-3)}
.sv-crumb{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;color:var(--gold);font-weight:600;margin-bottom:.875rem}
.sv-titlebar{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.sv-titlebar h1{font-size:clamp(1.625rem,4.4vw,2.75rem);letter-spacing:.02em}
.sv-badges{display:flex;align-items:center;gap:.875rem;margin-top:var(--space-2);flex-wrap:wrap}
.status{display:inline-flex;align-items:center;gap:.5625rem;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.12em;font-size:.8125rem;color:var(--cream);font-weight:600;border:1px solid var(--line);background:var(--panel);padding:.375rem .75rem}
.status-dot{width:10px;height:10px;background:var(--ok);flex:none;border-radius:50%}
.sv-subtag{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;color:var(--gold);font-weight:600}

.sv-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-3);padding:var(--space-5) 0 var(--space-3)}
.col-4{grid-column:span 4}
.col-6{grid-column:span 6}
.col-8{grid-column:span 8}
.col-12{grid-column:span 12}

.players-big{font-family:var(--font-head);font-weight:700;font-size:2.875rem;line-height:1;color:var(--cream);letter-spacing:.02em}
.players-big b{color:var(--gold)}
.players-big small{font-size:1.375rem;color:var(--muted);font-weight:600}
.players-pct{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--muted);margin:.75rem 0 .625rem}
.players-wiped{font-size:.84rem;color:var(--muted);margin-top:.875rem}

.connect-ip{display:flex;align-items:center;justify-content:space-between;gap:.875rem;flex-wrap:wrap;background:var(--panel-2);border:1px solid var(--line);padding:.875rem 1rem;margin-bottom:var(--space-2)}
.connect-ip code{font-family:var(--font-head);font-size:1.25rem;letter-spacing:.04em;color:var(--cream)}
.connect-note{font-size:.8125rem;color:var(--muted);margin-bottom:var(--space-2)}
.connect-btns{display:flex;gap:.75rem;flex-wrap:wrap}
.connect-unset{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.06em;font-size:1rem;color:var(--gold)}

.chart-wrap{width:100%}
.chart-svg{width:100%;height:auto;display:block}
.chart-note{font-size:.78rem;color:var(--muted);margin-top:.75rem}
.chart-note b{color:var(--cream);font-weight:600}

.wipe-rows{display:flex;flex-direction:column;gap:0}
.wipe-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2);padding:.875rem 0;border-bottom:1px solid var(--line)}
.wipe-row:last-child{border-bottom:none}
.wipe-row .wr-k{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;color:var(--muted);font-weight:600}
.wipe-row .wr-v{font-family:var(--font-head);font-size:1rem;color:var(--cream);letter-spacing:.03em;text-align:right}
.wipe-next{position:relative;cursor:default}
.wipe-next .wr-v{color:var(--gold);border-bottom:1px dashed var(--line)}
.wipe-local{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:6;white-space:nowrap;background:var(--panel-2);border:1px solid var(--gold);color:var(--cream);padding:.375rem .625rem;font-size:.6875rem;letter-spacing:.04em}
.wipe-next:hover .wipe-local,.wipe-next:focus-within .wipe-local{display:block}

.rules-list{list-style:none;display:flex;flex-direction:column;gap:0}
.rules-list li{position:relative;padding:.75rem 0 .75rem 1.625rem;border-bottom:1px solid var(--line);font-size:.9rem;color:var(--cream)}
.rules-list li:last-child{border-bottom:none}
.rules-list li::before{content:"";position:absolute;left:0;top:20px;width:9px;height:9px;background:var(--gold)}
.rules-massraid{margin-top:1.125rem;padding:.875rem 1rem;background:var(--panel-2);border:1px solid var(--line);font-size:.875rem;color:var(--cream)}
.rules-massraid b{display:block;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--gold);font-weight:600;margin-bottom:.375rem}
.rules-link{margin-top:1.125rem}

.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.spec-tile{background:var(--panel);padding:var(--space-3)}
.spec-tile .st-k{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--muted);font-weight:600;margin-bottom:.5rem}
.spec-tile .st-v{font-family:var(--font-head);font-size:1.1875rem;color:var(--cream);letter-spacing:.02em}

.sv-footcta{padding:.5rem 0}
.sv-footcta .btn{margin-right:.75rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg);position:relative;overflow:hidden}
.footer-watermark{position:absolute;right:-40px;bottom:-40px;z-index:0;opacity:.06;width:340px;pointer-events:none}
.footer-inner{position:relative;z-index:1;padding:var(--space-6) var(--space-3) var(--space-4)}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-4)}
.footer-brand img{height:26px;width:auto}
.footer-brand p{color:var(--muted);font-size:.875rem;margin-top:.875rem;max-width:18.75rem}
.footer-nav{display:flex;gap:var(--space-3);flex-wrap:wrap}
.footer-nav a{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.05em;font-size:.875rem;color:var(--cream)}
.footer-nav a:hover{color:var(--gold)}
.footer-bottom{border-top:1px solid var(--line);padding-top:var(--space-3);display:flex;justify-content:space-between;gap:var(--space-2);flex-wrap:wrap}
.footer-bottom span{color:var(--muted);font-size:.8125rem}
.footer-bottom .credit{color:var(--muted)}

/* ---------- Scroll reveal + parallax ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:960px){
  .rules-layout{grid-template-columns:1fr}
  .rules-toc{position:static;top:auto}
  .rules-toc ul{flex-direction:row;flex-wrap:wrap}
  .rules-toc a{border-bottom:none;border:1px solid var(--line);padding:.5rem .75rem}
}
@media (max-width:860px){
  .nav,.main-nav,.header-right .btn{display:none}
  .nav-toggle{display:block}
  .wipe-banner{flex-direction:column;align-items:flex-start}
  .lb-controls{flex-direction:column;align-items:stretch}
  .control-group{width:100%}
  .lb-select,.lb-search{width:100%}
  .vip-intro,.login-note{flex-direction:column;align-items:flex-start}
  .profile-controls{margin-left:0;width:100%}
  .col-4,.col-6,.col-8{grid-column:span 12}
  .spec-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  /* parallax off on small screens: bg still covers full band height */
  .parallax{transform:none !important}
  .lb-row{grid-template-columns:48px 1fr auto;padding:.875rem 1rem}
  .lb-pagination{flex-direction:column;align-items:flex-start}
  .profile-head{gap:1.125rem}
  .avatar{width:88px;height:88px;font-size:2rem}
  .players-big{font-size:2.375rem}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .parallax{transform:none !important}
  html{scroll-behavior:auto}
}