/* ==========================================================================
   DAILY PAWS — SHARED NAVBAR
   shared/css/nav.css · the one stylesheet for the global masthead and menu.
   --------------------------------------------------------------------------
   Loaded by every page, AFTER that page's own stylesheets. Deliberately
   self-contained and deliberately narrow: it defines the tokens it needs,
   the masthead, the mobile menu, the account chip and the game-button slot,
   and nothing else. No reset, no body styles, no element selectors — a game
   page must be able to load this without its own layout shifting.

   The markup is built by nav.js. Change it in one place, it changes
   everywhere.
   ========================================================================== */

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root{
  --dp-paper:      #F7F2E8;
  --dp-ink:        #1F150C;
  --dp-ink-soft:   #3D2D1E;
  --dp-muted:      #7B6751;
  --dp-line:       rgba(31,21,12,.13);
  --dp-line-firm:  rgba(31,21,12,.26);
  --dp-rust:       #BF4E1C;
  --dp-rust-deep:  #8F380F;
  --dp-amber:      #C98526;
  --dp-moss:       #5C7647;
  --dp-night:      #150E08;
  --dp-cream:      #F4EAD6;
  --dp-cream-mute: rgba(244,234,214,.60);
  --dp-night-line: rgba(244,234,214,.14);

  --dp-f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --dp-f-sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --dp-f-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --dp-gutter: clamp(20px,5vw,72px);
  --dp-e-out:cubic-bezier(.16,.84,.44,1);
  --dp-e-io:cubic-bezier(.62,.03,.32,1);
  --dp-e-spring:cubic-bezier(.32,1.32,.5,1);

  --nav-h: 64px;
}
@media (min-width:480px){ :root{ --nav-h:72px } }
@media (min-width:600px){ :root{ --nav-h:76px } }
@media (max-height:600px){ :root{ --nav-h:60px } }

/* The three games reserve space above their boards with their own variables.
   Hand them this masthead's height so the play area sits exactly where it
   always did, and nothing in the games themselves has to change. */
body.is-game-page{
  --pw-topbar-h:calc(var(--nav-h) + 8px);
  --cp-topbar-h:calc(var(--nav-h) + 8px);
  --pp-topbar-h:calc(var(--nav-h) + 8px);
  --pl-topbar-h:calc(var(--nav-h) + 8px);
  --cm-topbar-h:calc(var(--nav-h) + 8px);
}

/* ── Masthead ──────────────────────────────────────────────────────────── */
.dp-masthead{
  position:fixed; inset:0 0 auto 0; z-index:300;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(247,242,232,.82);
  color:var(--dp-ink);
  font-family:var(--dp-f-sans);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  backdrop-filter:blur(18px) saturate(1.25);
  border:0;
  transition:background .45s var(--dp-e-out);
}

/* A page that puts the masthead over its own artwork (the front page hero)
   keeps it invisible until the page has moved. */
.dp-masthead--over:not(.is-stuck){
  background:linear-gradient(180deg,rgba(14,9,4,.70),rgba(14,9,4,.24) 68%,rgba(14,9,4,0));
  -webkit-backdrop-filter:none; backdrop-filter:none;
  color:var(--dp-cream);
}
/* Keep desktop labels legible over the light parts of the hero without
   turning the header into a solid bar. The extra tail continues below the
   masthead so the treatment dissolves into the photograph without an edge. */
@media (min-width:960px){
  .dp-masthead--over:not(.is-stuck):not(.menu-open){
    background:transparent;
    isolation:isolate;
  }
  .dp-masthead--over:not(.is-stuck):not(.menu-open)::after{
    content:"";
    position:absolute; inset:0 0 auto;
    height:calc(var(--nav-h) + 34px);
    background:linear-gradient(180deg,
      rgba(20,13,7,.80) 0%,
      rgba(20,13,7,.58) 46%,
      rgba(20,13,7,.28) 76%,
      rgba(20,13,7,0) 100%);
    pointer-events:none;
    z-index:0;
  }
}
/* With the menu open the burger's X has to read clearly against whatever
   photo sits behind it, so the "over" transparency is dropped in favour of
   the masthead's normal solid surface for as long as the panel is up. */
