/* Site-wide nav (same on every public page): glitter BYODJ logo + the homepage-2 chrome pill buttons.
   Markup comes from backend/scripts/site-nav.html (npm run sync-nav stamps it into each page). */
.bn-top{position:sticky;top:0;z-index:900;padding-top:env(safe-area-inset-top,0px);background:linear-gradient(#16001ff7,#2b0040f2);border-bottom:3px solid #ff1f6e;box-shadow:0 4px 0 #0007}
header.bn-top{backdrop-filter:none;-webkit-backdrop-filter:none}
.bn-bar{display:flex;align-items:center;gap:8px 18px;max-width:1180px;margin:0 auto;padding:10px 16px;box-sizing:border-box}
.bn-logo{flex:none;display:inline-block;padding:2px 6px 4px 2px;text-decoration:none;font:400 46px/1 "Rubik Bubbles","Sniglet","Comic Sans MS",cursive;letter-spacing:.01em;
  transform:skew(-8deg) rotate(-3deg);filter:drop-shadow(2px 2px 0 #000) drop-shadow(0 0 8px #fff8);
  background:
    radial-gradient(circle at 30% 30%,#fff 0 .9px,transparent 1.6px) 0 0/8px 8px,
    radial-gradient(circle at 70% 60%,#fff 0 .9px,transparent 1.7px) 0 0/13px 11px,
    linear-gradient(90deg,#ff1f6e,#fff35c,#19f0ff,#7a1fff,#ff1f6e) 0 0/300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:bn-glit 3.5s linear infinite}
.bn-logo:hover{filter:drop-shadow(2px 2px 0 #000) drop-shadow(0 0 14px #fffb)}
@keyframes bn-glit{to{background-position:8px 8px,-13px 11px,300% 0}}
.bn-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;flex:1;min-width:0}
.bn-btn{display:inline-block;flex:none;white-space:nowrap;text-decoration:none;font:700 12px/1 "Silkscreen","Courier New",monospace;letter-spacing:.05em;text-transform:uppercase;
  color:#fff;padding:9px 14px;border-radius:999px;border:2px solid #16001f;
  background:linear-gradient(180deg,#ffffffcc 0 12%,#ff1f6e 45%,#a3006e 100%);box-shadow:inset 0 2px 0 #ffffff99,0 3px 0 #16001f;text-shadow:1px 1px 0 #16001f;transition:transform .08s}
.bn-btn:hover{color:#fff;filter:brightness(1.1)}
.bn-btn:active{transform:translateY(2px);box-shadow:inset 0 2px 0 #ffffff99,0 1px 0 #16001f}
.bn-btn.cy{background:linear-gradient(180deg,#ffffffcc 0 12%,#14c8ff 45%,#004d9e 100%)}
.bn-btn.li{background:linear-gradient(180deg,#ffffffcc 0 12%,#6fe000 45%,#2d6b00 100%)}
.bn-btn.gr{background:linear-gradient(180deg,#ffffffcc 0 12%,#a24bff 45%,#3d0090 100%)}
.bn-btn[aria-current="page"]{outline:3px solid #fff35c;outline-offset:2px}
.bn-btn:focus-visible,.bn-logo:focus-visible{outline:3px dashed #fff35c;outline-offset:3px}
@media (max-width:900px){
  .bn-bar{flex-direction:column;align-items:stretch;gap:6px;padding:8px 0}
  .bn-logo{align-self:center;font-size:38px}
  .bn-links{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding:6px 48px 8px 16px}
  .bn-links::-webkit-scrollbar{display:none}
  /* the row scrolls sideways: the right edge fades out so u can tell there's more. where the browser
     can follow the scroll, the fade moves 2 the left side once u scroll + goes away at the end */
  .bn-links{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),#0000)}
  @supports (animation-timeline:scroll()){
    .bn-links{--fl:0px;--fr:56px;-webkit-mask-image:linear-gradient(90deg,#0000,#000 var(--fl),#000 calc(100% - var(--fr)),#0000);
      mask-image:linear-gradient(90deg,#0000,#000 var(--fl),#000 calc(100% - var(--fr)),#0000);animation:bn-fade linear both;animation-timeline:scroll(self inline)}
  }
}
/* same fade 4 other sideways-scrolling rows (profile jump links) */
@media (max-width:820px){
  .bn-scrollx{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),#0000)}
  @supports (animation-timeline:scroll()){
    .bn-scrollx{-webkit-mask-image:linear-gradient(90deg,#0000,#000 var(--fl),#000 calc(100% - var(--fr)),#0000);
      mask-image:linear-gradient(90deg,#0000,#000 var(--fl),#000 calc(100% - var(--fr)),#0000);animation:bn-fade linear both;animation-timeline:scroll(self inline)}
  }
}
@property --fl{syntax:"<length>";inherits:false;initial-value:0px}
@property --fr{syntax:"<length>";inherits:false;initial-value:56px}
@keyframes bn-fade{0%{--fl:0px;--fr:56px}10%{--fl:40px}90%{--fr:56px}100%{--fl:40px;--fr:0px}}
@media (prefers-reduced-motion:reduce){.bn-logo{animation:none}}

/* ---------- phones: every link + button is a real tap target (≥ 32px tall, ≥ 8px apart) ----------
   site-nav.css loads on every public page, so the shared bits (footers, myspot boxes, IM FAQ chips,
   Win98 tabs + title-bar buttons, Spotify links) get fixed here once. Inline links inside sentences r left alone. */
@media (max-width:820px){
  /* footers */
  .sitemap,.foot .links,.mkt-footer-links,.app-footer-links{gap:6px 8px!important}
  .sitemap a,.foot .links a,.mkt-footer-links a,.app-footer-links a{display:inline-flex!important;align-items:center;min-height:36px;padding:0 6px}
  /* myspot boxes */
  .contact{gap:8px 10px!important}
  .contact a{min-height:36px}
  .itab td > a:only-child{display:inline-flex;align-items:center;min-height:32px}
  .ms-top nav{gap:4px 6px!important}
  .ms-top nav a{display:inline-flex;align-items:center;min-height:36px;padding:0 6px}
  .bull-head a{display:inline-flex;align-items:center;min-height:36px}
  .fr-act a,.box-pad > a,.board-foot a,.pvbar a,.where a,.nm a,.event-back,.fb2-hero-scroll{display:inline-flex;align-items:center;min-height:36px}
  .box-pad:has(> a + a){display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .gbx-when a{display:inline-block;padding:6px 0}
  /* IM FAQ chips */
  .faq-btns{gap:8px!important}
  .faq-btns .win98-btn{min-height:38px;padding:6px 10px!important;font-size:12px!important}
  /* Win98 tabs: no overlap on phones */
  .tabs[role="tablist"]{gap:6px;padding:8px 8px 0}
  .tabs[role="tablist"] button{margin-right:0!important;min-height:36px;border-radius:4px 4px 0 0}
  /* Win98 title-bar buttons that actually do something */
  .win-btns button,.win-btns a{min-width:30px!important;min-height:28px!important}
  .msgblk .x{min-width:36px;min-height:36px}
  /* tabs + sort chips + preview bars */
  .ms-tabs,.sorts,.pv{gap:8px!important}
  .ms-tabs button,.sorts button{min-height:38px}
  .pv button{min-height:34px}
  /* little "( read more )" links on the homepage blog */
  .lj .cut,.lj-foot a{display:inline-flex;align-items:center;min-height:36px}
  .lj-foot{gap:8px 14px!important}
  /* guestbook-style ▲▼ votes */
  .votes{gap:10px!important}
  .votes button{min-width:40px;min-height:36px}
  /* Spotify links on recaps + host pages */
  .songs .v a,.amp li .v a{display:inline-flex!important;align-items:center;min-height:32px;padding:0 4px;font-size:11px!important}
  /* other ways 2 reach us (contact) + stacked clip links */
  .ways{gap:4px!important}
  .ways a{min-height:40px;align-items:center!important}
  .clip-link + .clip-link{margin-top:12px!important}
  /* privacy policy table of contents */
  .toc li{margin:8px 0!important}
  .toc a{display:inline-flex;align-items:center;min-height:36px}
  p > a[href^="mailto:"]:only-child{display:inline-flex;align-items:center;min-height:36px}
}