/* ==========================================================================
   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="/daily-paws/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 } }

/* Narrow desktops have no room to spare: the links close up a little.
   nav.js also sets .dp-nav-compact at any width where the full row would
   not fit (see "Desktop fit"). */
@media (min-width:960px) and (max-width:1199px){
  .dp-nav{ gap:12px }
  .dp-nav > a[href="/daily-paws/game-guides.html"]{ margin-left:4px }
}
@media (min-width:960px){
  .dp-nav-compact .dp-nav{ gap:12px }
  .dp-nav-compact .dp-nav > a[href="/daily-paws/game-guides.html"]{ margin-left:4px }
  /* Next step: the mark stands alone, as it already does on small screens */
  .dp-nav-tight .dp-brand-word{ display:none }
  /* Last step: the desktop row gives way to the menu, sign-in included */
  .dp-nav-collapsed .dp-nav{ display:none }
  .dp-nav-collapsed .dp-burger{ display:grid }
  .dp-nav-collapsed .dp-auth-slot .cp-auth-signin{ display:none }
  .dp-nav-collapsed .dp-menu .cp-mobile-auth-slot{ display:flex }
  .dp-nav-collapsed .dp-menu .cp-mobile-auth-signin{ display:inline-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 } }

/* Reactions inbox: a round icon beside the account, with the unread count. */
.dp-auth-slot .cp-inbox{
  position:relative; display:grid; place-items:center; flex:none;
  width:38px; height:38px; margin-right:8px; border-radius:50%;
  border:1px solid var(--dp-line-firm); color:inherit;
  transition:background .25s var(--dp-e-out), border-color .25s var(--dp-e-out);
}
.dp-auth-slot .cp-inbox svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round }
.dp-auth-slot .cp-inbox:hover{ background:rgba(31,21,12,.06) }
.dp-auth-slot .cp-inbox[aria-current="page"]{ border-color:var(--dp-rust) }
.dp-auth-slot .cp-inbox:focus-visible{ outline:2px solid var(--dp-rust); outline-offset:2px }
.dp-dark .dp-auth-slot .cp-inbox,
body.is-game-page:not(.light) .dp-auth-slot .cp-inbox,
.dp-masthead--over:not(.is-stuck) .dp-auth-slot .cp-inbox{ border-color:rgba(244,234,214,.32) }
.dp-dark .dp-auth-slot .cp-inbox:hover,
body.is-game-page:not(.light) .dp-auth-slot .cp-inbox:hover,
.dp-masthead--over:not(.is-stuck) .dp-auth-slot .cp-inbox:hover{ background:rgba(244,234,214,.14) }
.dp-auth-slot .cp-inbox-badge{
  position:absolute; top:-4px; right:-5px; min-width:18px; height:18px; padding:0 5px;
  display:grid; place-items:center; border-radius:999px;
  background:var(--dp-rust); color:#FFF6EA; box-shadow:0 0 0 2px var(--dp-paper);
  font-family:var(--dp-f-sans); font-size:.625rem; font-weight:700; line-height:1;
}
.dp-auth-slot .cp-inbox-badge[hidden]{ display:none }
.dp-dark .dp-auth-slot .cp-inbox-badge,
body.is-game-page:not(.light) .dp-auth-slot .cp-inbox-badge,
.dp-masthead--over:not(.is-stuck) .dp-auth-slot .cp-inbox-badge{ box-shadow:0 0 0 2px #1A120B }
@media (min-width:960px){ .dp-auth-slot .cp-inbox{ width:34px; height:34px } .dp-auth-slot .cp-inbox svg{ width:15px; height:15px } }

/* ── Desktop scale ─────────────────────────────────────────────────────── */
/* On desktop the masthead keeps its height but steps its type and controls
   down, so it frames the page (and the front page's hero) rather than
   competing with it. Below 960px the sizes above stand unchanged. */
@media (min-width:960px){
  .dp-brand{ gap:11px }
  .dp-brand-mark{ width:38px; height:38px }
  .dp-brand-word{ font-size:1.03rem }
  .dp-nav{ gap:clamp(16px,1.75vw,28px) }
  .dp-nav > a{ font-size:.8rem; font-weight:500; letter-spacing:.03em }
  .dp-nav > a[href="/daily-paws/game-guides.html"]{ margin-left:clamp(4px,.8vw,12px) }
  .dp-masthead .pw-icon-btn,
  .dp-masthead .pw-streak{ width:34px; height:34px }
  .dp-masthead .pw-icon-btn svg{ width:15px; height:15px }
  .dp-masthead .pw-streak-num{ font-size:10px }
  .dp-masthead .pw-streak-icon svg{ width:12px; height:12px }
  .dp-auth-slot .cp-auth-signin{ min-height:34px; padding:0 15px; font-size:.75rem }
  .dp-auth-slot .cp-auth-toggle{ min-height:34px; padding:0 13px; font-size:.75rem }
}
/* Those two pages hold a 44px account chip for touch; a mouse doesn't need it */
@media (min-width:960px) and (hover:hover) and (pointer:fine){
  .pop-body .dp-auth-slot .cp-auth-toggle,
  .my-stats-page .dp-auth-slot .cp-auth-toggle{ min-height:34px }
}

/* ── 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 }
.dp-menu.is-open .dp-menu-list > a:nth-of-type(6){ animation-delay:.30s }
@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) }
/* Pocket Giant credit: the monogram beside the name, in the note's colour. */
.dp-menu-ud{ display:inline-flex; align-items:center; gap:.5em; padding:12px 0; margin:-12px 0; color:inherit;
             transition:color .28s var(--dp-e-out, ease) }
.dp-menu-ud img{ display:block; height:16px; width:auto }
.dp-menu-ud:hover, .dp-menu-ud:focus-visible{ color:var(--dp-rust) }
.dp-dark .dp-menu-ud:hover, .dp-dark .dp-menu-ud:focus-visible,
body.is-game-page:not(.light) .dp-menu-ud:hover,
body.is-game-page:not(.light) .dp-menu-ud:focus-visible{ color:var(--dp-amber) }
.dp-menu-ud:focus-visible{ outline:1px solid currentColor; outline-offset:4px; border-radius:2px }

/* nav.js drops the anonymous sign-in link in here on small screens */
#cp-mobile-auth-slot:empty{ display:none }
@media (max-width:959px){
  .dp-menu .cp-mobile-auth-slot{ display:flex; flex:none; margin:0 0 16px; padding:0 }
}
.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 }
}