.dp-masthead--over.menu-open{
  background:rgba(247,242,232,.96);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
          backdrop-filter:blur(18px) saturate(1.25);
  color:var(--dp-ink);
}
.dp-dark .dp-masthead--over.menu-open,
body.is-game-page:not(.light) .dp-masthead--over.menu-open{
  background:rgba(18,12,6,.96);
  color:var(--dp-cream);
}

/* Dark surfaces: the games at night, and any page that opts in. A game page
   that also opts its masthead "over" its own artwork keeps that transparency
   until it's scrolled (.is-stuck) or the mobile menu is open, matching the
   front page's treatment instead of sitting on a solid bar the whole time. */
.dp-dark .dp-masthead,
body.is-game-page:not(.light) .dp-masthead:not(.dp-masthead--over),
body.is-game-page:not(.light) .dp-masthead--over.is-stuck:not(.menu-open){
  background:rgba(18,12,6,.78);
  color:var(--dp-cream);
}

.dp-masthead-inner{
  width:100%; max-width:1440px; margin-inline:auto; padding-inline:var(--dp-gutter);
  display:flex; align-items:center; gap:clamp(14px,2.2vw,38px);
  position:relative; z-index:1;
}

/* ── Brand ─────────────────────────────────────────────────────────────── */
.dp-brand{
  display:inline-flex; align-items:center; gap:12px; flex:none; margin-right:auto;
  color:inherit; text-decoration:none;
}
.dp-brand-mark{ width:37px; height:37px; flex:none; display:block;
                transition:transform .55s var(--dp-e-spring) }
.dp-brand:hover .dp-brand-mark{ transform:rotate(-7deg) scale(1.06) }
.dp-brand-mark--cream{ display:none }
.dp-dark .dp-brand-mark--ink,
body.is-game-page:not(.light) .dp-brand-mark--ink,
.dp-masthead--over:not(.is-stuck) .dp-brand-mark--ink{ display:none }
.dp-dark .dp-brand-mark--cream,
body.is-game-page:not(.light) .dp-brand-mark--cream,
.dp-masthead--over:not(.is-stuck) .dp-brand-mark--cream{ display:block }
.dp-brand-word{
  font-family:var(--dp-f-display); font-weight:600; font-size:1.14rem;
  letter-spacing:-.014em; white-space:nowrap; color:inherit;
}
@media (min-width:480px){ .dp-brand-mark{ width:42px; height:42px } .dp-brand-word{ font-size:1.24rem } }

/* ── Desktop links ─────────────────────────────────────────────────────── */
/* Title Case in the body sans, a touch of tracking, and rhythm carried by the
   space between links. Game Guides takes a wider gap to set the utility links
   apart from the games; no divider. */
