/* ============================================================
   RANKED BEDWARS site - layout & shell (left nav rail, footer,
   section rhythm, scroll-reveal, generic accordion, Discord
   widget, sub-page chrome, in-page overlay).
   Every page is assembled around this shell by build.js.
   ============================================================ */

/* The `hidden` attribute must always win. Components like `.btn` set an explicit
   `display`, which otherwise overrides `[hidden]` and leaks role-gated controls
   (Add partner / Add news / Add creator) and pre-search panels to everyone.
   One global rule fixes it site-wide instead of per-element. */
[hidden] { display: none !important; }

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
@media (max-width: 620px) { .container { padding: 0 20px; } }

.section { position: relative; z-index: 1; padding: clamp(64px, 9vw, 116px) 0; }
.section[id] { scroll-margin-top: 90px; }
@media (max-width: 1023px) { .section[id] { scroll-margin-top: calc(var(--topbar-h) + 18px); } }
.section-tint { background: linear-gradient(180deg, rgba(255,255,255,.014), transparent 60%); }
.section-divider { border-top: 1px solid var(--hairline); }

/* shared section header */
.section-head { max-width: 700px; margin: 0 auto clamp(38px, 5vw, 58px); text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.section-title { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.06; margin-top: 14px; }
.section-sub { color: var(--text-dim); font-size: clamp(15px, 1.6vw, 17px); margin-top: 16px; line-height: 1.6; }

/* ---------- Scroll reveal (add class="reveal"; JS toggles .in) ----------
   Optional stagger: set inline style="--i:2" for an 80ms*i delay. */
/* No `will-change` here. It was promoting every reveal on the page to its own
   compositor layer permanently (30 of them on the home page) and holding that
   memory for the life of the document, to buy nothing: opacity and transform are
   already composited properties. */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--e-out), transform .7s var(--e-out); transition-delay: calc(var(--i, 0) * 80ms); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   LEFT NAVIGATION RAIL
   Fixed to the left edge on every page. The page itself is not
   wrapped in anything: `body` simply reserves the rail's width as
   padding, so position:fixed children (the rail, the Discord
   bubble, the cart drawer, the overlay) keep the viewport as their
   containing block and are never shifted by it.
   Below 1024px the rail becomes a slide-in drawer behind a compact
   top bar, and the reserved space moves to padding-top.
   ============================================================ */
body { padding-left: var(--side-w); }

.sidenav {
  position: fixed; inset: 0 auto 0 0; z-index: 1260;
  width: var(--side-w);
  display: flex; flex-direction: column;
  padding: 24px 16px 18px;
  background: rgba(9,12,19,.70);
  backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%);
  border-right: 1px solid var(--hairline);
  transition: transform var(--t) var(--e-out);
}

.sidenav-brand { display: flex; align-items: center; gap: 11px; padding: 2px 8px 0; }
.sidenav-brand img { height: 34px; width: auto; flex: 0 0 auto; filter: drop-shadow(0 0 14px rgba(180,204,228,.5)); }
.sidenav-brand .wm { font-weight: 800; font-size: 16.5px; line-height: 1.14; letter-spacing: .2px; color: var(--text); }

.sidenav-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: 26px; }
.sidenav-eyebrow { padding: 0 12px 9px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.sidenav-nav { display: flex; flex-direction: column; gap: 3px; }
.sidenav-link {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 600; color: var(--text-dim);
  border: 1px solid transparent;
  transition: color var(--t), background var(--t), border-color var(--t);
}
.sidenav-link svg { width: 18px; height: 18px; flex: 0 0 auto; }
.sidenav-link:hover { color: var(--text); background: var(--surface); }
.sidenav-link[aria-current="page"] { color: var(--text); background: var(--surface-2); border-color: var(--hairline); }
/* the marker sits in the rail's own 16px padding, flush to its left edge */
.sidenav-link[aria-current="page"]::before {
  content: ''; position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0;
  background: var(--accent-grad); box-shadow: 0 0 14px rgba(150,180,220,.65);
}

.sidenav-foot { flex: 0 0 auto; display: flex; flex-direction: column; gap: 9px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.sidenav-foot .btn { width: 100%; }
.sidenav-discord {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--hairline);
  color: var(--text-dim); font-size: 13px; font-weight: 600;
  transition: color var(--t), background var(--t), border-color var(--t);
}
.sidenav-discord:hover { color: var(--text); background: var(--surface-2); border-color: var(--hairline-strong); }
.sidenav-discord svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent); }
.sidenav-discord-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sidenav-discord-k { font-size: 11px; font-weight: 600; color: var(--text-faint); }

.sidenav-x { display: none; }
.sidenav-scrim { display: none; }