@media (prefers-reduced-motion:reduce){
  .dp-nav > a.dp-nav-feature:hover,
  .dp-nav > a.dp-nav-feature:focus-visible{ 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;
  }
}

/* Launch introduction: the existing paper/night modal palette and pill actions. */
.dp-weekly-intro{--intro-bg:var(--paper);--intro-ink:var(--ink);--intro-soft:var(--ink-soft);--intro-line:var(--line);--intro-accent:var(--rust);width:min(440px,calc(100vw - 24px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);padding:0;margin:auto;border:1px solid var(--intro-line);border-radius:20px;background:var(--intro-bg);color:var(--intro-ink);box-shadow:0 40px 80px -40px rgba(0,0,0,.7);font-family:var(--f-sans);overflow:hidden}
.dp-weekly-intro[open]{display:flex;flex-direction:column}
.dp-weekly-intro::backdrop{background:rgba(14,9,4,.72)}
.dp-weekly-intro__body{overflow-y:auto;min-height:0;padding:24px 24px 16px;overscroll-behavior:contain}
.dp-weekly-intro h2{margin:0 0 12px;font:600 1.7rem/1.15 var(--f-display)}
.dp-weekly-intro p{margin:0 0 10px;font-size:.85rem;line-height:1.42;color:var(--intro-soft)}
.dp-weekly-intro section{margin:15px 0}
.dp-weekly-intro h3{margin:0 0 4px;font:600 .9rem/1.3 var(--f-sans);color:var(--intro-ink)}
.dp-weekly-intro .dp-weekly-intro__note{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--intro-line);font-size:.73rem;line-height:1.45}
.dp-weekly-intro__actions{display:flex;gap:8px;flex-shrink:0;padding:14px 24px 18px;border-top:1px solid var(--intro-line)}
.dp-weekly-intro__actions a,.dp-weekly-intro__actions button{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border:1px solid var(--intro-line);border-radius:999px;font:500 .68rem/1.3 var(--f-mono);letter-spacing:.04em;text-decoration:none;cursor:pointer}
.dp-weekly-intro__primary{flex:2;background:var(--intro-accent);color:var(--cream)}
.dp-weekly-intro__dismiss{flex:1;background:transparent;color:var(--intro-ink)}
.dp-weekly-intro__actions a:focus-visible,.dp-weekly-intro__actions button:focus-visible{outline:2px solid var(--intro-accent);outline-offset:3px}
body.dp-dark .dp-weekly-intro,body.is-game-page:not(.light) .dp-weekly-intro{--intro-bg:var(--night-2);--intro-ink:var(--cream);--intro-soft:rgba(244,234,214,.8);--intro-line:var(--night-line);--intro-accent:var(--amber)}
body.dp-dark .dp-weekly-intro__primary,body.is-game-page:not(.light) .dp-weekly-intro__primary{color:var(--ink)}
@media(max-width:380px){.dp-weekly-intro__body{padding:20px 18px 14px}.dp-weekly-intro h2{font-size:1.5rem}.dp-weekly-intro section{margin:12px 0}.dp-weekly-intro__actions{padding:12px 18px 16px}.dp-weekly-intro__actions a,.dp-weekly-intro__actions button{padding-inline:10px;font-size:.64rem}}

