/* Master Pain's Big Back Yard — global navigation.
   ONE cohesive cream bar (modeled on the stat board's nav): the category row sits on top, and
   when the active category has subpages the bar expands downward like a drawer, cascading the
   sub-chips in from top to bottom. Injected by assets/nav.js. */
/* Short pages (e.g. News) don't scroll, so their vertical scrollbar disappears — that widens the
   viewport by ~15px and nudges every centred element, including this nav, ~7px sideways. Reserving
   the scrollbar gutter on every page keeps the nav pinned in the exact same spot site-wide. */
html{ scrollbar-gutter:stable; }

/* The nav lives OUTSIDE each page's .wrap and is locked to the Player Stats geometry
   (max-width:1300px; padding:20px 16px) so the chips land in the exact same spot on every
   page, no matter how wide that page's own content column is. */
.sitenav-outer{ max-width:1300px; margin:0 auto; padding:20px 16px 0; }

.sitenav{ display:block; background:#fff8e8; border-radius:16px; padding:9px 12px; margin:0;
  font-family:'Nunito', system-ui, sans-serif; box-shadow:0 4px 0 rgba(42,32,19,.18); }

.sitenav .nav-main{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }

/* ---- Master Pain logo ---- */
/* desktop: parked on the far right of the chip row */
.sitenav .nav-logo{ height:44px; width:auto; display:block; flex:0 0 auto; }
.sitenav .nav-logo.desk{ margin-left:auto; }
.sitenav .nav-logo.mob{ display:none; }
/* below ~860px the chips + logo no longer share one row and the logo would wrap onto a
   lonely second line — drop it until the mobile bar takes over and re-centres it */
@media (max-width:860px){ .sitenav .nav-logo.desk{ display:none; } }
.sitenav .nchip{ display:inline-flex; align-items:center; text-decoration:none; cursor:pointer;
  font-weight:800; font-size:15px; color:#2a2013; background:#fff8e8;
  border:3px solid #2a2013; border-radius:14px; padding:12px 20px;
  box-shadow:0 4px 0 rgba(42,32,19,.28); transition:transform .08s, box-shadow .08s; white-space:nowrap; }