/* compact top bar + drawer (below 1024px) */
.topbar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 1100;
  height: var(--topbar-h); align-items: center; gap: 12px; padding: 0 16px;
  background: rgba(9,12,19,.80);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--hairline);
}
.topbar-toggle {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--r-sm);
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface); border: 1px solid var(--hairline); color: var(--text);
}
.topbar-toggle svg { width: 21px; height: 21px; }
.topbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-brand img { height: 26px; width: auto; flex: 0 0 auto; filter: drop-shadow(0 0 12px rgba(180,204,228,.5)); }
.topbar-brand .wm { font-weight: 800; font-size: 16px; letter-spacing: .2px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1023px) {
  body { padding-left: 0; padding-top: var(--topbar-h); }
  .topbar { display: flex; }
  .sidenav {
    width: min(292px, 84vw); padding-top: 20px;
    transform: translateX(-101%); box-shadow: var(--shadow-lg);
  }
  .sidenav.open { transform: none; }
  .sidenav-x {
    display: grid; place-items: center; position: absolute; top: 16px; right: 14px;
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
    background: var(--surface); border: 1px solid var(--hairline); color: var(--text-dim);
  }
  .sidenav-x svg { width: 16px; height: 16px; }
  .sidenav-brand { padding-right: 44px; }
  .sidenav-scrim {
    display: block; position: fixed; inset: 0; z-index: 1250;
    background: rgba(4,6,11,.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t);
  }
  .sidenav-scrim.open { opacity: 1; visibility: visible; }
}
@media (max-width: 380px) { .topbar-brand .wm { display: none; } }

/* the open drawer owns the viewport; html keeps its scrollbar gutter (theme.css)
   so locking the page here cannot lurch centred content sideways */
html.sidenav-lock { overflow: hidden; }

/* keyboard escape hatch past the rail */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 9500;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--bg-2); border: 1px solid var(--hairline-strong);
  color: var(--text); font-size: 14px; font-weight: 600;
  transform: translateY(-160%); transition: transform var(--t) var(--e-out);
}
.skip-link:focus-visible { transform: none; }

/* ---------- Generic accordion (FAQ etc) ---------- */
.acc-item { border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); overflow: hidden; transition: border-color var(--t), background var(--t); }
.acc-item + .acc-item { margin-top: 12px; }
.acc-item.open { border-color: var(--hairline-strong); background: var(--surface-2); }
.acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; background: none; border: none; text-align: left; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--text); }
.acc-head .acc-ic { width: 22px; height: 22px; flex: 0 0 auto; color: var(--accent); transition: transform var(--t) var(--e-out); }
.acc-item.open .acc-head .acc-ic { transform: rotate(45deg); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height var(--t) var(--e-out); }
.acc-body-inner { padding: 0 22px 22px; color: var(--text-dim); font-size: 14.5px; line-height: 1.65; }

/* ---------- Footer ---------- */
/* The footer is the one large block of plain, low emphasis text on the site, so
   it carries its own dark base rather than sitting straight on the background
   photo, where --text-mute dropped under 3:1. */
.footer { position: relative; z-index: 1; border-top: 1px solid var(--hairline); background: linear-gradient(180deg, rgba(7,9,16,.62), rgba(7,9,16,.86)); padding: 60px 0 34px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.footer-brand img { height: 28px; width: auto; filter: drop-shadow(0 0 12px rgba(180,204,228,.5)); }
.footer-brand .wm { font-weight: 800; font-size: 18px; }
.footer-tag { color: var(--text-mute); font-size: 13.5px; line-height: 1.6; max-width: 300px; }
.footer-col h4 { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 16px; }
.footer-col a { display: block; color: var(--text-dim); font-size: 14px; padding: 6px 0; transition: color var(--t); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--hairline); color: var(--text-mute); font-size: 13px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--hairline); color: var(--text-dim); transition: all var(--t); }
.footer-social a:hover { color: var(--accent); border-color: var(--hairline-strong); transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }

/* ---------- Floating Discord widget + click-to-preview popover (injected by site.js) ---------- */
/* The container is as tall as the (invisible) closed .dpop - roughly 300x230 of
   bottom-right viewport. At z-index 1200 that empty box silently ate every click
   under it on every page, so it must not hit-test; the bubble and the open pop
   opt back in below. */