.dp-nav{ display:none; align-items:center; gap:clamp(18px,2.3vw,34px) }
.dp-nav > a{
  position:relative; font-size:.9375rem; font-weight:520; letter-spacing:.02em;
  color:var(--dp-ink-soft); text-decoration:none; white-space:nowrap;
  padding-block:6px; transition:color .3s var(--dp-e-out);
}
.dp-nav > a[href="/game-guides.html"]{ margin-left:clamp(6px,1.1vw,16px) }
.dp-dark .dp-nav > a,
body.is-game-page:not(.light) .dp-nav > a,
.dp-masthead--over:not(.is-stuck) .dp-nav > a{ color:var(--dp-cream) }
/* A hairline in the brand accent: faint on hover, full on the current page */
.dp-nav > a::after{
  content:""; position:absolute; left:0; right:0; bottom:1px; height:1px;
  background:var(--dp-rust); opacity:0; transform:scaleX(.6); transform-origin:left;
  transition:transform .42s var(--dp-e-out), opacity .3s var(--dp-e-out);
}
.dp-dark .dp-nav > a::after,
body.is-game-page:not(.light) .dp-nav > a::after,
.dp-masthead--over:not(.is-stuck) .dp-nav > a::after{ background:var(--dp-amber) }
.dp-nav > a:hover,
.dp-nav > a:focus-visible{ color:var(--dp-ink) }
.dp-dark .dp-nav > a:hover,
.dp-dark .dp-nav > a:focus-visible,
body.is-game-page:not(.light) .dp-nav > a:hover,
body.is-game-page:not(.light) .dp-nav > a:focus-visible,
.dp-masthead--over:not(.is-stuck) .dp-nav > a:hover,
.dp-masthead--over:not(.is-stuck) .dp-nav > a:focus-visible{ color:var(--dp-cream) }
.dp-nav > a:hover::after,
.dp-nav > a:focus-visible::after{ opacity:.45; transform:scaleX(1) }
.dp-nav > a[aria-current="page"]::after{ opacity:1; transform:scaleX(1) }
.dp-nav > a:focus-visible{ outline:1px solid var(--dp-rust); outline-offset:6px; border-radius:2px }
.dp-dark .dp-nav > a:focus-visible,
body.is-game-page:not(.light) .dp-nav > a:focus-visible,
.dp-masthead--over:not(.is-stuck) .dp-nav > a:focus-visible{ outline-color:var(--dp-amber) }
.dp-nav > a[aria-current="page"]{ color:var(--dp-ink) }
.dp-dark .dp-nav > a[aria-current="page"],
body.is-game-page:not(.light) .dp-nav > a[aria-current="page"],
.dp-masthead--over:not(.is-stuck) .dp-nav > a[aria-current="page"]{ color:var(--dp-cream) }
@media (min-width:960px){ .dp-nav{ display:flex } }

/* ── Right-hand cluster ────────────────────────────────────────────────── */
.dp-mast-end{ display:flex; align-items:center; gap:8px; flex:none; margin-left:auto }

/* The three games drop their own controls in here (nav.js moves them across
   from #cp-game-btn-source). Their look is inherited from the games. */
.dp-game-slot{ display:flex; align-items:center; gap:6px }
.dp-game-slot:empty{ display:none }
.dp-masthead .pw-icon-btn{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:999px; background:transparent; color:inherit;
  border:1px solid var(--dp-line-firm);
  transition:background .25s var(--dp-e-out), border-color .25s var(--dp-e-out);
}
.dp-masthead .pw-icon-btn:hover{ background:rgba(31,21,12,.06) }
.dp-masthead .pw-icon-btn svg{ width:17px; height:17px }
/* Same 38px circle as the icon buttons beside it. The size is stated
   outright because shared/css/pages.css still gives .pw-streak a 44px circle. */
.dp-masthead .pw-streak{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:38px; height:38px; padding:0; flex:none; border-radius:999px;
  background:transparent; color:inherit;
  border:1px solid var(--dp-line-firm);
  font-family:var(--dp-f-mono);
}
.dp-masthead .pw-streak-num{ font-family:var(--dp-f-mono); font-size:11px; font-weight:500 }
.dp-masthead .pw-streak-icon{ display:block; font-size:13px; filter:none }
.dp-masthead .pw-streak-icon svg{ display:block; width:13px; height:13px }
.dp-dark .dp-masthead .pw-icon-btn,
.dp-dark .dp-masthead .pw-streak,
body.is-game-page:not(.light) .dp-masthead .pw-icon-btn,
body.is-game-page:not(.light) .dp-masthead .pw-streak,
.dp-masthead--over:not(.is-stuck) .pw-icon-btn,
.dp-masthead--over:not(.is-stuck) .pw-streak{ border-color:rgba(244,234,214,.28) }
.dp-dark .dp-masthead .pw-icon-btn:hover,
body.is-game-page:not(.light) .dp-masthead .pw-icon-btn:hover{ background:rgba(244,234,214,.12) }