.sitenav .nchip:hover{ background:#fff3d0; }
.sitenav .nchip:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(42,32,19,.28); }
.sitenav .nchip.home{ background:#ffc21f; color:#3a2a05; }
.sitenav .nchip.on{ background:linear-gradient(160deg,#57c757,#2f7d2f); color:#fff;
  box-shadow:0 4px 0 rgba(42,32,19,.35); }

/* ---- the drawer ---- */
.sitenav .nav-drawer{ overflow:hidden; max-height:0; margin-top:0;
  transition:max-height .36s cubic-bezier(.4,0,.2,1), margin-top .36s cubic-bezier(.4,0,.2,1); }
.sitenav.open .nav-drawer{ margin-top:10px; }
.sitenav .nav-sub{ display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding-top:10px; border-top:2px dashed rgba(42,32,19,.22); }
.sitenav .schip{ display:inline-flex; align-items:center; text-decoration:none;
  font-weight:800; font-size:14px; color:#2a2013; background:#ffe9bf;
  border:3px solid #2a2013; border-radius:12px; padding:9px 16px;
  box-shadow:0 3px 0 rgba(42,32,19,.26); white-space:nowrap;
  opacity:0; transform:translateY(-14px);
  transition:opacity .26s ease, transform .34s cubic-bezier(.34,1.28,.64,1); }
.sitenav.open .schip{ opacity:1; transform:translateY(0); }
.sitenav .schip:hover{ background:#fff3d0; }
.sitenav .schip.on{ background:#ffc21f; color:#3a2a05; }
/* cascade the sub-chips in as the drawer opens */
.sitenav.open .schip:nth-child(1){ transition-delay:.08s; }
.sitenav.open .schip:nth-child(2){ transition-delay:.13s; }
.sitenav.open .schip:nth-child(3){ transition-delay:.18s; }
.sitenav.open .schip:nth-child(4){ transition-delay:.23s; }
.sitenav.open .schip:nth-child(5){ transition-delay:.28s; }

/* ---- anti-flicker ----
   The nav markup is stamped into every page, so it paints immediately with the rest of the page —
   nothing is injected and nothing shifts. Each page still ships its old per-page <nav> in the
   HTML; this stylesheet is render-blocking, so hiding them here means they never paint at all.
   (Includes the stat board's #modeNav, whose modes are now this nav's Stats sub-row.) */
nav:not(.sitenav){ display:none !important; }

@media (prefers-reduced-motion:reduce){
  .sitenav .nav-drawer, .sitenav .nav-main, .sitenav .schip, .sitenav .nchip{ transition:none; }
}

/* the mobile bar is unused on desktop */
.sitenav .nav-bar{ display:none; }

/* ---- MOBILE (<=800px, where the 7 category chips stop fitting on one row) ----
   One compact bar: [☰ categories] current category [current subpage ▾].
   Each burger opens a vertical panel using the same drawer motion; only one opens at a time. */
@media (max-width:800px){
  .sitenav{ padding:8px 9px; }

  .sitenav .nav-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  /* sits next to the ☰ on the left; the auto margin shoves the sub-burger over to the right edge */
  .sitenav .nav-logo.mob{ display:block; height:34px; margin-right:auto; pointer-events:none; }
  .sitenav .nav-burger{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; cursor:pointer;
    max-width:60%; font-family:'Luckiest Guy', cursive; font-weight:400; font-size:14px;
    color:#3a2a05; background:#ffc21f; border:3px solid #2a2013; border-radius:12px; padding:9px 13px;
    box-shadow:0 3px 0 rgba(42,32,19,.28); transition:transform .08s, box-shadow .08s; }
  .sitenav .nav-burger:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(42,32,19,.28); }
  .sitenav .nav-burger.sub{ background:#ffe9bf; color:#2a2013; }
  .sitenav .nav-burger .blabel{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sitenav .nav-burger .bicon{ font-family:system-ui, sans-serif; font-size:15px; line-height:1; }
  .sitenav .nav-burger.main[aria-expanded="true"]{ background:linear-gradient(160deg,#57c757,#2f7d2f); color:#fff; }
  .sitenav .nav-burger.sub[aria-expanded="true"]{ background:#ffc21f; color:#3a2a05; }

  /* categories panel (left burger) */
  .sitenav .nav-main{ flex-direction:column; align-items:stretch; gap:6px; flex-wrap:nowrap;
    overflow:hidden; max-height:0; margin-top:0;
    transition:max-height .32s cubic-bezier(.4,0,.2,1), margin-top .32s cubic-bezier(.4,0,.2,1); }
  .sitenav.main-open .nav-main{ margin-top:10px; }
  .sitenav .nchip{ width:100%; justify-content:flex-start; font-size:15px; padding:11px 14px; border-radius:12px;
    opacity:0; transform:translateY(-10px);
    transition:opacity .24s ease, transform .3s cubic-bezier(.34,1.28,.64,1); }
  .sitenav.main-open .nchip{ opacity:1; transform:translateY(0); }
  .sitenav.main-open .nchip:nth-child(1){ transition-delay:.05s; }
  .sitenav.main-open .nchip:nth-child(2){ transition-delay:.09s; }
  .sitenav.main-open .nchip:nth-child(3){ transition-delay:.13s; }
  .sitenav.main-open .nchip:nth-child(4){ transition-delay:.17s; }
  .sitenav.main-open .nchip:nth-child(5){ transition-delay:.21s; }
  .sitenav.main-open .nchip:nth-child(6){ transition-delay:.25s; }
  .sitenav.main-open .nchip:nth-child(7){ transition-delay:.29s; }

  /* subpages panel (right burger) — reuses .nav-drawer / .open */
  .sitenav .nav-sub{ flex-direction:column; align-items:stretch; flex-wrap:nowrap; }
  .sitenav .schip{ width:100%; justify-content:flex-start; font-size:14px; padding:10px 14px; }
}