.dwidget { position: fixed; right: 22px; bottom: 22px; z-index: 1200; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }
.dbubble { pointer-events: auto; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-grad); color: #0a1320; border: none; cursor: pointer; box-shadow: 0 12px 32px -6px rgba(150,180,220,.7), var(--glow-soft); transition: transform var(--t) var(--e-spring), box-shadow var(--t); }
.dbubble svg { width: 30px; height: 30px; }
.dbubble:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 16px 40px -6px rgba(150,180,220,.95), var(--glow-soft); }
.dwidget.open .dbubble { transform: scale(.92); }
.dpop { position: relative; width: 300px; max-width: calc(100vw - 44px); background: var(--bg-1); border: 1px solid var(--hairline-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 18px 18px 16px; opacity: 0; transform: translateY(10px) scale(.96); transform-origin: bottom right; pointer-events: none; transition: opacity var(--t) var(--e-out), transform var(--t) var(--e-out); }
.dwidget.open .dpop { opacity: 1; transform: none; pointer-events: auto; }
.dpop-x { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--hairline); color: var(--text-dim); cursor: pointer; transition: color var(--t), background var(--t); }
.dpop-x:hover { color: var(--text); background: var(--surface-2); }
.dpop-x svg { width: 14px; height: 14px; }
.dpop-head { display: flex; align-items: center; gap: 13px; padding-right: 22px; }
.dpop-icon { width: 52px; height: 52px; border-radius: 16px; flex: 0 0 auto; background: var(--surface-2); object-fit: contain; }
.dpop-name { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--text); line-height: 1.1; }
.dpop-tag { margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--text-mute); }
.dpop-stats { display: flex; gap: 20px; margin: 15px 0 16px; }
.dpop-stat { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
.dpop-stat b { color: var(--text); font-weight: 700; }
.dpop-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.dpop-dot.on { background: var(--safe); box-shadow: 0 0 8px rgba(87,217,163,.85); }
.dpop-dot.mem { background: var(--text-mute); }
.dpop-join { width: 100%; }
.dpop-join svg { width: 18px; height: 18px; }
@media (max-width: 520px) { .dwidget { right: 16px; bottom: 16px; } .dbubble { width: 52px; height: 52px; } .dpop { width: 280px; } }

/* ---------- Sub-page body (store / leaderboard / checkout) ----------
   These pages used to carry their own top bar. The rail replaced it, so all
   that is left here is the page body itself.
   The .bg-layer ambient divs are position:fixed with z-index:0, so they are
   *positioned* and paint above any static in-flow content. A sub-page's plain
   text (headings, copy) vanishes behind them unless the page wrapper is lifted
   into the same layer - only glass panels survive, because backdrop-filter
   gives them their own compositing layer. .section does this on the home page;
   every .subpage needs it too. */
.subpage { position: relative; z-index: 1; min-height: 72vh; padding: clamp(30px, 4.4vw, 62px) 0 clamp(48px, 6vw, 76px); }
.auth-wrap { display: flex; align-items: center; justify-content: center; padding: 60px 20px; }
.subfoot { position: relative; z-index: 1; border-top: 1px solid var(--hairline); padding: 22px 0; color: var(--text-mute); font-size: 13px; background: linear-gradient(180deg, transparent, rgba(150,180,220,.03)); }
.subfoot .container { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.subfoot a { color: var(--text-dim); font-weight: 600; }
.subfoot a:hover { color: var(--accent); }

/* ---------- In-page overlay (opens buy/signin/register without leaving the site) ---------- */
.vmodal { position: fixed; inset: 0; z-index: 2000; display: none; }
.vmodal.open { display: block; }
html.vmodal-lock { overflow: hidden; }
.vmodal-backdrop { position: absolute; inset: 0; background: rgba(4,6,11,.74); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); opacity: 0; transition: opacity var(--t); }
.vmodal.open .vmodal-backdrop { opacity: 1; }
.vmodal-panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -47%); width: min(1080px, 94vw); height: min(880px, 92vh); background: var(--bg-1); border: 1px solid var(--hairline-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; opacity: 0; transition: opacity var(--t) var(--e-out), transform var(--t) var(--e-out), height var(--t) var(--e-out); }
.vmodal.open .vmodal-panel { transform: translate(-50%, -50%); opacity: 1; }
.vmodal-frame { width: 100%; height: 100%; border: 0; display: block; background: var(--bg-0); }
.vmodal-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(10,13,21,.7); border: 1px solid var(--hairline); color: var(--text); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background var(--t), border-color var(--t), transform var(--t); }
.vmodal-close:hover { background: var(--surface-3); border-color: var(--hairline-strong); transform: rotate(90deg); }
.vmodal-close svg { width: 20px; height: 20px; }
@media (max-width: 560px) { .vmodal-panel { width: 100vw; height: 100%; border-radius: 0; top: 0; left: 0; transform: none; } .vmodal.open .vmodal-panel { transform: none; } }
@media (prefers-reduced-motion: reduce) { .vmodal-backdrop, .vmodal-panel { transition: opacity .001s; } }

/* when a sub-page is shown inside the overlay iframe, drop its own duplicate chrome */
html.is-framed .sidenav, html.is-framed .sidenav-scrim, html.is-framed .topbar,
html.is-framed .skip-link, html.is-framed .footer, html.is-framed .subfoot,
html.is-framed .dbubble { display: none !important; }
html.is-framed, html.is-framed body { min-height: 0 !important; height: auto !important; }
html.is-framed body { padding-left: 0 !important; padding-top: 0 !important; }
html.is-framed .subpage { padding-top: 22px !important; padding-bottom: 22px !important; min-height: 0 !important; }
html.is-framed .auth-wrap { padding: 30px 20px !important; min-height: 0 !important; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}