@font-face {
  font-family: 'Oxanium';
  src: url('/static/fonts/Oxanium.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sora';
  src: url('/static/fonts/Sora.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/Inter.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chakra Petch';
  src: url('/static/fonts/ChakraPetch-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chakra Petch';
  src: url('/static/fonts/ChakraPetch-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─────────────────────────────────────────────────────────────
   shared.css — CS2FREEFORALL · global header / footer / overlays
   Bold competitive tactical-HUD redesign.
   Namespaced under .cx- (cross-page) so it doesn't clash with the
   page-local .ix- rules. All IDs / classes / hooks used by
   shared.js are preserved. Page styles (.lb-*, .cx-sponsor*) kept.
   ───────────────────────────────────────────────────────────── */

:root{
  --cx-orange:#ff7a1a;
  --cx-orange-2:#ff8a3a;
  --cx-orange-3:#e85d00;
  --cx-magenta:#c56bff;
  --cx-purple:#a15cff;
  --cx-cyan:#a15cff;
  --cx-amber:#ffb020;
  --cx-bg:#05060c;
  --cx-bg-2:#0a0c15;
  --cx-line:rgba(255,255,255,.07);
  --cx-line-2:rgba(255,255,255,.12);
  --cx-text:#eef0f5;
  --cx-muted:#a8acb6;
  --cx-muted-2:#6c6f78;
  --cx-grad:linear-gradient(120deg,var(--cx-orange) 0%,var(--cx-magenta) 58%,var(--cx-purple) 100%);
  --cx-grad-soft:linear-gradient(120deg,rgba(255,122,26,.22),rgba(161,92,255,.18));
  --cx-ring:0 0 0 1px rgba(255,255,255,.07);
  --cx-display:'Oxanium','Chakra Petch',system-ui,sans-serif;
  --cx-body:'Sora','Inter',system-ui,-apple-system,sans-serif;
  /* tactical corner clip used across HUD elements */
  --cx-clip:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  --cx-side-w:252px;
}

html,body{min-height:100vh}
body{display:flex;flex-direction:column;min-height:100vh;background:var(--cx-bg)}

::selection{background:rgba(255,122,26,.32);color:#fff}

/* ─────────────────────────── LEFT SIDEBAR NAV ─────────────────────────── */
.cx-container{
  max-width:1480px;margin:0 auto;padding:0 clamp(16px,2vw,32px);
  position:relative;z-index:1;
}

/* Desktop: fixed sidebar + content offset */
@media (min-width:1101px){
  body{padding-left:var(--cx-side-w)}
}

/* Top-right auth bar (desktop: floating cluster; mobile: full bar) */
.cx-topbar{
  position:absolute;top:16px;right:24px;left:auto;z-index:170;
  display:flex;align-items:center;gap:12px;pointer-events:none;
}
.cx-topbar > *{pointer-events:auto}
.cx-topbar .cx-menu-toggle,
.cx-topbar .cx-logo,
.cx-topbar .cx-players-pill--bar{display:none}
.cx-topbar-right{display:flex;align-items:center;gap:12px}

.cx-header{
  position:fixed;top:0;left:0;bottom:0;width:var(--cx-side-w);z-index:200;
  display:flex;flex-direction:column;gap:14px;
  padding:22px 15px 18px;
  background:
    radial-gradient(130% 55% at 0% 0%, rgba(255,122,26,.12), transparent 55%),
    radial-gradient(120% 40% at 0% 100%, rgba(161,92,255,.07), transparent 60%),
    linear-gradient(180deg, rgba(13,15,24,.97), rgba(6,7,13,.99));
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow:24px 0 60px rgba(0,0,0,.45);
  overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.12) transparent;
}
.cx-header::-webkit-scrollbar{width:6px}
.cx-header::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:6px}
.cx-header::after{
  content:"";position:absolute;top:0;bottom:0;right:0;width:1px;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--cx-orange) 24%,var(--cx-cyan) 62%,transparent);
  opacity:.55;
}
.cx-side-glow{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:34px 34px,34px 34px;
  mask-image:linear-gradient(180deg,#000,transparent 78%);opacity:.6;
}
.cx-header > *{position:relative;z-index:1}

/* LOGO */
.cx-logo{
  display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0;
  font-family:var(--cx-display);font-weight:800;letter-spacing:.05em;color:#fff;
  padding:2px 6px;transition:filter .18s ease,transform .18s ease;
}
.cx-logo:hover{filter:brightness(1.12)}
.cx-logo-icon{
  width:46px;height:46px;flex-shrink:0;position:relative;
  display:grid;place-items:center;overflow:hidden;border-radius:13px;clip-path:var(--cx-clip);
  background:
    radial-gradient(circle at 40% 25%, rgba(255,255,255,.18), transparent 42%),
    linear-gradient(135deg, rgba(255,122,26,.32), rgba(161,92,255,.14)),#101018;
  box-shadow:0 0 22px rgba(255,122,26,.24),inset 0 0 0 1px rgba(255,255,255,.10);
}
.cx-logo-icon img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.cx-logo-icon svg{width:18px;height:18px;color:#fff}
.cx-logo-text{font-size:15.5px;white-space:nowrap;overflow:hidden;letter-spacing:0}
.cx-logo b{color:#fff;font-weight:800}
.cx-logo-accent{margin-left:3px;background:var(--cx-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* PLAYERS PILL */
.cx-players-pill{
  display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:12px;
  font-family:var(--cx-display);font-size:11px;font-weight:700;letter-spacing:.07em;
  color:#cfd3dd;text-transform:uppercase;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
}
.cx-players-pill-text{flex:1;min-width:0}
.cx-players-pill strong{color:#fff;font-weight:800;margin-left:4px}
.cx-dot{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;aspect-ratio:1;
  background:#26e21f;box-shadow:0 0 10px #26e21f,0 0 3px #26e21f;
  animation:none;
}

/* ───────────────────────── NAV LIST ───────────────────────── */

.cx-nav{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:10px;
  /* Expanded groups must participate in normal sidebar flow so they push
     Account Status / clock / actions down instead of overlapping them. */
  flex:0 0 auto;
  min-height:auto;
  overflow:visible;
}

.cx-nav-group{
  display:flex;
  flex-direction:column;
  gap:0;
}

/* main menu button */
.cx-nav-link{
  position:relative;
  display:flex;
  align-items:center;
  gap:13px;
  min-height:54px;
  padding:0 15px;
  border-radius:15px;
  overflow:hidden;
  text-decoration:none;
  width:100%;

  font-family:var(--cx-display);
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;

  color:#d7d9e2;
  background:linear-gradient(90deg,rgba(255,255,255,.045),rgba(255,255,255,.025));
  border:1px solid rgba(255,122,26,.20);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 0 0 rgba(255,122,26,0);

  transition:
    color .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

.cx-nav-parent{
  cursor:pointer;
  text-align:left;
}

.cx-nav-link::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  bottom:9px;
  width:3px;
  border-radius:0 4px 4px 0;
  background:var(--cx-grad);
  opacity:.45;
  transition:opacity .16s ease;
}

.cx-nav-link::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:14px;
  pointer-events:none;
  background:
    linear-gradient(
      100deg,
      rgba(255,122,26,.08),
      transparent 42%,
      rgba(161,92,255,.06)
    );
  opacity:.45;
  transition:opacity .16s ease;
}

.cx-nav-ico{
  position:relative;
  z-index:1;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:none;
  border:none;
  box-shadow:none;
}

.cx-nav-icon{
  width:29px;
  height:29px;
  object-fit:contain;
  opacity:1;
  filter:none;
}

.cx-nav-label{
  position:relative;
  z-index:1;
  flex:1;
}

.cx-nav-caret{
  position:relative;
  z-index:1;
  width:7px;
  height:7px;
  border-right:2px solid currentColor;
  border-top:2px solid currentColor;
  transform:rotate(45deg);
  opacity:.55;
  color:var(--cx-orange);
  transition:opacity .16s ease, transform .16s ease;
}

/* animated underline */
.cx-subnav-link > span::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:100%;
  height:1px;

  background:linear-gradient(
    90deg,
    var(--cx-orange),
    var(--cx-magenta)
  );

  transform:scaleX(0);
  transform-origin:left;
  opacity:.9;
  transition:transform .22s ease;
}

/* ● glowing dot after connector */
.cx-subnav-link::after{
  content:"";
  position:absolute;
  left:-18px;
  top:50%;
  width:6px;
  height:6px;
  transform:translateY(-50%);
  border-radius:50%;
  background:var(--cx-orange);
  box-shadow:0 0 4px rgba(255,122,26,.5);
  z-index:2;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

/* submenu hover / active */
.cx-subnav-link:hover,
.cx-subnav-link.active{
  color:#fff;
  background:linear-gradient(90deg,rgba(255,122,26,.14),rgba(255,255,255,.04));
  border-color:rgba(255,122,26,.4);
  box-shadow:inset 2px 0 0 var(--cx-orange);
  transform:none;
}

.cx-subnav-link:hover > span::after,
.cx-subnav-link.active > span::after{
  transform:scaleX(0);
}

.cx-subnav-link:hover::before,
.cx-subnav-link.active::before{
  width:16px;
  background:linear-gradient(90deg,var(--cx-orange),rgba(255,122,26,.3));
  box-shadow:0 0 4px rgba(255,122,26,.4);
}

.cx-subnav-link:hover::after,
.cx-subnav-link.active::after{
  transform:translateY(-50%) scale(1.15);
  background:var(--cx-orange);
  box-shadow:0 0 6px rgba(255,122,26,.6);
}

/* inactive hover only */
.cx-nav-link:not(.active):hover{
  color:#fff;
  background:linear-gradient(90deg,rgba(255,122,26,.11),rgba(255,255,255,.045));
  border-color:rgba(255,122,26,.42);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 0 16px rgba(255,122,26,.14);
  transform:translateX(2px);
}

.cx-nav-link:not(.active):hover::before{
  opacity:1;
}

.cx-nav-link:not(.active):hover::after{
  opacity:.65;
}

.cx-nav-link:not(.active):hover .cx-nav-caret{
  opacity:1;
}

/* ── ACTIVE / OPEN STATES ──────────────────────────────────────────
   A LEAF link that points at the current page (e.g. HOME) gets the loud
   "you are here" gradient.
   A PARENT button that is merely OPEN — whether you clicked it, or you
   landed on one of its sub-pages — gets a calmer highlight so the row
   doesn't fight with the highlighted sub-item beneath it.
   This makes the click-to-open look identical to the land-on-a-subpage
   look, fixing the "submenu looks weird after clicking" issue.
   ─────────────────────────────────────────────────────────────────── */

/* loud active — LEAF links only (buttons/parents are excluded) */
a.cx-nav-link.active{
  color:#fff;
  background:linear-gradient(90deg,rgba(255,122,26,.52),rgba(161,92,255,.34));
  border-color:rgba(255,122,26,.55);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 0 20px rgba(255,122,26,.18);
}
a.cx-nav-link.active:hover{
  transform:none;
  color:#fff;
  background:linear-gradient(90deg,rgba(255,122,26,.52),rgba(161,92,255,.34));
  border-color:rgba(255,122,26,.55);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 0 20px rgba(255,122,26,.18);
}

/* calm open/active — PARENT buttons (same look whether clicked or on a sub-page) */
.cx-nav-parent.active,
.cx-nav-group-open > .cx-nav-parent{
  color:#fff;
  background:linear-gradient(90deg,rgba(255,122,26,.13),rgba(255,255,255,.05));
  border-color:rgba(255,122,26,.38);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 0 14px rgba(255,122,26,.10);
}
.cx-nav-parent.active:hover,
.cx-nav-group-open > .cx-nav-parent:hover{
  transform:none;
  background:linear-gradient(90deg,rgba(255,122,26,.18),rgba(255,255,255,.06));
  border-color:rgba(255,122,26,.46);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 0 16px rgba(255,122,26,.14);
}

/* accent bar + caret lit for any active/open row */
.cx-nav-link.active::before,
.cx-nav-group-open > .cx-nav-parent::before{opacity:1}
a.cx-nav-link.active::after{opacity:.4}
.cx-nav-link.active .cx-nav-caret,
.cx-nav-group-open > .cx-nav-parent .cx-nav-caret{
  opacity:1;
  color:var(--cx-orange);
}

/* open group arrow */
.cx-nav-group-open .cx-nav-caret{
  transform:rotate(135deg);
  opacity:1;
}

/* submenu wrapper */
.cx-subnav{
  display:none;
  position:relative;
  flex-direction:column;
  gap:6px;

  margin:-1px 0 11px 0;
  padding:11px 0 0 34px;
}

.cx-nav-group-open .cx-subnav{
  display:flex;
  animation:cx-subnav-in .26s cubic-bezier(.22,1,.36,1) both;
}

@keyframes cx-subnav-in{
  from{opacity:0}
  to{opacity:1}
}

/* │ vertical gradient line */
.cx-subnav::before{
  content:"";
  position:absolute;
  left:0;
  top:-10px;
  bottom:9px;
  width:3px;
  border-radius:999px;

  background:linear-gradient(
    180deg,
    rgba(255,122,26,0) 0%,
    var(--cx-orange) 10%,
    var(--cx-magenta) 55%,
    var(--cx-purple) 100%
  );

  box-shadow:0 0 4px rgba(255,122,26,.25);
}

/* submenu item */
.cx-subnav-link{
  position:relative;
  min-height:34px;
  display:flex;
  align-items:center;
  overflow:visible;

  padding:0 12px 0 16px;
  border-radius:10px;

  font-family:var(--cx-display);
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;

  color:#aeb2bd;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.04);

  transform:translateX(0);
  transition:
    color .15s ease,
    background .15s ease,
    border-color .15s ease;
}

/* submenu text */
.cx-subnav-link span{
  position:relative;
  z-index:2;
  display:inline-block;
  flex:0 0 auto;
  width:auto;
}

/* animated underline */
.cx-subnav-link > span::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:100%;
  height:1px;

  background:linear-gradient(
    90deg,
    var(--cx-orange),
    var(--cx-magenta)
  );

  transform:scaleX(0);
  transform-origin:left;
  opacity:.9;
  transition:transform .22s ease;
}

/* ──── horizontal connector from the vertical line */
.cx-subnav-link::before{
  content:"";
  position:absolute;
  left:-33px;
  top:50%;
  width:18px;
  height:2px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,var(--cx-orange),rgba(255,122,26,.25));
  box-shadow:0 0 3px rgba(255,122,26,.35);
  z-index:1;
  transition:
    width .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

/* ● glowing dot after connector */
.cx-subnav-link::after{
  content:"";
  position:absolute;
  left:-18px;
  top:50%;
  width:6px;
  height:6px;
  transform:translateY(-50%);
  border-radius:50%;
  background:var(--cx-orange);
  box-shadow:0 0 4px rgba(255,122,26,.5);
  z-index:2;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}




/* ─────────────────────────────────────────────────────────────
   FIX: sub-pages load styles.css which contains legacy generic
   rules `nav a::before {left:50%;width:0}` and
   `nav a::after {right:0;left:0}` meant for the old top-nav.
   The sidebar items are <a> inside <nav class="cx-nav">, so those
   rules leaked in and stretched the connector/dot pseudo-elements
   into a giant orange glow on hover. Pin the geometry so the
   sidebar is immune regardless of what other sheets declare.
   ───────────────────────────────────────────────────────────── */
.cx-nav-link::before{
  left:0 !important; right:auto !important;
  top:9px !important; bottom:9px !important;
  width:3px !important; height:auto !important;
}
.cx-nav-link::after{
  inset:1px !important; width:auto !important; height:auto !important;
}
.cx-subnav-link::before,
.cx-subnav-link:hover::before,
.cx-subnav-link.active::before{
  left:-33px !important; right:auto !important;
  top:50% !important; bottom:auto !important;
  height:2px !important;
}
.cx-subnav-link::before{ width:18px !important; }
.cx-subnav-link:hover::before,
.cx-subnav-link.active::before{ width:16px !important; }
.cx-subnav-link::after,
.cx-subnav-link:hover::after,
.cx-subnav-link.active::after{
  left:-18px !important; right:auto !important;
  top:50% !important; bottom:auto !important;
  width:6px !important; height:6px !important;
}

/* BOTTOM ACTIONS */
.cx-side-foot{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:13px;

  /* Push Account Status + Server Time to the bottom whenever
     the sidebar has free vertical space. If navigation grows,
     the auto margin collapses naturally and the sidebar scrolls. */
  margin-top:auto;

  border-top:1px solid rgba(255,255,255,.06);
  flex:0 0 auto;
  flex-shrink:0;
  position:static;
}

/* ───────────────────── ACCOUNT STATUS HUD ───────────────────── */
.cx-account-status,
.cx-services-status{
  position:relative;overflow:hidden;padding:12px;border-radius:15px;
  background:
    radial-gradient(120% 110% at 0 0,rgba(255,122,26,.10),transparent 48%),
    linear-gradient(155deg,rgba(255,255,255,.048),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.085);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018),0 12px 30px rgba(0,0,0,.18);
}
.cx-account-status::after,
.cx-services-status::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--cx-orange),var(--cx-purple),transparent);
  opacity:.65;
}
.cx-status-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0;padding:1px 2px;cursor:pointer;user-select:none;outline:none;
}
.cx-status-head:focus-visible{box-shadow:0 0 0 2px rgba(255,122,26,.32);border-radius:9px}
.cx-status-title{display:flex;align-items:baseline;gap:6px;font-family:var(--cx-display);line-height:1}
.cx-status-eyebrow{font-size:8.5px;font-weight:800;letter-spacing:.16em;color:#777d89}
.cx-status-head strong{font-size:10.5px;font-weight:800;letter-spacing:.12em;color:#e9ebf1}
.cx-status-caret{
  width:7px;height:7px;margin-left:3px;border-right:2px solid var(--cx-orange);border-bottom:2px solid var(--cx-orange);
  transform:rotate(45deg) translateY(-2px);opacity:.8;transition:transform .22s ease,opacity .18s ease;
}
.cx-account-status:not(.is-collapsed) .cx-status-caret,
.cx-services-status:not(.is-collapsed) .cx-status-caret{transform:rotate(225deg) translate(-1px,-1px);opacity:1}
.cx-status-refresh{
  width:25px;height:25px;display:grid;place-items:center;padding:0;border-radius:8px;cursor:pointer;
  color:#9399a5;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
  font:700 15px/1 var(--cx-display);transition:.18s ease;
}
.cx-status-refresh:hover{color:#fff;border-color:rgba(255,122,26,.34);background:rgba(255,122,26,.08)}
.cx-status-refresh:disabled{opacity:.38;cursor:not-allowed;pointer-events:none}
.cx-status-refresh.is-spinning{animation:cx-status-spin .75s linear infinite}
@keyframes cx-status-spin{to{transform:rotate(360deg)}}

.cx-status-list{
  display:flex;flex-direction:column;gap:6px;
  max-height:180px;margin-top:9px;opacity:1;overflow:hidden;
  transform:translateY(0);
  transition:max-height .30s cubic-bezier(.22,1,.36,1),opacity .20s ease,transform .28s ease,margin-top .28s ease;
}
.cx-account-status.is-collapsed .cx-status-list,
.cx-services-status.is-collapsed .cx-status-list{
  max-height:0;margin-top:0;opacity:0;transform:translateY(-6px);pointer-events:none;
}
.cx-account-status.is-collapsed,
.cx-services-status.is-collapsed{padding-top:10px;padding-bottom:10px;cursor:default}
.cx-status-item{
  position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:8px;
  min-height:45px;padding:6px 8px;border-radius:11px;
  background:rgba(3,4,9,.32);border:1px solid rgba(255,255,255,.055);
  transition:border-color .18s ease,background .18s ease;
}
.cx-status-item.is-on{background:linear-gradient(90deg,rgba(43,219,116,.075),rgba(255,255,255,.018));border-color:rgba(43,219,116,.16)}
.cx-status-item.is-off{opacity:.82}
.cx-services-status .cx-status-item.is-off{opacity:1;background:linear-gradient(90deg,rgba(255,73,73,.075),rgba(255,255,255,.018));border-color:rgba(255,73,73,.16)}
.cx-services-status .cx-status-item.is-off .cx-status-icon{color:#ff8585;background:rgba(255,73,73,.08);border-color:rgba(255,73,73,.18)}
.cx-services-status .cx-status-badge.is-off{color:#ff9292;background:rgba(255,73,73,.10);border-color:rgba(255,73,73,.24)}
.cx-status-icon{
  width:28px;height:28px;display:grid;place-items:center;border-radius:9px;
  font-family:var(--cx-display);font-size:11px;font-weight:900;color:#a9aeba;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.065);
}
.cx-status-item.is-on .cx-status-icon{color:#6bed9d;background:rgba(43,219,116,.08);border-color:rgba(43,219,116,.18);box-shadow:0 0 13px rgba(43,219,116,.07)}
.cx-status-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.cx-status-name{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--cx-display);font-size:9.4px;font-weight:800;letter-spacing:.055em;color:#d8dbe3;
}
.cx-status-date{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--cx-body);font-size:8.8px;font-weight:500;color:#707683;
}
.cx-status-item.is-on .cx-status-date{color:#89958f}
.cx-status-badge{
  min-width:34px;padding:5px 6px;border-radius:999px;text-align:center;
  font-family:var(--cx-display);font-size:8px;font-weight:900;letter-spacing:.08em;
  border:1px solid rgba(255,255,255,.08);color:#858b97;background:rgba(255,255,255,.04);
}
.cx-status-badge.is-on{color:#71f2a7;background:rgba(43,219,116,.10);border-color:rgba(43,219,116,.25);box-shadow:0 0 12px rgba(43,219,116,.08)}
.cx-status-badge.is-off{color:#8f95a1;background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.065)}
.cx-status-badge.is-loading{color:var(--cx-orange);animation:cx-status-pulse 1s ease-in-out infinite}
.cx-status-badge.is-unknown{color:#777d88}
@keyframes cx-status-pulse{50%{opacity:.35}}

/* ───────────────────── SERVER CLOCK HUD ───────────────────── */
.cx-server-clock{
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:7px;
  min-height:66px;padding:10px 12px 11px;border-radius:14px;
  background:
    radial-gradient(100% 160% at 100% 100%,rgba(161,92,255,.10),transparent 55%),
    linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.085);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018),0 10px 24px rgba(0,0,0,.16);
  font-family:var(--cx-display);
}
.cx-server-clock::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,var(--cx-orange),var(--cx-purple));box-shadow:0 0 10px rgba(255,122,26,.35);
}
.cx-server-clock-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cx-server-clock-label{color:#777d89;font-size:8.5px;font-weight:800;letter-spacing:.16em}
.cx-server-clock-live{display:flex;align-items:center;gap:5px;color:#7d838e;font-size:7.5px;font-weight:800;letter-spacing:.12em}
.cx-server-clock-live i{width:5px;height:5px;border-radius:50%;background:#38e87c;box-shadow:0 0 8px rgba(56,232,124,.7);animation:none}
@keyframes cx-clock-live{50%{opacity:.42;box-shadow:0 0 3px rgba(56,232,124,.3)}}
.cx-server-clock-main{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;min-width:0}
#cx-server-clock{
  font-family:var(--cx-display);font-size:24px;font-weight:800;line-height:.95;letter-spacing:.055em;color:#f5f6f8;
  font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(255,255,255,.06);
}
.cx-server-clock-zone{
  flex-shrink:0;padding:4px 6px;border-radius:7px;
  color:var(--cx-orange);background:rgba(255,122,26,.07);border:1px solid rgba(255,122,26,.14);
  font-size:7.5px;font-weight:900;letter-spacing:.07em;line-height:1;
}

.cx-connect-btn{
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:9px;
  height:46px;padding:0 20px;border-radius:12px;clip-path:var(--cx-clip);text-decoration:none;
  font-family:var(--cx-display);font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#111;
  background:linear-gradient(120deg,var(--cx-orange),var(--cx-amber));
  box-shadow:0 8px 24px rgba(255,122,26,.30);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.cx-connect-btn svg{width:16px;height:16px;position:relative;z-index:1}
.cx-connect-btn span{position:relative;z-index:1}
.cx-connect-btn::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .55s ease;
}
.cx-connect-btn:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 12px 30px rgba(255,122,26,.5)}
.cx-connect-btn:hover::after{left:130%}

.cx-user-chip{
  display:none;align-items:center;gap:10px;height:54px;padding:7px 10px;border-radius:13px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
}
.cx-user-chip.cx-show{display:flex}
.cx-user-chip img{width:38px;height:38px;border-radius:10px;border:1.5px solid var(--cx-orange);object-fit:cover;background:#222;box-shadow:0 0 12px rgba(255,122,26,.3)}
.cx-user-chip-name{flex:1;min-width:0;font-family:var(--cx-display);font-size:13px;font-weight:700;color:#fff;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-user-chip-logout{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:rgba(0,0,0,.35);color:var(--cx-muted);font-size:17px;line-height:1;text-decoration:none;transition:.15s}
.cx-user-chip-logout:hover{background:rgba(255,90,90,.22);color:#ff6a6a}

/* Light/performance toggle retired. Defensive rule for stale page markup. */
#cx-perf-toggle, .cx-perf-toggle{display:none!important}

/* MOBILE MENU BUTTON */
.cx-menu-toggle{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;border-radius:11px;clip-path:var(--cx-clip);
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);cursor:pointer;padding:0;flex-shrink:0;
  transition:border-color .18s ease,background .18s ease;
}
.cx-menu-toggle:hover{border-color:rgba(255,122,26,.4);background:rgba(255,122,26,.06)}
.cx-menu-toggle span{width:20px;height:2px;background:#fff;transition:.25s;border-radius:2px;margin:0 auto}
.cx-menu-toggle.cx-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.cx-menu-toggle.cx-open span:nth-child(2){opacity:0}
.cx-menu-toggle.cx-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* SIDEBAR BACKDROP (mobile) */
.cx-side-backdrop{display:none;position:fixed;inset:0;z-index:190;background:rgba(2,3,8,.62);backdrop-filter:none;-webkit-backdrop-filter:none;opacity:0;pointer-events:none;transition:opacity .25s ease}
.cx-side-backdrop.cx-show{opacity:1;pointer-events:auto}

/* ── TABLET / MOBILE ── */
@media (max-width:1100px){
  .cx-topbar{
    display:flex;align-items:center;gap:12px;position:relative;top:auto;left:auto;right:auto;z-index:150;
    height:60px;padding:0 clamp(12px,3vw,20px);pointer-events:auto;
    background:rgba(7,8,14,.92);backdrop-filter:none;-webkit-backdrop-filter:none;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .cx-topbar .cx-menu-toggle,
  .cx-topbar .cx-logo{display:flex}
  .cx-topbar .cx-players-pill--bar{display:inline-flex}
  .cx-topbar .cx-logo{padding:0}
  .cx-topbar .cx-logo-icon{width:38px;height:38px}
  .cx-topbar .cx-logo-icon img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
  .cx-header .cx-logo-icon img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
  .cx-topbar .cx-logo-text{font-size:17px}
  .cx-topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
  .cx-players-pill--bar{padding:8px 12px;border-radius:999px}
  .cx-players-pill--bar strong{color:#fff;font-weight:800;font-family:var(--cx-display);font-size:12px}
  .cx-connect-btn--bar{height:40px;padding:0 14px;font-size:11px}

  .cx-header{
    width:min(300px,86vw);transform:translateX(-100%);
    transition:transform .32s cubic-bezier(.22,1,.36,1);
    box-shadow:34px 0 90px rgba(0,0,0,.62);
  }
  .cx-header.cx-open{transform:none}
  .cx-side-backdrop{display:block}
  body.cx-side-lock{overflow:hidden}
}
@media (min-width:1101px){
  .cx-players-pill--bar{display:none}
}

/* ─────────────── COOKIE / TOS BANNER ─────────────── */
.cx-cookies{
  position:fixed;
  overflow:hidden;
  left:24px;
  right:24px;
  bottom:24px;
  width:min(880px,calc(100vw - 48px));
  margin:0 auto;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  padding:16px 18px;
  border-radius:16px;
  clip-path:var(--cx-clip);
  background:linear-gradient(135deg,rgba(22,13,8,.985),rgba(10,10,15,.985));
  border:1px solid rgba(255,122,26,.35);
  box-shadow:0 18px 55px rgba(0,0,0,.72),0 0 28px rgba(255,122,26,.16);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  z-index:9000;
  font-family:var(--cx-body);
  color:#d8dce6;
  transform:translateY(calc(100% + 40px));
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .25s ease,visibility .25s ease;
}
.cx-cookies::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:3px;
  border-radius:3px;
  background:var(--cx-grad);
  box-shadow:0 0 14px rgba(255,122,26,.5);
}
.cx-cookies.cx-show{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.cx-cookies-icon{
  width:40px;
  height:40px;
  flex-shrink:0;
  border-radius:11px;
  background:linear-gradient(135deg,rgba(255,122,26,.26),rgba(161,92,255,.16));
  border:1px solid rgba(255,122,26,.3);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ff9a4d;
}
.cx-cookies-icon svg{width:19px;height:19px}
.cx-cookies-text{
  min-width:0;
  font-size:13.5px;
  line-height:1.55;
  text-align:left;
}
.cx-cookies-text strong{
  color:#fff;
  font-family:var(--cx-display);
  font-weight:700;
  letter-spacing:.03em;
}
.cx-cookies-text a{
  color:var(--cx-orange);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}
.cx-cookies-text a:hover{color:#ffb14a}
button.cx-cookies-btn{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:116px;
  min-height:42px;
  margin:0;
  padding:11px 22px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  clip-path:var(--cx-clip);
  background:linear-gradient(120deg,var(--cx-orange) 0%,var(--cx-magenta) 100%);
  color:#fff;
  box-shadow:0 7px 20px rgba(255,122,26,.34);
  font-family:var(--cx-display);
  font-size:12px;
  font-weight:800;
  line-height:1;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  opacity:1;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
button.cx-cookies-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 11px 26px rgba(255,122,26,.5);
  filter:brightness(1.08);
}
button.cx-cookies-btn:active{transform:translateY(0)}

@media (max-width:680px){
  .cx-cookies{
    left:10px;
    right:10px;
    bottom:max(10px,env(safe-area-inset-bottom));
    width:calc(100vw - 20px);
    grid-template-columns:34px minmax(0,1fr);
    grid-template-areas:
      "icon text"
      "action action";
    column-gap:10px;
    row-gap:9px;
    padding:11px 12px;
    border-radius:13px;
  }

  .cx-cookies-icon{
    grid-area:icon;
    width:34px;
    height:34px;
    border-radius:9px;
    align-self:start;
  }

  .cx-cookies-icon svg{
    width:16px;
    height:16px;
  }

  .cx-cookies-text{
    grid-area:text;
    font-size:11.5px;
    line-height:1.42;
  }

  .cx-cookies-text strong{
    display:inline;
    margin:0;
    font-size:inherit;
    line-height:inherit;
  }

  button.cx-cookies-btn{
    grid-area:action;
    justify-self:center;
    width:auto;
    min-width:96px;
    min-height:36px;
    padding:0 18px;
  }
}

@media (max-width:390px){
  .cx-cookies{
    grid-template-columns:30px minmax(0,1fr);
    column-gap:9px;
    padding:10px;
  }

  .cx-cookies-icon{
    width:30px;
    height:30px;
  }

  .cx-cookies-text{
    font-size:10.8px;
    line-height:1.4;
  }

  .cx-cookies-text strong{
    font-size:inherit;
  }
}

/* ─────────────── SPONSOR BANNERS ─────────────── */
.cx-sponsors-wrap{padding:14px 0 6px}
.cx-sponsors{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.cx-sponsors[data-count="1"]{grid-template-columns:minmax(0,1fr);max-width:520px;margin:0 auto}
.cx-sponsors[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.cx-sponsors[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.cx-sponsors[data-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.cx-sponsors-label{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--cx-display);font-size:11px;font-weight:700;
  letter-spacing:.18em;color:var(--cx-muted-2);text-transform:uppercase;margin-bottom:8px;
}
.cx-sponsors-label::before{content:"";display:inline-block;width:24px;height:1px;background:var(--cx-grad)}
.cx-sponsor{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-radius:12px;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.005));
  border:1px solid var(--cx-line);
  text-decoration:none;color:inherit;font-family:var(--cx-body);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.cx-sponsor::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--sp-c,var(--cx-orange));box-shadow:0 0 14px var(--sp-c,var(--cx-orange));opacity:.85;
}
.cx-sponsor::after{
  content:"AD";position:absolute;top:6px;right:8px;
  font-family:var(--cx-display);font-size:9px;font-weight:700;letter-spacing:.16em;
  color:var(--cx-muted-2);background:rgba(255,255,255,.05);padding:2px 6px;border-radius:4px;
}
.cx-sponsor:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--sp-c, var(--cx-orange)) 50%, transparent);
  box-shadow:0 10px 26px rgba(0,0,0,.45),0 0 22px color-mix(in srgb, var(--sp-c, var(--cx-orange)) 25%, transparent);
}
.cx-sponsor-logo{
  width:42px;height:42px;border-radius:10px;flex-shrink:0;
  display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb, var(--sp-c, var(--cx-orange)) 22%, transparent),color-mix(in srgb, var(--sp-c, var(--cx-orange)) 6%, transparent));
  border:1px solid color-mix(in srgb, var(--sp-c, var(--cx-orange)) 40%, transparent);
  color:var(--sp-c,var(--cx-orange));font-family:var(--cx-display);
  font-size:18px;font-weight:700;letter-spacing:.04em;
}
.cx-sponsor-logo img{width:100%;height:100%;object-fit:cover}
.cx-sponsor-body{min-width:0;flex:1}
.cx-sponsor-name{font-family:var(--cx-display);font-size:14px;font-weight:700;color:#fff;letter-spacing:.04em;line-height:1.2;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-sponsor-tag{font-size:11px;color:var(--cx-muted);letter-spacing:.02em;margin-top:2px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:600px){.cx-sponsors,.cx-sponsors[data-count]{grid-template-columns:1fr 1fr}}

/* ─────────────── STEAM LOGIN NOTICE ─────────────── */
.cx-steam-login-modal{
  max-width:720px;
  padding:28px 30px 26px;
  background:
    radial-gradient(85% 60% at 8% 0%,rgba(102,192,244,.10),transparent 58%),
    radial-gradient(75% 55% at 92% 100%,rgba(161,92,255,.09),transparent 62%),
    linear-gradient(180deg,rgba(20,16,29,.985),rgba(8,9,15,.99));
}
.cx-steam-login-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.cx-steam-login-tag{margin:0;color:#8ec7ff;background:rgba(102,192,244,.09);border-color:rgba(102,192,244,.25)}
.cx-steam-login-tag::before{background:#66c0f4;box-shadow:0 0 9px rgba(102,192,244,.8)}
.cx-steam-login-secure{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-family:var(--cx-display);font-size:9px;font-weight:800;letter-spacing:.13em;color:#7f8795
}
.cx-steam-login-secure i{width:7px;height:7px;border-radius:50%;background:#4ee28a;box-shadow:0 0 9px rgba(78,226,138,.7)}
.cx-steam-login-head{
  display:flex;align-items:center;gap:16px;margin-bottom:19px;padding:0 2px 18px;
  border-bottom:1px solid rgba(255,255,255,.065)
}
.cx-steam-login-heading-copy{min-width:0}
.cx-steam-login-head .cx-modal-title{margin:0 0 5px;font-size:clamp(23px,2.5vw,29px)}
.cx-steam-login-icon{
  width:56px;height:56px;flex:0 0 56px;display:grid;place-items:center;border-radius:15px;
  color:#fff;background:linear-gradient(145deg,#1b5f8c,#182438 62%,#0d1118);
  border:1px solid rgba(102,192,244,.30);
  box-shadow:0 0 24px rgba(102,192,244,.14),inset 0 0 0 1px rgba(255,255,255,.045)
}
.cx-steam-login-icon svg{width:30px;height:30px}
.cx-steam-login-subtitle{margin:0;color:#9aa1af;font-size:12.4px;line-height:1.55}

.cx-steam-login-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 14px}
.cx-steam-login-card{
  position:relative;overflow:hidden;min-height:128px;padding:12px 13px 13px;border-radius:14px;
  background:linear-gradient(155deg,rgba(255,255,255,.042),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018),0 8px 22px rgba(0,0,0,.12)
}
.cx-steam-login-card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,122,26,.55),rgba(161,92,255,.38),transparent);opacity:.55
}
.cx-steam-login-card--info{background:linear-gradient(155deg,rgba(102,192,244,.052),rgba(255,255,255,.018))}
.cx-steam-login-card-head{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:10px;margin-bottom:8px;text-align:left}
.cx-steam-login-row-icon{width:46px;height:46px;display:grid;place-items:center}
.cx-steam-login-row-icon img{
  width:46px;height:46px;display:block;object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(255,122,26,.20))
}
.cx-steam-login-card--info .cx-steam-login-row-icon img{filter:drop-shadow(0 0 12px rgba(102,192,244,.22))}
.cx-steam-login-card strong{
  font-family:var(--cx-display);font-size:11.6px;line-height:1.35;letter-spacing:.035em;color:#f3f5fa
}
.cx-steam-login-card p{margin:0;text-align:center;color:#9fa5b2;font-size:11.5px;line-height:1.55}

.cx-steam-login-legal{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin:0;padding:9px 12px;border-radius:10px;
  background:rgba(255,255,255,.022);border:1px solid rgba(255,255,255,.055);
  color:#777e8b;font-size:10.5px;line-height:1.4
}
.cx-steam-login-legal span{font-family:var(--cx-display);font-size:9.5px;font-weight:800;letter-spacing:.06em;color:#9299a5;text-transform:uppercase}
.cx-steam-login-legal i{font-style:normal;color:#555c68}
.cx-steam-login-legal a{color:#ff9b54;font-weight:700;text-decoration:none}
.cx-steam-login-legal a:hover{color:#ffb37c;text-decoration:underline;text-underline-offset:2px}

.cx-steam-login-actions{margin-top:16px}
.cx-steam-login-actions .cx-modal-btn{min-height:44px}
.cx-steam-login-continue{flex:1.35}
.cx-steam-login-continue svg{width:17px;height:17px}

@media (max-width:600px){
  .cx-steam-login-modal{padding:22px 16px 18px;max-height:calc(100vh - 24px);overflow-y:auto}
  .cx-steam-login-topline{align-items:flex-start}
  .cx-steam-login-secure{font-size:8px;letter-spacing:.1em;margin-top:7px}
  .cx-steam-login-head{align-items:flex-start;gap:11px;margin-bottom:15px;padding-bottom:15px}
  .cx-steam-login-icon{width:45px;height:45px;flex-basis:45px;border-radius:12px}
  .cx-steam-login-icon svg{width:23px;height:23px}
  .cx-steam-login-head .cx-modal-title{font-size:21px}
  .cx-steam-login-subtitle{font-size:11.5px}
  .cx-steam-login-info{grid-template-columns:1fr;gap:8px}
  .cx-steam-login-card{min-height:0;padding:10px 11px 11px}
  .cx-steam-login-card-head{grid-template-columns:40px minmax(0,1fr);gap:9px;margin-bottom:6px}
  .cx-steam-login-row-icon,.cx-steam-login-row-icon img{width:40px;height:40px}
  .cx-steam-login-card p{font-size:11.2px}
  .cx-steam-login-legal{gap:6px;font-size:10px;padding:8px 9px}
  .cx-steam-login-actions{flex-direction:column-reverse}
  .cx-steam-login-actions .cx-modal-btn{width:100%;min-width:0}
}

/* ─────────────── HOMEPAGE NEWS DESK ─────────────── */
.cx-home-news-backdrop{
  z-index:9400;
  padding:22px;
  background:
    radial-gradient(circle at 50% 15%,rgba(255,122,26,.055),transparent 38%),
    rgba(2,3,8,.82);
}

.cx-home-news-modal{
  position:relative;
  width:min(760px,100%);
  max-height:min(760px,calc(100vh - 44px));
  overflow:auto;
  border-radius:18px;
  color:var(--cx-text);
  background:
    linear-gradient(rgba(255,255,255,.017) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.017) 1px,transparent 1px),
    radial-gradient(90% 70% at 100% 0,rgba(161,92,255,.075),transparent 58%),
    radial-gradient(75% 55% at 0 0,rgba(255,122,26,.09),transparent 58%),
    linear-gradient(160deg,#10121c 0%,#090b13 55%,#07080e 100%);
  background-size:
    34px 34px,
    34px 34px,
    auto,
    auto,
    auto;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 32px 90px rgba(0,0,0,.62),
    inset 0 0 0 1px rgba(255,255,255,.018);
}

.cx-home-news-modal::before{
  content:"";
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:linear-gradient(
    90deg,
    var(--cx-orange),
    #ff9a48 34%,
    var(--cx-purple) 76%,
    transparent
  );
}

.cx-home-news-modal::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:145px;
  height:145px;
  pointer-events:none;
  background:
    linear-gradient(135deg,transparent 49%,rgba(255,255,255,.035) 50%,transparent 51%);
  opacity:.6;
}

.cx-home-news-masthead{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding:30px 34px 20px;
}

.cx-home-news-brand{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}

.cx-home-news-kicker{
  color:#7f8490;
  font:800 9px/1 var(--cx-display);
  letter-spacing:.18em;
}

.cx-home-news-brand strong{
  color:#f4f5f8;
  font:800 clamp(19px,2.2vw,25px)/1 var(--cx-display);
  letter-spacing:.045em;
}

.cx-home-news-brand strong span{
  background:var(--cx-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.cx-home-news-status{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:9px;
}

.cx-home-news-tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:27px;
  padding:0 10px;
  border-radius:999px;
  color:#ffae72;
  background:rgba(255,122,26,.075);
  border:1px solid rgba(255,122,26,.22);
  font:800 8.5px/1 var(--cx-display);
  letter-spacing:.12em;
}

.cx-home-news-tag::before{
  content:"";
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:var(--cx-orange);
  box-shadow:0 0 9px rgba(255,122,26,.65);
}

.cx-home-news-tag.is-pinned{
  color:#ffd18a;
  background:rgba(255,176,32,.075);
  border-color:rgba(255,176,32,.25);
}

.cx-home-news-tag.is-pinned::before{
  background:var(--cx-amber);
  box-shadow:0 0 9px rgba(255,176,32,.72);
}

.cx-home-news-position{
  color:#747a87;
  white-space:nowrap;
  font:800 8.5px/1 var(--cx-display);
  letter-spacing:.11em;
}

.cx-home-news-rule{
  position:relative;
  z-index:1;
  height:1px;
  margin:0 34px;
  background:
    linear-gradient(
      90deg,
      rgba(255,122,26,.50),
      rgba(255,255,255,.075) 23%,
      rgba(255,255,255,.075) 78%,
      rgba(161,92,255,.42)
    );
}

.cx-home-news-article{
  position:relative;
  z-index:1;
  padding:29px 34px 31px;
}

.cx-home-news-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  margin-bottom:13px;
}

.cx-home-news-section{
  color:var(--cx-orange-2);
  font:800 9px/1 var(--cx-display);
  letter-spacing:.14em;
}

.cx-home-news-dot{
  width:3px;
  height:3px;
  border-radius:50%;
  background:#565d69;
}

.cx-home-news-time{
  color:#858b97;
  font:700 9px/1.2 var(--cx-display);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.cx-home-news-title{
  max-width:680px;
  margin:0;
  color:#f8f9fb;
  font:800 clamp(28px,4.2vw,44px)/1.08 var(--cx-display);
  letter-spacing:-.025em;
  text-wrap:balance;
}

.cx-home-news-message{
  position:relative;
  max-width:680px;
  margin-top:23px;
  padding-left:19px;
  border-left:2px solid rgba(255,122,26,.58);
  color:#c9cdd6;
  font:400 14px/1.78 var(--cx-body);
}

.cx-home-news-message p{
  margin:0;
}

.cx-home-news-message p + p{
  margin-top:13px;
}

.cx-home-news-footer{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 34px 23px;
  border-top:1px solid rgba(255,255,255,.065);
  background:rgba(3,4,9,.27);
}

.cx-home-news-nav{
  display:flex;
  align-items:center;
  gap:7px;
}

.cx-home-news-nav-btn,
.cx-home-news-close,
.cx-home-news-details{
  min-height:39px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border-radius:9px;
  font:800 9px/1 var(--cx-display);
  letter-spacing:.09em;
  text-decoration:none;
  transition:
    color .16s ease,
    background .16s ease,
    border-color .16s ease,
    transform .16s ease;
}

.cx-home-news-nav-btn{
  padding:0 11px;
  cursor:pointer;
  color:#9298a4;
  background:transparent;
  border:1px solid rgba(255,255,255,.075);
}

.cx-home-news-nav-btn:hover:not(:disabled){
  color:#fff;
  border-color:rgba(255,122,26,.30);
  background:rgba(255,122,26,.055);
}

.cx-home-news-nav-btn:disabled{
  opacity:.24;
  cursor:not-allowed;
}

.cx-home-news-main-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  margin-left:auto;
}

.cx-home-news-close{
  min-width:92px;
  padding:0 14px;
  cursor:pointer;
  color:#9da3ae;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.08);
}

.cx-home-news-close:hover{
  color:#fff;
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.15);
}

.cx-home-news-details{
  min-width:171px;
  padding:0 16px;
  color:#fff;
  background:
    linear-gradient(
      115deg,
      rgba(255,122,26,.25),
      rgba(161,92,255,.18)
    );
  border:1px solid rgba(255,122,26,.36);
  box-shadow:0 8px 25px rgba(255,122,26,.07);
}

.cx-home-news-details:hover{
  transform:translateY(-1px);
  border-color:rgba(255,145,67,.62);
  background:
    linear-gradient(
      115deg,
      rgba(255,122,26,.32),
      rgba(161,92,255,.24)
    );
}

body.cx-home-news-open{
  overflow:hidden;
}

@media (max-width:640px){
  .cx-home-news-backdrop{
    padding:10px;
  }

  .cx-home-news-modal{
    max-height:calc(100vh - 20px);
    border-radius:14px;
  }

  .cx-home-news-masthead{
    align-items:flex-start;
    flex-direction:column;
    gap:13px;
    padding:24px 18px 16px;
  }

  .cx-home-news-status{
    width:100%;
    justify-content:space-between;
  }

  .cx-home-news-rule{
    margin:0 18px;
  }

  .cx-home-news-article{
    padding:23px 18px 25px;
  }

  .cx-home-news-title{
    font-size:clamp(25px,8vw,34px);
  }

  .cx-home-news-message{
    margin-top:18px;
    padding-left:14px;
    font-size:12.5px;
    line-height:1.7;
  }

  .cx-home-news-footer{
    align-items:stretch;
    flex-direction:column;
    padding:15px 18px 18px;
  }

  .cx-home-news-nav{
    width:100%;
  }

  .cx-home-news-nav-btn{
    flex:1;
  }

  .cx-home-news-main-actions{
    width:100%;
    margin-left:0;
  }

  .cx-home-news-close,
  .cx-home-news-details{
    flex:1;
    min-width:0;
  }
}

@media (max-width:390px){
  .cx-home-news-main-actions{
    flex-direction:column-reverse;
  }

  .cx-home-news-close,
  .cx-home-news-details{
    width:100%;
  }
}

/* ─────────────── DISCLAIMER MODAL / GATE ─────────────── */
.cx-modal-backdrop{
  position:fixed;inset:0;z-index:9500;
  background:rgba(2,2,8,.74);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  display:none;align-items:center;justify-content:center;
  padding:20px;animation:cx-fade .22s ease-out;
}
.cx-modal-backdrop.cx-show{display:flex}
.cx-modal{
  position:relative;max-width:560px;width:100%;
  background:linear-gradient(180deg,rgba(22,15,28,.98),rgba(10,10,16,.98));
  border:1px solid rgba(255,122,26,.28);
  border-radius:18px;
  clip-path:var(--cx-clip);
  padding:32px;color:#e8e8ec;font-family:var(--cx-body);
  box-shadow:0 24px 64px rgba(0,0,0,.65),0 0 40px rgba(255,122,26,.16),0 0 40px rgba(161,92,255,.13);
  animation:cx-pop .38s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
}
.cx-modal::before{
  content:"";position:absolute;left:0;top:0;right:0;height:2px;
  background:var(--cx-grad);opacity:.9;
}
/* faint HUD grid inside modal */
.cx-modal::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:40px 40px,40px 40px;
  mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 75%);
  opacity:.6;
}
.cx-modal>*{position:relative;z-index:1}
.cx-modal-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--cx-display);font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cx-orange);
  padding:5px 11px;border-radius:7px;margin-bottom:16px;
  background:rgba(255,122,26,.10);border:1px solid rgba(255,122,26,.28);
}
.cx-modal-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cx-orange);box-shadow:0 0 8px var(--cx-orange);animation:none}
.cx-modal-title{
  font-family:var(--cx-display);font-size:clamp(22px,2.4vw,27px);font-weight:800;
  letter-spacing:.03em;text-transform:uppercase;color:#fff;
  margin:0 0 16px;line-height:1.12;
}
.cx-modal-title .cx-modal-accent{
  background:var(--cx-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.cx-modal-body{font-size:14px;line-height:1.7;color:#c8ccd6;margin:0 0 8px}
.cx-modal-body p{margin:0 0 10px}
.cx-modal-body strong{color:#fff}
.cx-modal-warn{
  display:flex;gap:10px;padding:13px 15px;border-radius:11px;margin:16px 0;
  background:rgba(255,122,26,.08);border:1px solid rgba(255,122,26,.24);
  font-size:13px;color:#ffb14a;line-height:1.55;
}
.cx-modal-warn svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}

/* remember-me row (disclaimer modal) */
.cx-modal-remember{margin:14px 0 2px;font-size:13px;color:#c8ccd6}
.cx-modal-remember label{display:flex;gap:10px;align-items:center;cursor:pointer}
.cx-modal-remember input[type=checkbox],
.cx-gate-check input[type=checkbox]{
  appearance:none;-webkit-appearance:none;flex:none;
  width:20px;height:20px;margin:0;border-radius:6px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1.5px solid var(--cx-line-2);
  display:grid;place-items:center;transition:.18s;
}
.cx-modal-remember input[type=checkbox]:checked,
.cx-gate-check input[type=checkbox]:checked{
  background:linear-gradient(120deg,var(--cx-orange),var(--cx-magenta));border-color:transparent;
}
.cx-modal-remember input[type=checkbox]:checked::after,
.cx-gate-check input[type=checkbox]:checked::after{content:"✓";color:#fff;font-size:13px;font-weight:800}

.cx-modal-actions{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.cx-modal-btn{
  flex:1;min-width:140px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:13px 20px;border-radius:10px;border:none;cursor:pointer;
  clip-path:var(--cx-clip);
  font-family:var(--cx-display);font-size:12px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.cx-modal-btn.cx-cancel{color:#c8ccd6;background:rgba(255,255,255,.05);border:1px solid var(--cx-line-2)}
.cx-modal-btn.cx-cancel:hover{background:rgba(255,255,255,.09);color:#fff}
.cx-modal-btn.cx-agree{
  color:#fff;
  background:linear-gradient(120deg,var(--cx-orange) 0%,var(--cx-magenta) 100%);
  box-shadow:0 6px 18px rgba(255,122,26,.32);
}
.cx-modal-btn.cx-agree:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,122,26,.5)}
.cx-modal-btn:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}

/* TOS + 18+ gate checkbox row */
.cx-gate-check{margin:18px 0 4px;font-size:13.5px;line-height:1.6;color:#d2d6e0}
.cx-gate-check label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.cx-gate-check input[type=checkbox]{margin-top:1px}
.cx-gate-check a{color:var(--cx-orange);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.cx-gate-check a:hover{color:#ffb14a}

@keyframes cx-fade{from{opacity:0}to{opacity:1}}
@keyframes cx-pop{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes cx-sweep{0%{background-position:0% 0}100%{background-position:220% 0}}

/* ─────────────── FUTURISTIC FOOTER ─────────────── */
.cx-footer{
  margin-top:auto;position:relative;
  background:linear-gradient(180deg,#06060c 0%,#0a0a14 100%);
  border-top:1px solid var(--cx-line);
  padding:50px 0 0;overflow:hidden;
}
.cx-footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent 0,var(--cx-orange) 20%,var(--cx-magenta) 50%,var(--cx-cyan) 80%,transparent 100%);
  opacity:.7;
}
.cx-footer::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 15% 0%,rgba(255,122,26,.10) 0%,transparent 60%),
    radial-gradient(ellipse 55% 40% at 85% 0%,rgba(161,92,255,.10) 0%,transparent 60%),
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:100% 100%,100% 100%,48px 48px,48px 48px;
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.3) 90%,transparent 100%);
  opacity:.85;
}
.cx-footer-inner{position:relative;z-index:1}
.cx-footer-grid{
  display:grid;
  grid-template-columns:minmax(240px,1.6fr) 1fr 1fr 1.1fr;
  gap:40px;padding-bottom:32px;
}
.cx-foot-brand{display:flex;flex-direction:column;gap:12px}
.cx-foot-brand .cx-logo{font-size:19px}
.cx-foot-brand .cx-logo-text{max-width:none;opacity:1;overflow:visible}
.cx-foot-brand p{color:var(--cx-muted);font-size:13px;line-height:1.7;margin:6px 0 4px;max-width:300px}
.cx-foot-status{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:9999px;
  background:rgba(38,226,31,.08);border:1px solid rgba(38,226,31,.3);
  color:#7be374;font-size:11px;font-weight:700;letter-spacing:.1em;
  font-family:var(--cx-display);text-transform:uppercase;width:fit-content;
}
.cx-foot-status.cx-off{background:rgba(255,90,90,.08);border-color:rgba(255,90,90,.3);color:#ff7a7a}
.cx-foot-status .cx-dot{width:7px;height:7px}
.cx-foot-status.cx-off .cx-dot{background:#ff5a5a;box-shadow:0 0 8px #ff5a5a;animation:none}

.cx-socials{display:flex;gap:8px;margin-top:8px}
.cx-soc{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;
  clip-path:var(--cx-clip);
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:#9498a2;
  transition:color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;text-decoration:none;
}
.cx-soc:hover{color:#fff;border-color:rgba(255,122,26,.5);background:rgba(255,122,26,.08);transform:translateY(-2px);box-shadow:0 8px 18px rgba(255,122,26,.2)}
.cx-soc svg{width:16px;height:16px}

.cx-foot-col h4{
  font-family:var(--cx-display);font-weight:700;font-size:13px;
  letter-spacing:.14em;color:#fff;text-transform:uppercase;
  margin:0 0 14px;position:relative;padding-bottom:8px;
}
.cx-foot-col h4::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:2px;background:var(--cx-grad)}
.cx-foot-col a,.cx-foot-col p{
  display:block;color:#9498a2;font-size:13px;line-height:1.95;margin:0;
  transition:color .15s ease,padding-left .2s ease;text-decoration:none;
}
.cx-foot-col a:hover{color:#fff;padding-left:6px}
.cx-foot-col a{position:relative}
.cx-foot-col a::before{content:"›";position:absolute;left:-10px;top:0;color:var(--cx-orange);opacity:0;transition:.18s}
.cx-foot-col a:hover::before{opacity:1;left:-4px}

.cx-server-info{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--cx-muted)}
.cx-server-info span{color:#fff;font-weight:600;font-family:var(--cx-display)}

.cx-footer-bottom{
  border-top:1px solid var(--cx-line);
  padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:12px;color:var(--cx-muted-2);letter-spacing:.04em;
}
.cx-footer-bottom .cx-disclaimer{font-size:11px;color:var(--cx-muted-2);max-width:600px;line-height:1.5}
.cx-footer-bottom .cx-disclaimer strong{color:var(--cx-muted)}
.cx-footer-bottom a{color:var(--cx-muted);text-decoration:none;transition:.15s}
.cx-footer-bottom a:hover{color:#fff}

@media (max-width:900px){
  .cx-footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .cx-foot-brand{grid-column:1/-1}
}
@media (max-width:520px){
  .cx-footer-grid{grid-template-columns:1fr;gap:24px}
  .cx-footer-bottom{flex-direction:column;align-items:flex-start}
}

/* ─────────────── LEADERBOARD PAGE (page-local; kept intact) ─────────────── */
.lb-page{
  margin:0;font-family:var(--cx-body);font-size:15px;line-height:1.55;
  color:var(--cx-text);background:var(--cx-bg);overflow-x:hidden;
}
.lb-page::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 12% 14%,rgba(255,122,26,.16) 0%,transparent 60%),
    radial-gradient(ellipse 50% 45% at 88% 26%,rgba(161,92,255,.18) 0%,transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 96%,rgba(161,92,255,.06) 0%,transparent 65%),
    linear-gradient(180deg,#0a0a10 0%,#0d0a14 35%,#0a0810 70%,#07060c 100%);
}
.lb-hero{position:relative;overflow:hidden;padding:46px 0 30px;isolation:isolate}
.lb-hero-grid{
  position:absolute;inset:0;z-index:-1;
  background-image:
    radial-gradient(ellipse 70% 70% at 50% 50%,transparent 30%,rgba(10,10,16,.85) 90%),
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:100% 100%,56px 56px,56px 56px;
}
.lb-hero-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--cx-display);font-size:12px;font-weight:700;
  letter-spacing:.18em;color:var(--cx-orange);text-transform:uppercase;margin-bottom:8px;
}
.lb-hero-tag::before{
  content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--cx-grad);box-shadow:0 0 8px rgba(161,92,255,.5);animation:none;
}
.lb-hero-title{
  font-family:var(--cx-display);font-weight:800;
  font-size:clamp(36px,4.4vw,72px);line-height:1;letter-spacing:.02em;
  text-transform:uppercase;margin:0 0 14px;color:#fff;
}
.lb-hero-title .lb-accent{color:var(--cx-orange);text-shadow:0 0 28px rgba(255,122,26,.4)}
.lb-hero-sub{font-size:14px;color:var(--cx-muted);max-width:560px;line-height:1.6}
.lb-section{padding:18px 0 24px}
.lb-section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.lb-section-tag{display:block;color:var(--cx-orange);font-family:var(--cx-display);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}
.lb-section-title{
  font-family:var(--cx-display);font-weight:800;font-size:clamp(20px,1.6vw,30px);
  color:#fff;letter-spacing:.06em;text-transform:uppercase;line-height:1;margin:0;position:relative;padding-right:12px;display:inline-block;
}
.lb-section-title::after{content:"";position:absolute;left:0;bottom:-8px;width:50px;height:2px;background:var(--cx-grad)}
.lb-section-title .lb-accent{color:var(--cx-orange)}
.lb-pools{display:grid;gap:18px}
.lb-pool{
  position:relative;overflow:hidden;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.024),rgba(255,255,255,.005));
  border:1px solid var(--cx-line);padding:22px;
}
.lb-pool::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--lb-tone,var(--cx-grad));opacity:.85}
.lb-pool-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.lb-pool-title{font-family:var(--cx-display);font-weight:800;font-size:clamp(18px,1.3vw,24px);letter-spacing:.06em;text-transform:uppercase;color:#fff;margin:0;display:inline-flex;align-items:center;gap:10px}
.lb-pool-title-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--lb-icon-bg,rgba(255,122,26,.15));color:var(--lb-icon-color,var(--cx-orange));border:1px solid var(--lb-icon-border,rgba(255,122,26,.35))}
.lb-pool-title-icon svg{width:18px;height:18px}
.lb-pool-max{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9999px;font-family:var(--cx-display);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,122,26,.10);border:1px solid rgba(255,122,26,.30);color:#ffb14a}
.lb-pool-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.lb-item{position:relative;overflow:hidden;border-radius:12px;padding:12px;background:rgba(8,8,12,.55);border:1px solid var(--cx-line);transition:border-color .22s ease,box-shadow .22s ease;display:flex;flex-direction:column;gap:8px}
.lb-item:hover{transform:none;border-color:rgba(255,122,26,.30);box-shadow:0 10px 26px rgba(0,0,0,.45),0 0 18px rgba(255,122,26,.10)}
.lb-item-img{aspect-ratio:1.4;border-radius:8px;display:grid;place-items:center;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(255,122,26,.18),transparent 70%),linear-gradient(180deg,#15151c,#0d0d12);overflow:hidden}
.lb-item-img img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.4))}
.lb-item-name{font-family:var(--cx-display);font-size:13px;font-weight:700;color:#fff;letter-spacing:.02em;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
.lb-item-price{font-family:var(--cx-display);font-size:14px;font-weight:700;color:var(--cx-orange);letter-spacing:.04em}
.lb-pool[data-pool="daily"]{--lb-tone:linear-gradient(90deg,#26e21f,#a15cff)}
.lb-pool[data-pool="daily"] .lb-pool-title-icon{--lb-icon-bg:rgba(38,226,31,.12);--lb-icon-color:#7be374;--lb-icon-border:rgba(38,226,31,.35)}
.lb-pool[data-pool="weekly"]{--lb-tone:linear-gradient(90deg,#ff7a1a,#ff9d2f)}
.lb-pool[data-pool="weekly"] .lb-pool-title-icon{--lb-icon-bg:rgba(255,122,26,.15);--lb-icon-color:#ff8a3a;--lb-icon-border:rgba(255,122,26,.4)}
.lb-pool[data-pool="monthly"]{--lb-tone:linear-gradient(90deg,#ffb84d,#ff9d2f,#ff7a1a)}
.lb-pool[data-pool="monthly"] .lb-pool-title-icon{--lb-icon-bg:rgba(161,92,255,.15);--lb-icon-color:#ffc27a;--lb-icon-border:rgba(161,92,255,.4)}
.lb-table-wrap{position:relative;overflow:hidden;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.024),rgba(255,255,255,.005));border:1px solid var(--cx-line)}
.lb-table-wrap::before{content:"";position:absolute;left:0;top:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0,rgba(255,122,26,.55) 30%,rgba(161,92,255,.55) 70%,transparent 100%);opacity:.65}
.lb-table{width:100%;border-collapse:collapse;font-family:var(--cx-body)}
.lb-table thead th{text-align:left;font-family:var(--cx-display);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cx-muted-2);padding:14px 18px;background:rgba(255,255,255,.02);border-bottom:1px solid var(--cx-line)}
.lb-table tbody tr{border-bottom:1px solid rgba(255,255,255,.04);transition:background .15s ease}
.lb-table tbody tr:hover{background:rgba(255,122,26,.05)}
.lb-table tbody tr:last-child{border-bottom:0}
.lb-table td{padding:14px 18px;font-size:13px;color:#c8ccd6;vertical-align:middle}
.lb-rank{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9999px;font-family:var(--cx-display);font-size:12px;font-weight:700;color:var(--cx-muted);background:rgba(255,255,255,.04);border:1px solid var(--cx-line)}
.lb-rank.lb-gold{color:#ffd45a;border-color:rgba(255,212,90,.5);background:rgba(255,212,90,.08);box-shadow:0 0 10px rgba(255,212,90,.25)}
.lb-rank.lb-silver{color:#d0d6e0;border-color:rgba(208,214,224,.5);background:rgba(208,214,224,.08)}
.lb-rank.lb-bronze{color:#f4a86b;border-color:rgba(244,168,107,.5);background:rgba(244,168,107,.08)}
.lb-player{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.lb-player img{width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(255,122,26,.4);object-fit:cover;background:#222}
.lb-player-name{font-family:var(--cx-display);font-weight:700;letter-spacing:.02em;color:#fff;font-size:14px}
.lb-player:hover .lb-player-name{color:var(--cx-orange)}
.lb-reward{color:var(--cx-orange);font-weight:600;font-family:var(--cx-display);letter-spacing:.02em}
.lb-date{color:var(--cx-muted-2);font-variant-numeric:tabular-nums;font-size:12px}
.lb-empty{padding:30px;text-align:center;color:var(--cx-muted);font-size:13px}
@media (max-width:720px){
  .lb-table thead{display:none}
  .lb-table tbody tr{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;padding:14px;align-items:center}
  .lb-table tbody td{padding:0;border:none;display:contents}
  .lb-table tbody td.lb-cell-rank{grid-column:1;grid-row:1/3}
  .lb-table tbody td.lb-cell-player{grid-column:2;grid-row:1}
  .lb-table tbody td.lb-cell-reward{grid-column:2;grid-row:2;font-size:12px}
  .lb-table tbody td.lb-cell-date{grid-column:2;grid-row:3;color:var(--cx-muted-2);font-size:11px}
}

@keyframes cx-pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ─────────────── REDUCED MOTION ─────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ─────────────── FOCUS-VISIBLE (a11y) ─────────────── */
.cx-nav a:focus-visible,
.cx-connect-btn:focus-visible,
.cx-menu-toggle:focus-visible,
.cx-cookies-btn:focus-visible,
.cx-modal-btn:focus-visible,
.cx-soc:focus-visible,
.cx-user-chip-logout:focus-visible,
.cx-foot-col a:focus-visible,
.cx-logo:focus-visible{
  outline:2px solid var(--cx-orange);
  outline-offset:2px;
}
.cx-gate-check input:focus-visible,
.cx-modal-remember input:focus-visible{outline:2px solid var(--cx-orange);outline-offset:2px}


/* ─────────────── SIDEBAR-AWARE FIXED OVERLAYS ─────────────── */
@media (min-width:1101px){
  .cx-cookies{left:calc(var(--cx-side-w) + 16px)}
}
/* Login button dark text tweak on gradient */
.cx-connect-btn span,.cx-connect-btn svg{color:#1a0e02}


/* ═══════════════ AUTH: INLINE EXPANDING USER CHIP ═══════════════ */
.cx-user-chip{
  display:none;position:relative;align-items:center;gap:0;
  height:46px;max-width:46px;padding:0;overflow:hidden;
  border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);
  box-shadow:0 0 0 3px rgba(8,8,14,.55),0 0 16px rgba(255,122,26,.25);
  transition:max-width .25s ease,padding .25s ease,gap .25s ease,border-color .18s ease,box-shadow .18s ease;
}
.cx-user-chip.cx-show{display:inline-flex}
.cx-user-chip:hover,
.cx-user-chip:focus-within{
  max-width:260px;padding-right:8px;gap:10px;border-color:rgba(255,122,26,.42);
  box-shadow:0 0 0 3px rgba(8,8,14,.55),0 0 22px rgba(255,122,26,.45),0 0 28px rgba(161,92,255,.24);
}
.cx-user-chip img,.cx-user-av{
  width:46px;height:46px;border-radius:13px;object-fit:cover;background:#222;flex:0 0 46px;
  border:2px solid var(--cx-orange);box-shadow:0 0 16px rgba(255,122,26,.35);
}
.cx-user-pop{
  min-width:0;display:flex;align-items:center;gap:8px;opacity:0;visibility:hidden;
  transform:translateX(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}
.cx-user-chip:hover .cx-user-pop,
.cx-user-chip:focus-within .cx-user-pop{opacity:1;visibility:visible;transform:translateX(0)}
.cx-user-pop::after{display:none}
.cx-user-pop .cx-user-chip-name{
  display:block;max-width:150px;min-width:0;font-family:var(--cx-display);font-size:13px;font-weight:800;
  color:#fff;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1;
  padding:0;border:0;
}
.cx-user-pop .cx-user-chip-logout{
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 28px;border-radius:8px;
  background:rgba(255,90,90,.12);color:#ff8a8a;font-family:var(--cx-display);font-size:22px;font-weight:800;line-height:1;
  border:1px solid rgba(255,90,90,.28);text-decoration:none;transition:.15s ease;
}
.cx-user-pop .cx-user-chip-logout:hover{background:rgba(255,90,90,.24);color:#fff}
@media (hover:none), (pointer:coarse){
  .cx-user-chip.cx-show{max-width:260px;padding-right:8px;gap:10px}
  .cx-user-pop{opacity:1;visibility:visible;transform:none}
}

/* ═══════════════ ACCENT: ORANGE→PURPLE GRADIENT TEXT + SUBTLE GLOW ═══════════════ */
.ix-accent,.ix-orange,.accent,.lb-accent{
  background:linear-gradient(115deg,var(--cx-orange) 0%,#c56bff 60%,var(--cx-purple) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 12px rgba(161,92,255,.28));
}

/* Safety: menu never auto-hides/collapses */
body.cx-nav-collapsed{padding-left:var(--cx-side-w)!important}
.cx-header.cx-collapsed{width:var(--cx-side-w)!important}

/* ═══════════════ AUTH PLACEMENT UPDATE ═══════════════
   Login / user block lives inside the sidebar menu above Players Online.
   Desktop + mobile menu show avatar + name + X logout with no hover expansion.
   Mobile top header shows avatar only. */
.cx-auth-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:2px 0 0;
}

.cx-auth-panel .cx-connect-btn{
  width:100%;
}

.cx-auth-panel .cx-user-chip{
  display:none;
  width:100%;
  max-width:none;
  height:54px;
  padding:7px 10px;
  gap:10px;
  overflow:hidden;
  border-radius:13px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 0 0 1px rgba(255,255,255,.03),0 0 16px rgba(255,122,26,.16);
  transition:none;
}

.cx-auth-panel .cx-user-chip.cx-show{
  display:flex;
}

.cx-auth-panel .cx-user-chip:hover,
.cx-auth-panel .cx-user-chip:focus-within{
  max-width:none;
  padding:7px 10px;
  gap:10px;
  border-color:rgba(255,255,255,.10);
  box-shadow:0 0 0 1px rgba(255,255,255,.03),0 0 16px rgba(255,122,26,.16);
}

.cx-auth-panel .cx-user-chip img,
.cx-auth-panel .cx-user-av{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:10px;
  object-fit:cover;
  background:#222;
  border:1.5px solid var(--cx-orange);
  box-shadow:0 0 12px rgba(255,122,26,.3);
}

.cx-auth-panel .cx-user-pop{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  opacity:1;
  visibility:visible;
  transform:none;
  transition:none;
}

.cx-auth-panel .cx-user-pop .cx-user-chip-name{
  flex:1;
  min-width:0;
  max-width:none;
  font-family:var(--cx-display);
  font-size:13px;
  font-weight:800;
  color:#fff;
  letter-spacing:.02em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.cx-auth-panel .cx-user-pop .cx-user-chip-logout{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:9px;
  background:rgba(255,90,90,.12);
  color:#ff8a8a;
  font-family:var(--cx-display);
  font-size:22px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
  border:1px solid rgba(255,90,90,.28);
}

.cx-auth-panel .cx-user-pop .cx-user-chip-logout:hover{
  background:rgba(255,90,90,.24);
  color:#fff;
}

.cx-user-mini{
  display:none;
  width:40px;
  height:40px;
  border-radius:12px;
  overflow:hidden;
  border:1.5px solid var(--cx-orange);
  background:#222;
  box-shadow:0 0 14px rgba(255,122,26,.28);
}
.cx-user-mini.cx-show{display:none}
.cx-user-mini img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:1100px){
  .cx-user-mini.cx-show{display:block}
  .cx-topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
  .cx-topbar .cx-players-pill--bar{display:inline-flex}
}

@media (min-width:1101px){
  .cx-user-mini,
  .cx-user-mini.cx-show{display:none}
}




/* Price row */
.skin-price-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:8px;
}

/* Fetch Price button */
.skin-price-btn{
    padding:5px 10px;
    border:1px solid rgba(255,180,60,.35);
    border-radius:8px;

    background:linear-gradient(
        180deg,
        rgba(255,180,60,.18),
        rgba(255,180,60,.08)
    );

    color:#ffd86a;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;

    cursor:pointer;
    transition:
        background .18s,
        border-color .18s,
        transform .15s,
        box-shadow .18s;
}

.skin-price-btn:hover:not(:disabled){
    background:linear-gradient(
        180deg,
        rgba(255,180,60,.28),
        rgba(255,180,60,.15)
    );

    border-color:#ffd86a;

    box-shadow:
        0 0 12px rgba(255,190,70,.25);

    transform:translateY(-1px);
}

.skin-price-btn:active:not(:disabled){
    transform:translateY(0);
}

.skin-price-btn:disabled{
    opacity:.65;
    cursor:not-allowed;
}

/* Price text */
.skin-price-value{
    min-width:52px;

    color:#8ef08e;
    font-size:12px;
    font-weight:700;
    text-align:center;

    font-family:var(--cx-display);
}


.payment-history-highlight{
    animation: paymentFlash 2s ease;
}

@keyframes paymentFlash{
    0%{
        box-shadow:0 0 0 rgba(255,180,60,0);
    }
    30%{
        box-shadow:0 0 20px rgba(255,180,60,.7);
    }
    100%{
        box-shadow:0 0 0 rgba(255,180,60,0);
    }
}


.skin-item-disabled {
    opacity: 0.45;
    filter: grayscale(100%);
    position: relative;
    cursor: not-allowed;
}

.skin-item-disabled::after {
    content: "✕";
    position: absolute;
    top: 8px;
    left: 8px;

    color: #ff4d4d;
    font-size: 24px;
    font-weight: 900;
    text-shadow: 0 0 6px rgba(0,0,0,.8);

    pointer-events: none;
}



.payment-history-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
}

.payment-history-header h4{
    margin:0;
}

.payment-history-refresh{
    display:flex;
    align-items:center;
    justify-content:center;

    width:20px;
    height:20px;
    padding:0;
    margin-right:4px;

    border:none;
    background:transparent;
    outline:none;

    color:rgba(255,179,71,.7);
    font-size:18px;
    line-height:1;

    cursor:pointer;

    transition:
        color .18s,
        opacity .18s;
}

.payment-history-refresh:hover:not(.spinning){
    color:#ffb347;
}

.payment-history-refresh:active:not(.spinning){
    transform:scale(.92);
}

.payment-history-refresh.spinning{
    animation:spinReload .8s linear infinite;
    color:#ffb347;
    pointer-events:none;
    opacity:.8;
}

@keyframes spinReload{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}


.cx-language-selector {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  background: rgba(10, 13, 20, 0.85);
}

.cx-language-selector button {
  min-width: 32px;
  height: 30px;
  padding: 0 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #8b94a3;
  font-family: var(--cx-display, "Chakra Petch");
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.cx-language-selector button:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.cx-language-selector button.active {
  color: #ffffff;
  background: #ff6a00;
}

@media (max-width: 700px) {
  .cx-language-selector {
    flex-wrap: wrap;
    max-width: 160px;
  }
}

/* ═══════════════ MOBILE SIDEBAR FULL-CONTENT SCROLL FIX ═══════════════
   When several submenu groups are open, the complete sidebar becomes taller
   than the phone viewport. Let the whole sidebar grow naturally and scroll,
   so the bottom actions (including the Light toggle) remain below the menu
   instead of being covered by it.
*/
@media (max-width:1100px){
  .cx-header{
    top:0;
    bottom:0;
    height:100dvh;
    max-height:100dvh;

    overflow-x:hidden;
    overflow-y:auto;

    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;

    padding-bottom:
      max(22px, env(safe-area-inset-bottom));
  }

  /* Do not force the navigation to consume only the remaining viewport.
     Its full expanded height now contributes to the sidebar scroll area. */
  .cx-header .cx-nav{
    flex:0 0 auto;
    min-height:auto;
    overflow:visible;
  }

  .cx-header .cx-nav-group,
  .cx-header .cx-subnav{
    flex-shrink:0;
  }

  /* Keep the footer/actions after all menu content in normal document flow. */
  .cx-header .cx-side-foot{
    position:static;
    flex:0 0 auto;
    flex-shrink:0;
    margin-top:10px;
    padding-bottom:
      max(4px, env(safe-area-inset-bottom));
  }

}

/* Short mobile screens and landscape phones need the same behavior,
   with slightly tighter spacing to reduce unnecessary scrolling. */
@media (max-width:1100px) and (max-height:600px){
  .cx-header{
    gap:10px;
    padding-top:14px;
  }

  .cx-nav{
    gap:7px;
    margin-top:4px;
  }

  .cx-nav-link{
    min-height:48px;
  }

  .cx-subnav{
    margin-bottom:7px;
    padding-top:8px;
  }
}

/* ─────────────── COOKIE BUTTON HARD OVERRIDE ───────────────
   Kept at the end of shared.css so page-local button styles cannot
   remove the cookie action background, spacing, or shape. */
#cx-cookies.cx-cookies #cx-cookies-accept.cx-cookies-btn,
#cx-cookies.cx-cookies button#cx-cookies-accept.cx-cookies-btn {
  all: unset !important;
  box-sizing: border-box !important;
  position: relative !important;
  isolation: isolate !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-width: 124px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 11px !important;
  clip-path: none !important;
  overflow: hidden !important;
  background-color: #ff7a1a !important;
  background-image: linear-gradient(120deg,#ff7a1a 0%,#c56bff 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(255,122,26,.38) !important;
  font-family: var(--cx-display,'Oxanium',system-ui,sans-serif) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  visibility: visible !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transform: none !important;
  filter: none !important;
  transition: transform .18s ease,box-shadow .18s ease,filter .18s ease !important;
}

#cx-cookies.cx-cookies #cx-cookies-accept.cx-cookies-btn::before,
#cx-cookies.cx-cookies #cx-cookies-accept.cx-cookies-btn::after {
  content: none !important;
  display: none !important;
}

#cx-cookies.cx-cookies #cx-cookies-accept.cx-cookies-btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.08) !important;
  box-shadow: 0 12px 30px rgba(255,122,26,.52) !important;
}

#cx-cookies.cx-cookies #cx-cookies-accept.cx-cookies-btn:active {
  transform: translateY(0) !important;
}

#cx-cookies.cx-cookies #cx-cookies-accept.cx-cookies-btn:focus-visible {
  outline: 2px solid #ffb14a !important;
  outline-offset: 3px !important;
}

@media (max-width:680px) {
  #cx-cookies.cx-cookies #cx-cookies-accept.cx-cookies-btn {
    grid-area: action !important;
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    align-self: center !important;
    width: auto !important;
    min-width: 96px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: 9px !important;
    font-size: 10.5px !important;
    letter-spacing: .10em !important;
    box-shadow: 0 5px 16px rgba(255,122,26,.30) !important;
  }
}

@media (max-width:680px) {
  #cx-cookies.cx-cookies #cx-cookies-accept.cx-cookies-btn:hover {
    transform: translateX(-50%) translateY(-2px) !important;
  }

  #cx-cookies.cx-cookies #cx-cookies-accept.cx-cookies-btn:active {
    transform: translateX(-50%) translateY(0) !important;
  }
}

/* Mobile footer: keep Explore / Community / Server in one row. */
@media (max-width:520px){
  .cx-footer-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px 10px;
  }
  .cx-foot-brand{
    grid-column:1 / -1;
  }
  .cx-foot-col h4{
    font-size:10px;
    letter-spacing:.08em;
    white-space:nowrap;
    margin-bottom:10px;
  }
  .cx-foot-col a,
  .cx-foot-col p,
  .cx-server-info{
    font-size:10px;
  }
}


/* CS2FFA PERMANENT LOW-POWER FAILSAFE */
/* The old Light Mode button is gone. Its CPU-saving behavior is now the default.
   Stop decorative effects that continuously repaint/composite the page. */
body.cx-low-power::before,
body.cx-low-power::after,
body.cx-low-power .hero-art,
body.cx-low-power .hero-title .l2::before,
body.cx-low-power .prog-bar-fill::after,
body.cx-low-power .weapon-wrap,
body.cx-low-power .weapon-img,
body.cx-low-power .character-img,
body.cx-low-power .panel::after,
body.cx-low-power .hero-tag::before,
body.cx-low-power .subpage-tag::before,
body.cx-low-power #header-connect-btn .btn-orange,
body.cx-low-power .dot-green,
body.cx-low-power .connect-btn,
body.cx-low-power .cx-dot,
body.cx-low-power .cx-modal-tag::before,
body.cx-low-power .cx-server-clock-live i,
body.cx-low-power .ix-players-pill .ix-dot,
body.cx-low-power .ix-live .ix-dot,
body.cx-low-power .ix-section-tag::before,
body.cx-low-power .ix-panel::after,
body.cx-low-power .ix-win-toast-dot,
body.cx-low-power .ix-ticker-track {
  animation:none!important;
}

/* Blurred translucent layers are costly while scrolling/resizing. Keep the same
   translucent backgrounds/borders, but avoid continuous backdrop compositing. */
body.cx-low-power .cx-header,
body.cx-low-power .cx-topbar,
body.cx-low-power .cx-side-backdrop,
body.cx-low-power header,
body.cx-low-power .ix-header,
body.cx-low-power .toast,
body.cx-low-power [class*="modal"],
body.cx-low-power [class*="overlay"] {
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Keep the homepage ticker useful but static instead of forcing a permanent
   compositor animation. The first/current items remain visible. */
body.cx-low-power .ix-ticker-track {
  transform:translate3d(0,0,0)!important;
}


/* ───────── STAFF-ONLY MENU GROUP ───────── */
.cx-nav-group-staff > .cx-nav-link-staff{
  border-color:rgba(161,92,255,.28);
  background:
    linear-gradient(90deg,rgba(161,92,255,.075),rgba(255,122,26,.035)),
    rgba(255,255,255,.022);
}

.cx-nav-group-staff > .cx-nav-link-staff::before{
  background:linear-gradient(
    180deg,
    var(--cx-orange),
    var(--cx-magenta),
    var(--cx-purple)
  );
  opacity:.7;
}

.cx-nav-group-staff > .cx-nav-link-staff .cx-nav-label{
  color:#eee8f8;
}

.cx-nav-group-staff > .cx-nav-link-staff .cx-nav-ico{
  filter:drop-shadow(0 0 8px rgba(161,92,255,.18));
}

.cx-nav-group-staff > .cx-nav-link-staff:hover{
  color:#fff;
  border-color:rgba(181,108,255,.5);
  background:
    linear-gradient(90deg,rgba(161,92,255,.14),rgba(255,122,26,.065)),
    rgba(255,255,255,.028);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 0 18px rgba(161,92,255,.11);
}

.cx-nav-group-staff.cx-nav-group-open > .cx-nav-link-staff{
  color:#fff;
  border-color:rgba(180,101,255,.48);
  background:
    linear-gradient(90deg,rgba(161,92,255,.16),rgba(255,122,26,.07)),
    rgba(255,255,255,.028);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 0 16px rgba(161,92,255,.11);
}

.cx-nav-group-staff .cx-subnav-link.active{
  color:#fff;
  background:linear-gradient(
    90deg,
    rgba(161,92,255,.16),
    rgba(255,122,26,.055)
  );
  border-color:rgba(161,92,255,.38);
  box-shadow:inset 2px 0 0 var(--cx-purple);
}

.cx-nav-group-staff .cx-subnav-link.active::before{
  background:linear-gradient(
    90deg,
    var(--cx-purple),
    rgba(161,92,255,.30)
  );
}

.cx-nav-group-staff .cx-subnav-link.active::after{
  background:var(--cx-purple);
  box-shadow:0 0 6px rgba(161,92,255,.58);
}


/* ─────────────────────────────────────────────────────────────
   GLOBAL SIDEBAR TYPOGRAPHY LOCK
   Keep the shared sidebar identical on index.html and every subpage.
   This intentionally overrides page-local generic rules such as:
     body.index-page button { font: inherit; }
     nav a { font-size: ... !important; }
   ───────────────────────────────────────────────────────────── */
.cx-header .cx-nav-link,
.cx-header button.cx-nav-link,
.cx-header a.cx-nav-link{
  font-family:var(--cx-display,'Oxanium','Chakra Petch',system-ui,sans-serif) !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:.055em !important;
  text-transform:uppercase !important;
}

.cx-header .cx-subnav-link,
.cx-header .cx-subnav-link > span{
  font-family:var(--cx-display,'Oxanium','Chakra Petch',system-ui,sans-serif) !important;
  font-size:10.5px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
}

/* Keep the text baseline consistent between <a> leaf rows and <button> group rows. */
.cx-header button.cx-nav-link{
  appearance:none !important;
  -webkit-appearance:none !important;
}