/* ---------------------------------------------------------------------------
   LTF site nav — shared stylesheet

   Used by the arcade hub (/arcade) and the five /arcade/<slug> game pages.
   Paired with /js/site-nav.js, which drives the mobile hamburger. The markup
   stays inline in each page, between <!-- LTF-NAV:START --> / <!-- LTF-NAV:END -->
   markers, so the nav is in the served HTML with no flash and no JS dependency.

   Three deliberate departures from the copy that lives inside index.html:

   1. Literal hex, no custom properties. Every game page defines its own --ink,
      --bg and friends — on :root, on body[data-skin], or on body.skin-* — and
      repaints them per vibe. var(--ink) here would render the nav in whatever
      the active skin happens to be (invisible on the rebel and beta skins).
      The nav is site chrome: LTF pink and navy on white, always.

   2. position:relative by default; sticky is opt-in via body.nav-sticky. The
      hub opts in — it is a browse page and the bar should follow you down it.
      Game pages do not: a persistent 62px bar eats the fold the board sizing
      is tuned against, and hovers over live play. It must stay a POSITIONED
      element either way, which is why the default is relative and not static:
      .nav-mobile below is position:absolute; top:100%, and it anchors to the
      bar only while the bar is positioned. Under position:static the dropdown
      would escape the bar and land against the page instead.

   3. z-index 30, not 150. Game pages put full-screen takeovers above the page
      — Fab Oracle's .share-view at 50, Fab Fortunes' modal at 40 — and those
      should cover the nav, not fight it. 30 still clears ordinary page content,
      which tops out around 5.

   Pages with horizontal body padding need the bar pulled full-bleed with a
   negative margin (see Fabaconda); width:100% alone resolves against the
   padded content box and leaves skin background showing down both edges.

   The homepage's .nav-waitlist-pill variant is not represented here; these
   six pages all use the pill-free about/contact markup.
   --------------------------------------------------------------------------- */

.site-nav-bar{ box-sizing:border-box; width:100%; align-self:stretch; flex:0 0 auto;
  background:#FFFFFF; border-bottom:3px solid #FF1493; padding:0 1.5rem;
  display:flex; align-items:center; justify-content:space-between; height:62px;
  position:relative; z-index:30; box-shadow:0 2px 12px rgba(255,20,147,.1); }
body.nav-sticky .site-nav-bar{ position:sticky; top:0; }
.nav-logo{ display:flex; align-items:center; text-decoration:none; }
.nav-logo img{ height:48px; width:auto; display:block; }
.nav-links{ display:flex; gap:1.75rem; }
.nav-links a{ font-family:'Nunito',system-ui,sans-serif; font-size:.875rem; font-weight:700; color:#1C1C1C;
  text-decoration:none; letter-spacing:.03em; transition:color .15s; }
.nav-links a:hover{ color:#FF1493; }
.nav-links a.active{ color:#FF1493; border-bottom:2.5px solid #FF1493; padding-bottom:2px; }
.nav-hamburger{ display:none; background:none; border:none; color:#1C1C1C; font-size:1.6rem;
  cursor:pointer; padding:.3rem; min-width:44px; min-height:44px; align-items:center;
  justify-content:center; line-height:1; }
.nav-mobile{ display:none; box-sizing:border-box; background:#FFFFFF; border-bottom:3px solid #FF1493;
  padding:.5rem 1.5rem 1rem; position:absolute; top:100%; left:0; right:0; z-index:29;
  box-shadow:0 8px 20px rgba(0,0,0,.08); }
.nav-mobile.open{ display:flex; flex-direction:column; gap:.3rem; }
.nav-mobile a{ font-family:'Nunito',system-ui,sans-serif; font-size:1rem; font-weight:700; color:#1C1C1C;
  text-decoration:none; padding:.6rem .5rem; border-radius:6px; transition:background .13s,color .13s; }
.nav-mobile a:hover,.nav-mobile a.active{ color:#FF1493; background:rgba(255,20,147,.05); }
@media (max-width:768px){
  /* 52px, not 62px: the fold rule the game boards are sized against is a phone-viewport
     rule, so the chrome pays for itself here rather than the board paying for all of it.
     The hamburger's 44px minimum touch target still fits, as does the 36px logo. */
  .site-nav-bar{ height:52px; }
  .nav-links{ display:none; }
  .nav-hamburger{ display:flex; }
  .nav-logo img{ height:36px; }
}
@media (prefers-reduced-motion: reduce){
  .nav-links a,.nav-mobile a{ transition:none; }
}