@media(max-width:360px){
  .my-stats-page .dp-brand-word{ display:none }
}
.pop-body .dp-burger,.my-stats-page .dp-burger{ width:44px; height:44px }
.pop-body .dp-auth-slot .cp-auth-toggle,.my-stats-page .dp-auth-slot .cp-auth-toggle{ min-height:44px }
/* The account name yields space to the game's utility controls. */
.pop-body .dp-mast-end,.pop-body .dp-auth-slot,.pop-body .dp-auth-slot .cp-auth{ min-width:0; flex-shrink:1 }
.pop-body .dp-game-slot{ flex:none }
.pop-body .dp-auth-slot .cp-auth-toggle{ max-width:100% }
.pop-body .dp-auth-slot .cp-auth-name{ min-width:0 }
.my-stats-page .dp-masthead .pw-icon-btn{ position:relative }
.my-stats-page .dp-masthead .pw-icon-btn::after{ content:""; position:absolute; inset:-4px; border-radius:50% }

/* iPhone announcement. It scrolls away; only the masthead stays fixed. */
.dp-app-announcement{
  position:absolute; top:var(--nav-h); left:0; right:0; z-index:20;
  box-sizing:border-box; background:var(--dp-paper); color:var(--dp-ink);
  border-bottom:1px solid var(--dp-line-firm);
  font-family:var(--dp-f-sans); text-align:left;
}
.dp-app-announcement-inner{
  box-sizing:border-box; max-width:1440px; margin:auto; padding:10px var(--dp-gutter);
  display:flex; align-items:center; gap:20px;
}
.dp-app-announcement-copy{ flex:1; min-width:0; display:grid; gap:3px; line-height:1.35 }
.dp-app-announcement-copy strong{ font-size:.875rem; font-weight:650 }
.dp-app-announcement-copy span{ font-size:.75rem; color:var(--dp-ink-soft) }
.dp-app-announcement-link{
  color:var(--dp-rust-deep); font-size:.8125rem; font-weight:700;
  white-space:nowrap; text-decoration:underline; text-underline-offset:4px;
  min-height:44px; display:inline-flex; align-items:center;
}
.dp-app-announcement-close{
  flex:none; width:44px; height:44px; padding:0; display:grid; place-items:center;
  border:1px solid var(--dp-line-firm); border-radius:50%; background:transparent;
  color:inherit; font:24px/1 var(--dp-f-sans); cursor:pointer;
}
.dp-app-announcement-close:hover{ background:var(--dp-line) }
.dp-app-announcement a:focus-visible,
.dp-app-announcement button:focus-visible{ outline:2px solid currentColor; outline-offset:3px }
.dp-dark .dp-app-announcement,
body.is-game-page:not(.light) .dp-app-announcement{
  background:var(--dp-night); color:var(--dp-cream); border-color:var(--dp-night-line);
}
.dp-dark .dp-app-announcement-copy span,
body.is-game-page:not(.light) .dp-app-announcement-copy span{ color:#C9BBA4 }
.dp-dark .dp-app-announcement-link,
body.is-game-page:not(.light) .dp-app-announcement-link{ color:#E9B65F }
.dp-dark .dp-app-announcement-close,
body.is-game-page:not(.light) .dp-app-announcement-close{ border-color:var(--dp-night-line) }
body.dp-has-app-announcement:not(.is-game-page){ padding-top:var(--dp-app-announcement-h) }
body.dp-home.dp-has-app-announcement{ padding-top:calc(var(--nav-h) + var(--dp-app-announcement-h)) }
body.is-game-page.dp-has-app-announcement{
  --pw-topbar-h:calc(var(--nav-h) + var(--dp-app-announcement-h) + 8px);
  --cp-topbar-h:calc(var(--nav-h) + var(--dp-app-announcement-h) + 8px);
  --pp-topbar-h:calc(var(--nav-h) + var(--dp-app-announcement-h) + 8px);
}
@media (max-width:599px){
  /* One slim line on phones: games come first, the announcement just waits. */
  .dp-app-announcement-inner{ gap:0 8px; padding:0 4px 0 14px; display:grid; grid-template-columns:minmax(0,1fr) auto 44px; align-items:center; min-height:44px }
  .dp-app-announcement-copy{ grid-column:1; grid-row:1; display:block }
  .dp-app-announcement-copy strong{ display:block; font-size:.8125rem; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .dp-app-announcement-when,
  .dp-app-announcement-copy span{ display:none }
  .dp-app-announcement-link{ grid-column:2; grid-row:1; min-height:44px; font-size:.75rem; justify-self:end }
  .dp-app-announcement-close{ grid-column:3; grid-row:1; align-self:center; width:44px; height:44px; justify-self:center; font-size:22px; border:0 }
}


/* Touch screens: the masthead's 38px icons keep their look but get a 44px
   hit area, so neighbouring buttons are still easy to tell apart. */
@media (pointer:coarse){
  .dp-masthead .pw-icon-btn,
  .dp-masthead .pw-streak{ position:relative }
  .dp-masthead .pw-icon-btn::after,
  .dp-masthead .pw-streak::after{ content:""; position:absolute; inset:-3px; border-radius:50% }
}

/* Heart greeting: a compact once-only popup for hearts that arrived while the player was away. */
.cp-heart{ position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(20,13,7,.42); animation:cp-heart-fade .25s ease-out }
.cp-heart-card{ width:100%; max-width:340px; padding:24px 22px 10px; border:1px solid rgba(31,21,12,.14); border-radius:28px; background:#F7F2E8; color:#1F150C; text-align:center; box-shadow:0 24px 60px rgba(20,13,7,.3); animation:cp-heart-pop .32s cubic-bezier(.2,.8,.3,1) }
.dp-dark .cp-heart-card{ background:#241912; color:#F4EAD6; border-color:rgba(244,234,214,.16) }
.cp-heart-art{ position:relative; display:flex; align-items:flex-end; justify-content:center; height:76px; margin-bottom:12px }
.cp-heart-faces{ display:flex; align-items:center }
.cp-heart-faces img{ width:52px; height:52px; margin-left:-12px; border-radius:50%; object-fit:cover; border:2px solid #F7F2E8; background:#E8DBC6 }
.dp-dark .cp-heart-faces img{ border-color:#241912 }
.cp-heart-faces img:first-child{ margin-left:0 }
.cp-heart-faces:only-child svg{ width:40px; height:40px }
.cp-heart svg{ fill:#B3372B }
.dp-dark .cp-heart svg{ fill:#E8806F }
.cp-heart-float{ position:absolute; bottom:14px; left:calc(50% + (var(--i) - 2) * 22px); width:12px; height:12px; opacity:0; animation:cp-heart-rise 1.9s ease-out both; animation-delay:calc(var(--i) * .12s) }
.cp-heart-float svg{ width:100%; height:100% }
.cp-heart-kicker{ display:flex; align-items:center; justify-content:center; gap:6px; margin:0 0 6px; font:500 .625rem var(--f-mono,'DM Mono',monospace); letter-spacing:.16em; text-transform:uppercase; opacity:.7 }
.cp-heart-kicker svg{ width:13px; height:13px }
.cp-heart-card h2{ margin:0 0 6px; font:600 1.25rem/1.25 var(--f-display,'Fraunces',serif) }
.cp-heart-sub{ margin:0 0 16px; font-size:.8125rem; opacity:.7 }
.cp-heart-view{ display:block; padding:12px 20px; border-radius:999px; background:#D9A94A; color:#1A1009; font:600 .9375rem var(--f-sans,'DM Sans',sans-serif); text-decoration:none }
.cp-heart-view:focus-visible,.cp-heart-dismiss:focus-visible{ outline:2px solid var(--dp-rust,#BF4E1C); outline-offset:2px }
.cp-heart-dismiss{ display:block; width:100%; min-height:44px; margin-top:4px; border:0; background:none; color:inherit; opacity:.7; font:500 .9375rem var(--f-sans,'DM Sans',sans-serif); cursor:pointer }
@keyframes cp-heart-fade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes cp-heart-pop{ from{ opacity:0; transform:scale(.95) } to{ opacity:1; transform:none } }
@keyframes cp-heart-rise{ 0%{ opacity:0; transform:translateY(0) scale(.7) } 20%{ opacity:.85 } 100%{ opacity:0; transform:translateY(-56px) scale(1) } }
@media (prefers-reduced-motion: reduce){
  .cp-heart,.cp-heart-card{ animation:none }
  .cp-heart-float{ display:none }
}
.dp-rollover-note{position:fixed;z-index:9999;inset:auto 1rem 1rem;max-width:34rem;margin:auto;padding:1rem 1.25rem;border-radius:12px;background:#312013;color:#fff7e8;box-shadow:0 10px 32px #0006;font:600 14px/1.5 system-ui,sans-serif}
.dp-rollover-note button{display:inline-block;margin:.5rem 0 0;padding:.5rem .85rem;border:2px solid currentColor;border-radius:8px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.dp-rollover-note button:focus-visible{outline:3px solid #f3b56d;outline-offset:3px}