@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;500;600;700;800&family=Sora:wght@400;500;600;700&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:cx-pulse 2.2s ease-in-out infinite;
}

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

.cx-nav{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:10px;
  flex:1 1 auto;
  min-height:0;
}

.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:9px;padding-top:13px;margin-top:2px;border-top:1px solid rgba(255,255,255,.06)}

.cx-server-clock{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:42px;padding:8px 12px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  font-family:var(--cx-display);
}
.cx-server-clock-label{
  color:#8f94a0;font-size:9.5px;font-weight:800;letter-spacing:.11em;
}
.cx-server-clock-value{
  display:flex;align-items:baseline;gap:5px;white-space:nowrap;
  color:#fff;font-size:13px;font-weight:800;letter-spacing:.04em;
}
.cx-server-clock-zone{
  color:var(--cx-orange);font-size:9px;font-weight:800;letter-spacing:.08em;
}
.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}

.cx-perf-toggle{
  display:flex;align-items:center;justify-content:center;gap:9px;height:42px;padding:0 14px;border-radius:12px;
  font-family:var(--cx-display);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#cfd3dd;cursor:pointer;white-space:nowrap;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  transition:.18s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.cx-perf-toggle:hover{border-color:rgba(161,92,255,.4);color:#fff;box-shadow:0 0 18px rgba(161,92,255,.12)}
.cx-perf-toggle:active{transform:scale(.98)}
.cx-perf-toggle svg{width:16px;height:16px;color:var(--cx-cyan);flex-shrink:0}
.cx-perf-toggle-text{overflow:hidden}

/* 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:blur(4px);-webkit-backdrop-filter:blur(4px);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:blur(18px);-webkit-backdrop-filter:blur(18px);
    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:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  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:12px;
    right:12px;
    bottom:max(12px,env(safe-area-inset-bottom));
    width:calc(100vw - 24px);
    grid-template-columns:auto minmax(0,1fr);
    gap:12px;
    padding:14px;
  }
  .cx-cookies-text{font-size:12.5px;line-height:1.5}
  button.cx-cookies-btn{
    grid-column:1 / -1;
    width:100%;
    min-height:44px;
  }
}

/* ─────────────── 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}}

/* ─────────────── DISCLAIMER MODAL / GATE ─────────────── */
.cx-modal-backdrop{
  position:fixed;inset:0;z-index:9500;
  background:rgba(2,2,8,.74);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  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:cx-pulse 2.2s ease-in-out infinite}
.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:cx-pulse 2.4s ease-in-out infinite;
}
.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:transform .22s ease,border-color .22s ease,box-shadow .22s ease;display:flex;flex-direction:column;gap:8px}
.lb-item:hover{transform:translateY(-3px);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}}

/* ─────────────── LITE / PERF MODE (perf toggle on) ─────────────── */
body.cx-lite .cx-dot,
body.cx-lite .lb-hero-tag::before,
body.cx-lite .cx-modal-tag::before{animation:none!important}
body.cx-lite .cx-header::before{animation:none!important}
body.cx-lite .cx-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0a0a10}
body.cx-lite .cx-modal-backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
body.cx-lite .cx-connect-btn::after{display:none}

/* ─────────────── 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-perf-toggle: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}

/* Lite mode: flatten sidebar */
body.cx-lite .cx-header{background:#0a0b12}


/* ═══════════════ 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));
}

/* ═══════════════ LITE MODE — apply site-wide (subpages too) ═══════════════ */
body.cx-lite::before,body.cx-lite::after,
body.ix-lite::before,body.ix-lite::after{animation:none!important}
body.cx-lite .cx-header::after,
body.cx-lite .cx-nav-link::before,
body.cx-lite .cx-dot,
body.cx-lite .lb-hero-tag::before,
body.cx-lite .hero-tag::before,
body.cx-lite .subpage-tag::before{animation:none!important}
body.cx-lite .ix-accent,body.cx-lite .accent,body.cx-lite .lb-accent,body.cx-lite .ix-orange{filter:none}

/* 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));
  }

  .cx-header .cx-perf-toggle{
    flex-shrink:0;
  }
}

/* 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-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 46px !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;
  }
}