/* ── Account chip (markup rendered by nav.js into #cp-auth-slot) ───────── */
.dp-auth-slot{ display:flex; align-items:center }
.dp-auth-slot:empty{ display:none }
.dp-auth-slot .cp-auth{ position:relative }
.dp-auth-slot .cp-auth-signin{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; padding:0 18px; border-radius:999px; text-decoration:none;
  border:1px solid var(--dp-line-firm); color:inherit;
  font-family:var(--dp-f-sans); font-size:.8125rem; font-weight:600; letter-spacing:.01em;
  transition:background .25s var(--dp-e-out), border-color .25s var(--dp-e-out);
}
.dp-auth-slot .cp-auth-signin:hover{ background:rgba(31,21,12,.06) }
.dp-dark .dp-auth-slot .cp-auth-signin,
body.is-game-page:not(.light) .dp-auth-slot .cp-auth-signin,
.dp-masthead--over:not(.is-stuck) .dp-auth-slot .cp-auth-signin{ border-color:rgba(244,234,214,.42) }
.dp-dark .dp-auth-slot .cp-auth-signin:hover,
body.is-game-page:not(.light) .dp-auth-slot .cp-auth-signin:hover,
.dp-masthead--over:not(.is-stuck) .dp-auth-slot .cp-auth-signin:hover{ background:rgba(244,234,214,.14) }
/* Below the desktop breakpoint the pill gives way to the menu's sign-in row */
@media (max-width:959px){ .dp-auth-slot .cp-auth-signin{ display:none } }

.dp-auth-slot .cp-auth-toggle{
  display:inline-flex; align-items:center; gap:8px; max-width:150px;
  min-height:38px; padding:0 14px; border-radius:999px;
  background:transparent; border:1px solid var(--dp-line-firm); color:inherit;
  font-family:var(--dp-f-sans); font-size:.8125rem; font-weight:600; cursor:pointer;
  transition:background .25s var(--dp-e-out), border-color .25s var(--dp-e-out);
}
.dp-auth-slot .cp-auth-toggle:hover{ background:rgba(31,21,12,.06) }
.dp-dark .dp-auth-slot .cp-auth-toggle,
body.is-game-page:not(.light) .dp-auth-slot .cp-auth-toggle,
.dp-masthead--over:not(.is-stuck) .dp-auth-slot .cp-auth-toggle{ border-color:rgba(244,234,214,.32) }
.dp-auth-slot .cp-auth-dot{ width:7px; height:7px; border-radius:50%; background:var(--dp-moss); flex:none }
.dp-masthead--over:not(.is-stuck) .dp-auth-slot .cp-auth-dot,
body.is-game-page:not(.light) .dp-auth-slot .cp-auth-dot{ background:#8FA86F }
.dp-auth-slot .cp-auth-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.dp-auth-slot .cp-auth-menu{
  position:absolute; top:calc(100% + 10px); right:0; z-index:600; min-width:190px; padding:14px;
  background:var(--dp-paper); color:var(--dp-ink);
  border:1px solid var(--dp-line); border-radius:13px;
  box-shadow:0 22px 48px -22px rgba(31,21,12,.55);
}
.dp-auth-slot .cp-auth-as{ display:block; font-size:.75rem; line-height:1.5;
                           color:var(--dp-muted); margin-bottom:12px }
.dp-auth-slot .cp-auth-as strong{ color:var(--dp-ink); font-weight:600 }
.dp-auth-slot .cp-auth-signout{
  display:block; width:100%; min-height:38px; padding:0 14px; border:0; border-radius:999px;
  background:var(--dp-rust); color:#FFF6EA; cursor:pointer;
  font-family:var(--dp-f-sans); font-size:.8125rem; font-weight:600;
  transition:background .25s var(--dp-e-out);
}
.dp-auth-slot .cp-auth-signout:hover{ background:var(--dp-rust-deep) }
@media (max-width:409px){ .dp-auth-slot .cp-auth-toggle{ max-width:104px; padding:0 11px } }

/* ── Burger ────────────────────────────────────────────────────────────── */
.dp-burger{
  width:42px; height:42px; display:grid; place-items:center; flex:none;
  background:none; cursor:pointer; color:inherit;
  border-radius:999px; border:1px solid var(--dp-line);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:background .3s var(--dp-e-out), border-color .3s var(--dp-e-out);
}
.dp-dark .dp-burger,
body.is-game-page:not(.light) .dp-burger,
.dp-masthead--over:not(.is-stuck) .dp-burger{ border-color:rgba(244,234,214,.28) }
.dp-burger:hover{ background:rgba(31,21,12,.05) }
.dp-burger-lines{ position:relative; width:18px; height:12px; display:block }
.dp-burger-lines span{
  position:absolute; left:0; right:0; height:2px; border-radius:2px; background:currentColor;
  transition:transform .4s var(--dp-e-io), opacity .22s linear;
}
.dp-burger-lines span:nth-child(1){ top:0 }
.dp-burger-lines span:nth-child(2){ top:50%; margin-top:-1px }
.dp-burger-lines span:nth-child(3){ bottom:0 }
.dp-burger[aria-expanded="true"] .dp-burger-lines > span:nth-child(1){ transform:translateY(5px) rotate(45deg) }
.dp-burger[aria-expanded="true"] .dp-burger-lines > span:nth-child(2){ opacity:0; transform:scaleX(.4) }
.dp-burger[aria-expanded="true"] .dp-burger-lines > span:nth-child(3){ transform:translateY(-5px) rotate(-45deg) }
@media (min-width:960px){ .dp-burger{ display:none } }

/* ── Mobile menu ───────────────────────────────────────────────────────── */
.dp-menu{
  position:fixed; inset:0; z-index:290;
  background:var(--dp-paper); color:var(--dp-ink);
  font-family:var(--dp-f-sans);
  padding:calc(var(--nav-h) + 24px) var(--dp-gutter) 32px;
  display:flex; flex-direction:column;
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden;
  transition:opacity .38s var(--dp-e-out), visibility .38s;
}
.dp-dark .dp-menu,
body.is-game-page:not(.light) .dp-menu{ background:#150E08; color:var(--dp-cream) }
.dp-menu[hidden]{ display:none !important }
.dp-menu.is-open{ opacity:1; visibility:visible }
.dp-menu-list{ display:flex; flex-direction:column; border-top:1px solid var(--dp-line) }
.dp-dark .dp-menu-list,
body.is-game-page:not(.light) .dp-menu-list{ border-color:var(--dp-night-line) }
.dp-menu-list > a{
  display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit;
  padding:14px 2px; border-bottom:1px solid var(--dp-line);
  opacity:0; transform:translateY(14px);
}
.dp-dark .dp-menu-list a,
body.is-game-page:not(.light) .dp-menu-list a{ border-color:var(--dp-night-line) }
.dp-menu.is-open .dp-menu-list > a{ animation:dpMenuIn .55s var(--dp-e-out) forwards }
.dp-menu.is-open .dp-menu-list > a:nth-of-type(1){ animation-delay:.05s }
.dp-menu.is-open .dp-menu-list > a:nth-of-type(2){ animation-delay:.10s }
.dp-menu.is-open .dp-menu-list > a:nth-of-type(3){ animation-delay:.15s }
.dp-menu.is-open .dp-menu-list > a:nth-of-type(4){ animation-delay:.20s }
.dp-menu.is-open .dp-menu-list > a:nth-of-type(5){ animation-delay:.25s }
@keyframes dpMenuIn{ to{ opacity:1; transform:none } }
.dp-menu-thumb{
  width:54px; height:54px; flex:none; border-radius:9px; overflow:hidden;
  background:rgba(31,21,12,.06); display:block;
}
.dp-dark .dp-menu-thumb,
body.is-game-page:not(.light) .dp-menu-thumb{ background:rgba(244,234,214,.07) }
.dp-menu-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.dp-menu-num{ font-family:var(--dp-f-mono); font-size:.6875rem; letter-spacing:.14em;
              color:var(--dp-rust); flex:none; width:22px; align-self:flex-start; padding-top:.35em }
.dp-dark .dp-menu-num,
body.is-game-page:not(.light) .dp-menu-num{ color:var(--dp-amber) }
.dp-menu-name{ font-family:var(--dp-f-display); font-weight:600;
               font-size:clamp(1.45rem,6.6vw,2rem); letter-spacing:-.02em; line-height:1.05 }
.dp-menu-sub{ margin-left:auto; font-size:.75rem; color:var(--dp-muted);
              text-align:right; max-width:9em; line-height:1.35 }
.dp-dark .dp-menu-sub,
body.is-game-page:not(.light) .dp-menu-sub{ color:var(--dp-cream-mute) }
.dp-menu-list a[aria-current="page"] .dp-menu-name{ color:var(--dp-rust) }
.dp-dark .dp-menu-list a[aria-current="page"] .dp-menu-name,
body.is-game-page:not(.light) .dp-menu-list a[aria-current="page"] .dp-menu-name{ color:var(--dp-amber) }

.dp-menu-foot{ margin-top:auto; padding-top:28px; display:flex; flex-direction:column; gap:14px }
.dp-menu-note{
  font-family:var(--dp-f-mono); font-size:.6875rem; font-weight:500; letter-spacing:.19em;
  text-transform:uppercase; color:var(--dp-muted);
  display:inline-flex; align-items:center; gap:.6em;
}
.dp-menu-note::before{ content:""; width:22px; height:1px; background:currentColor; opacity:.5; flex:none }
.dp-dark .dp-menu-note,
body.is-game-page:not(.light) .dp-menu-note{ color:var(--dp-cream-mute) }

/* nav.js drops the anonymous sign-in link in here on small screens */
#cp-mobile-auth-slot:empty{ display:none }
.dp-menu .cp-mobile-auth-signin{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 24px; border-radius:999px; text-decoration:none;
  border:1px solid var(--dp-line-firm); color:inherit;
  font-size:.9375rem; font-weight:600;
  transition:background .25s var(--dp-e-out);
}
.dp-menu .cp-mobile-auth-signin:hover{ background:rgba(31,21,12,.06) }
.dp-dark .dp-menu .cp-mobile-auth-signin,
body.is-game-page:not(.light) .dp-menu .cp-mobile-auth-signin{ border-color:var(--dp-night-line) }
@media (min-width:960px){ .dp-menu .cp-mobile-auth-signin{ display:none } }

@media (prefers-reduced-motion:reduce){
  .dp-menu.is-open .dp-menu-list > a{ animation:none; opacity:1; transform:none }
}

/* ── Skip link ─────────────────────────────────────────────────────────── */
.dp-skip{
  position:fixed; top:-120px; left:16px; z-index:1000;
  background:var(--dp-ink); color:var(--dp-cream); text-decoration:none;
  padding:12px 20px; border-radius:0 0 7px 7px; font-size:.875rem; font-weight:500;
  font-family:var(--dp-f-sans);
  transition:top .25s var(--dp-e-out);
}
.dp-skip:focus{ top:0 }

/* ── Very small screens: the masthead keeps only what it needs ─────────── */
@media (max-width:409px){
  .dp-masthead-inner{ padding-inline:14px; gap:10px }
  .dp-brand{ gap:9px }
  .dp-mast-end{ gap:5px }
  body.is-game-page .dp-brand-word{ display:none }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .dp-masthead,.dp-menu,.dp-menu-list a,.dp-brand-mark,.dp-burger-lines span{
    transition-duration:.01ms !important; animation-duration:.01ms !important;
  }
}