/* ==========================================================================
   DAILY PAWS — CLAUDE EDITION
   pages.css · base and page layouts for the pages that do not load core.css
   --------------------------------------------------------------------------
   Loaded by every page except the front page, in the position the original
   styles.css held: after tokens.css and primitives.css, before nav.css. This
   file replaces styles.css. The original palette, the old homepage, the old
   navigation, the newsletter and poll modules and their motion system have
   all been removed; what remains is live layout, written against
   shared/css/tokens.css.

   In order, it holds:
     · a page reset, body, focus ring, selection and scrollbar
     · masthead fallbacks under nav.css (account chip, game icon buttons)
     · game-page spacing that the game stylesheets rely on
     · the sign-in card
     · the legal template (Privacy, Terms, Cookie Notice)
     · the My Stats page (hero, stats, profile, dog picker, note)

   Rule order is load-bearing and has been kept exactly as it was.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none !important}html{scroll-padding-top:100px;overflow-x:hidden}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}body{background:var(--paper);color:var(--ink);font-family:var(--f-sans);font-weight:400;line-height:1.62;overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body.dp-dark{background:var(--night);color:var(--cream)}img{max-width:100%;display:block}a{text-decoration:none;color:inherit}::selection{background:rgba(191,78,28,.18)}a,button{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}:focus-visible{outline:2px solid var(--rust);outline-offset:3px;border-radius:var(--r-xs)}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--paper-2)}::-webkit-scrollbar-thumb{background:rgba(31,21,12,.28);border-radius:var(--r-xs)}.is-game-page:not(.light)::-webkit-scrollbar-track{background:var(--night)}.is-game-page:not(.light)::-webkit-scrollbar-thumb{background:rgba(244,234,214,.22)}.legal-hero{background:var(--paper);color:var(--ink);padding:clamp(84px,12vw,140px) var(--gutter) clamp(36px,5vw,56px);text-align:center;border-bottom:1px solid var(--line)}.legal-hero .dp-eyebrow{margin-bottom:16px}.legal-hero h1{font-size:clamp(2.4rem,5vw,3.9rem);color:var(--ink);margin-bottom:14px}.legal-hero p{font-family:var(--f-mono);font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.legal-body{background:var(--paper);color:var(--ink);padding:clamp(52px,6vw,84px) var(--gutter) clamp(64px,9vw,120px)}.legal-content{max-width:65ch;margin:0 auto;color:var(--ink-soft);font-family:var(--f-sans);font-size:1rem;line-height:1.72}.legal-content h2{font-family:var(--f-display);font-size:1.32rem;font-weight:600;letter-spacing:-.015em;line-height:1.2;color:var(--ink);margin:2.4rem 0 .7rem;padding-top:1.6rem;border-top:1px solid var(--line)}.legal-content h2:first-child{margin-top:0;padding-top:0;border-top:0}.legal-content p{margin-bottom:0.85rem}.legal-content ul{padding-left:1.4rem;margin-bottom:0.85rem}.legal-content li{margin-bottom:0.4rem}.legal-content a{color:var(--rust);border-bottom:1px solid rgba(191,78,28,.34);text-decoration:none}.legal-content a:hover{border-color:var(--rust-deep)}.dp-dark .legal-hero{background:var(--night);border-color:var(--night-line)}.dp-dark .legal-hero h1{color:var(--cream)}.dp-dark .legal-hero p{color:var(--cream-mute)}.dp-dark .legal-body{background:var(--night)}.dp-dark .legal-content{color:rgba(244,234,214,.78)}.dp-dark .legal-content h2{color:var(--cream);border-color:var(--night-line)}.dp-dark .legal-content a{color:var(--amber);border-bottom-color:rgba(201,133,38,.4)}.dp-dark .legal-content a:hover{border-color:var(--amber)}@media (max-width:1024px) and (min-width:769px){.ms-game-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){html{scroll-padding-top:80px}.legal-hero{padding:clamp(80px,12vw,140px) 28px clamp(40px,5vw,64px)}.legal-body{padding:clamp(48px,6vw,80px) 28px clamp(64px,9vw,120px)}}@media print{body{background:var(--paper-2);color:black}}:focus-visible{outline:2px solid var(--rust);outline-offset:3px;border-radius:var(--r-xs)}/* ── My Stats page ─────────────────────────────────────────── */
html.auth-route-pending body[data-auth-required] #main-content,body[data-auth-required].cp-auth-locked #main-content{visibility:hidden}.auth-login-page{background:var(--paper);color:var(--ink)}.auth-main{min-height:calc(100svh - 180px);display:grid;place-items:center;padding:120px 24px 72px}.auth-card{width:min(100%,560px);padding:clamp(36px,6vw,64px);text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg)}.auth-card .dp-eyebrow{margin-bottom:14px}.auth-card h1 em{color:var(--rust)}.auth-card p{margin:18px auto 28px;max-width:410px}.auth-card .dp-btn{display:flex;width:fit-content;margin:0 auto}.auth-error{min-height:1.5em;color:var(--rust-deep)!important;font-size:.86rem!important;margin:14px auto 0!important}.auth-card .dp-link{display:inline-flex;margin-top:24px}.auth-signed-in{display:none}.auth-card.is-signed-in .auth-signed-in{display:block}.auth-card.is-signed-in .auth-copy,.auth-card.is-signed-in .dp-btn,.auth-card.is-signed-in .auth-error{display:none}.my-stats-page{background:var(--paper);color:var(--ink)}.ms-hero{min-height:680px;padding:150px 80px 90px;background:radial-gradient(circle at 78% 18%,rgba(191,78,28,0.14),transparent 34%),var(--paper);display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}.ms-hero-inner{max-width:760px;margin:0 auto;position:relative;z-index:1}.ms-hero h1{margin-bottom:18px}.ms-hero h1 em{color:var(--amber)}.ms-hero p{max-width:620px;margin:0 auto 30px;font-size:1.05rem;color:rgba(31,21,12,.76)}.ms-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.ms-note h2{margin-bottom:10px}.ms-note p,.ms-profile-copy p{color:rgba(31,21,12,.76)}/* My Stats keeps its established section rhythm, tighter than the front
   page's --sec-pad; mapping one onto the other added ~20px per section. */
.ms-profile-section{padding:clamp(56px,7vw,96px) 80px;background:var(--paper);display:grid;grid-template-columns:minmax(0,420px) minmax(0,560px);gap:58px;align-items:center;justify-content:center}.ms-profile-copy .dp-display{margin-bottom:16px}.ms-dog-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:16px;max-width:600px}.ms-dog-picker--preview{grid-template-columns:repeat(6,1fr);gap:10px;max-width:100%}.ms-dog-choice{padding:0;border:none;background:none;cursor:pointer;aspect-ratio:1;border-radius:50%;line-height:0;transition:transform .22s var(--e-out)}.ms-dog-choice img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--paper-2);border:1px solid var(--line);transition:border-color .25s var(--e-out)}.ms-dog-choice:hover{transform:translateY(-2px)}.ms-dog-choice:hover img,.ms-dog-choice:focus-visible img{border-color:var(--line-firm)}.ms-dog-choice.is-selected img{border-color:var(--rust);border-width:2px}.ms-account{padding:clamp(56px,7vw,96px) 80px;background:var(--paper)}.ms-account-inner{max-width:860px;margin:0 auto;background:var(--paper);border-radius:var(--r-lg);padding:clamp(28px,4vw,48px);border:1px solid var(--line)}.ms-account-inner .dp-display{margin-bottom:24px}.ms-acct-row{display:flex;gap:24px;align-items:center;margin-bottom:28px;flex-wrap:wrap}.ms-acct-avatar{width:104px;height:104px;border-radius:50%;flex:none;overflow:hidden;border:1px solid var(--line-firm);background:var(--paper-2)}.ms-acct-avatar img{width:100%;height:100%;object-fit:cover;display:block}.ms-acct-fields{flex:1;min-width:220px}.ms-acct-label{display:block;font-family:var(--f-mono);font-size:.6875rem;font-weight:500;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}.ms-acct-input{width:100%;padding:13px 16px;border-radius:var(--r-sm);border:1px solid var(--line-firm);background:var(--paper-2);color:var(--ink);font-family:var(--f-sans);font-size:1rem;outline:none;transition:border-color .25s var(--e-out)}.ms-acct-input:focus{border-color:var(--rust)}.ms-acct-actions{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}.ms-acct-status{font-family:var(--f-sans);font-size:.85rem;font-weight:600;color:rgba(31,21,12,.6)}.ms-acct-status.is-ok{color:var(--moss)}.ms-acct-status.is-err{color:var(--rust-deep)}.ms-acct-pick-label{font-family:var(--f-mono);font-size:.6875rem;font-weight:500;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}.ms-dog-picker--account{max-width:none;grid-template-columns:repeat(7,1fr)}.ms-acct-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}.ms-acct-foot p{margin:0;font-size:.85rem;color:rgba(31,21,12,.7)}@media (max-width:900px){.ms-account{padding-left:24px;padding-right:24px}}@media (max-width:520px){.ms-acct-row{justify-content:center;text-align:center}.ms-acct-foot{justify-content:center;text-align:center}}.ms-note-section{padding:clamp(56px,7vw,96px) 80px;background:var(--paper)}.ms-note{max-width:820px;margin:0 auto;text-align:center;background:var(--paper);border-radius:var(--r-lg);padding:44px;border:1px solid var(--line)}@media (max-width:900px){.ms-profile-section{grid-template-columns:1fr;text-align:center}.ms-profile-section,.ms-note-section,.ms-hero{padding-left:24px;padding-right:24px}.ms-dog-picker{max-width:600px;margin:0 auto}}@media (max-width:520px){.ms-hero{min-height:620px;padding-top:130px}.ms-note{padding:26px 22px}.ms-dog-picker{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:12px;max-width:400px}}.cp-auth{position:relative}.cp-auth-toggle{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:99px;background:rgba(31,21,12,0.06);border:1px solid var(--line);color:var(--ink);font-family:var(--f-sans);font-size:0.8rem;font-weight:600;letter-spacing:0.02em;cursor:pointer;max-width:150px;transition:background 0.18s var(--e-out)}.cp-auth-toggle:hover{background:rgba(31,21,12,0.1)}.cp-auth-dot{width:8px;height:8px;border-radius:50%;background:var(--moss);flex-shrink:0}.cp-auth-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-auth-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:12px;min-width:172px;box-shadow:0 6px 28px rgba(31,21,12,0.16);z-index:600}.cp-auth-menu[hidden]{display:none}.cp-auth-as{display:block;font-size:0.75rem;color:rgba(31,21,12,0.6);line-height:1.5;margin-bottom:10px}.cp-auth-as strong{color:var(--ink);font-size:0.85rem;font-weight:600;word-break:break-word}.cp-auth-signout{display:block;width:100%;padding:9px 12px;border-radius:9px;border:none;background:var(--rust);color:var(--cream);font-family:var(--f-sans);font-size:0.8125rem;font-weight:600;cursor:pointer;transition:background 0.18s var(--e-out)}.cp-auth-signout:hover{background:var(--rust-deep)}.cp-auth-signin{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 24px;border-radius:99px;color:var(--ink);font-family:var(--f-sans);font-size:.9rem;font-weight:700;letter-spacing:0.02em;border:1px solid var(--line);transition:background 0.18s var(--e-out)}.cp-auth-signin:hover{background:rgba(31,21,12,0.06)}@media (max-width:940px){.cp-auth-signin{display:none}}
.cp-mobile-auth-slot{display:none;align-items:center;justify-content:center;padding:10px 12px 4px;margin-top:4px}.cp-mobile-auth-signin{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:190px;padding:11px 20px;border-radius:999px;color:var(--ink);background:rgba(31,21,12,0.05);border:1px solid var(--line);font-family:var(--f-sans);font-size:.9rem;font-weight:700;letter-spacing:.02em;text-decoration:none}@media (max-width:940px){.cp-mobile-auth-slot{display:flex}}
body.is-game-page{--pw-topbar-h:94px;--cp-topbar-h:86px;--cm-topbar-h:80px;--pp-topbar-h:84px;--pl-topbar-h:86px}/* Connect Paws: compact spacing so Submit stays on-screen */
body.is-game-page #cp-solved{margin-bottom:2px}body.is-game-page .cp-oneaway{height:8px;margin-bottom:2px}body.is-game-page .cp-stat-pill{height:40px}body.is-game-page .cp-btn{height:40px}body.is-game-page .cp-main{padding-bottom:8px}body.is-game-page #cp-timer-row{flex-direction:row;justify-content:center;gap:14px;padding:0 12px}
@media (max-width:540px){
  .ms-dog-picker--account{grid-template-columns:repeat(5,1fr);}}

@media (hover:hover) and (min-width:941px){

  }
.pw-icon-btn{
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(31,21,12,0.10);
  border: 1px solid rgba(31,21,12,0.18);
  color: var(--ink);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}.pw-icon-btn:hover,.pw-icon-btn:active{ background: rgba(31,21,12,0.16); transform: scale(1.08); }.pw-icon-btn:focus-visible{ outline: 2px solid var(--rust); outline-offset: 2px; }
body.is-game-page:not(.light) .pw-icon-btn:focus-visible{ outline-color: var(--amber) }.pw-streak{
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  background: rgba(31,21,12,0.10);
  border: 1px solid rgba(31,21,12,0.18);
  color: var(--ink);
  font-family: 'Fraunces', Georgia, serif;
  line-height: 1; box-shadow: none; user-select: none; flex-shrink: 0; cursor: default;
  transition: background 0.2s;
}.pw-streak-icon{ font-size: 18px; display: block; line-height: 0.95; filter: drop-shadow(0 0 5px rgba(191,78,28,0.35)); }.pw-streak-num{ font-size: 14px; font-weight: 700; line-height: 0.95; display: block; margin-top: 0; font-variant-numeric: tabular-nums; color: inherit; }.pw-streak.is-zero{ opacity: 0.62; }.pw-streak.is-zero .pw-streak-icon{ filter: none; }

@media (max-width:940px){
  .cp-auth-signin {
    display: none;
  }
  .cp-mobile-auth-slot {
    display: flex;
  }}/* ── Photo hero ── */
.my-stats-page .ms-hero{
  position: relative;
  height: clamp(460px, 42vw, 600px);
  min-height: 0;
  padding: 0 clamp(4px, 4vw, 112px);
  background: var(--night);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
  overflow: hidden;
}.ms-hero-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  display: block;
  /* Mirrored so the retriever sits on the right, clear of the left-set
     words, the same way the Game Guides hero is composed. */
  transform: scaleX(-1);
}
/* Narrow viewports crop a 2.67:1 photograph hard. Bias the crop left so the
   retriever stays in frame instead of being cut at the edge. */
@media (max-width: 900px){ .ms-hero-img{ object-position: 32% 58% }}
@media (max-width: 560px){ .ms-hero-img{ object-position: 28% 56% }}/* Same scrim as the Game Guides hero: the weight sits behind the left-set
   words and falls away across the photograph. The bottom only gets a light
   tint so the hero meets the paper section cleanly instead of through a
   near-black band. */
.ms-hero-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(21,14,8,.86) 0%, rgba(21,14,8,.70) 31%, rgba(21,14,8,.26) 59%, rgba(21,14,8,.04) 100%),
    linear-gradient(0deg, rgba(21,14,8,.28), transparent 38%);
}/* Hide the guest hero text/button until JS has actually confirmed the
   sign-in state,so returning signed-in users don't see it flash on
   then get swapped for the "Welcome back" version a moment later. */
.my-stats-page:not(.cp-auth-ready) #ms-hero-guest,.my-stats-page:not(.cp-auth-ready) #ms-actions{visibility:hidden}.my-stats-page .ms-hero .ms-hero-inner{
  position: relative;
  z-index: 1;
  padding: clamp(80px, 14vw, 160px) clamp(20px, 6vw, 48px) clamp(40px, 5vw, 60px);
  width: 100%;
  max-width: 760px;
  align-self: flex-end;
  margin: 0;
}.my-stats-page .ms-hero h1{
  color: var(--cream);
  font-size: clamp(3rem, 6.4vw, 5.4rem);
  line-height: .94;
  margin-bottom: 22px;
  text-shadow: 0 2px 24px rgba(21,14,8,.45);
}.my-stats-page .ms-hero h1 em{ color: var(--amber) }.my-stats-page .ms-hero p{
  color: rgba(244,234,214,.86);
  max-width: 44ch;
  margin: 0 0 26px;
  text-shadow: 0 1px 14px rgba(21,14,8,.55);
}.my-stats-page .ms-hero .ms-actions{ justify-content: flex-start }.ms-stats{background:var(--paper);padding:32px 24px 56px}.ms-stats-inner{margin:0 auto}.ms-sec-lbl-inner{display:block}.msg-label{flex-shrink:0}.ms-dist-n{width:10px;text-align:right}.ms-dist-count{width:22px}.ms-cg-item{display:flex;flex-direction:column;gap:5px}.my-stats-page #ms-account:not([hidden]),.my-stats-page #ms-stats:not([hidden]),.my-stats-page #ms-guest:not([hidden]){display:block}.ms-stats-head{margin-bottom:4px}.ms-stats-head .dp-eyebrow{margin-bottom:0}.ms-signin-error{margin-top:2px}
@media (min-width:701px){
  .my-stats-page:not(.ms-signed-in) .ms-hero{
    height: max(clamp(520px,56vw,680px), 62vh);
    align-items: center;
  }
  .my-stats-page:not(.ms-signed-in) .ms-hero .ms-hero-inner{
    align-self: auto;
    padding-top: clamp(100px,10vh,160px);
    padding-bottom: clamp(80px,8vh,130px);
    transform: none;
  }
  /* Signed-in: shorter hero (base height applies), centred, symmetric padding */
  .my-stats-page.ms-signed-in .ms-hero{
    align-items: center;
  }
  .my-stats-page.ms-signed-in .ms-hero .ms-hero-inner{
    align-self: center;
    padding-top: clamp(100px,9vw,160px);
    padding-bottom: clamp(100px,9vw,160px);
    transform: none;
  }}@media (max-width:700px){.my-stats-page .ms-hero{
    height: auto;
    min-height: 700px;
    align-items: center;
    padding-inline: 0;
  }.ms-hero-overlay{
    /* The words span the full width here, so the scrim is even across it. */
    background: linear-gradient(to bottom, rgba(21,14,8,.42) 0%, rgba(21,14,8,.62) 100%);
  }.my-stats-page .ms-hero .ms-hero-inner{
    align-self: center;
    padding: 100px 22px 80px;
    transform: none;
  }.my-stats-page .ms-hero h1{ font-size: clamp(43px,13vw,62px); line-height: 1.04; }.my-stats-page .ms-hero p{ font-size: 1rem; line-height: 1.72; margin-bottom: 22px; }.my-stats-page.ms-signed-in .ms-hero .ms-hero-inner{
    padding: 92px 22px 82px;
    transform: none;
  }}@media (max-width:420px){.my-stats-page .ms-hero{ min-height: 690px; }.my-stats-page .ms-hero .ms-hero-inner{
    padding-top: 92px;
    padding-bottom: 74px;
    transform: none;
  }.my-stats-page .ms-hero h1{ font-size: clamp(38px,12vw,52px); }.my-stats-page.ms-signed-in .ms-hero .ms-hero-inner{
    padding-top: 84px;
    padding-bottom: 78px;
    transform: none;
  }}
@media (max-width: 940px){

  }
@media (max-width: 560px){
  /* The compact game header is roughly 66px tall, but the shared game-page
     layout used to reserve 94px above the grid. Reclaim that blank space for
     the six Pawdle rows, especially on short iPhone viewports. */
  body.is-game-page.pw-body {
    --pw-topbar-h: 74px;
  }}

/* ── Dark mode: My Stats ──────────────────────────────────────────────────
   The .ms-hero photo is already dark; everything below it (profile, stats
   cards, account, note) sits on --paper and needs a night ground when
   .dp-dark lands on <body>. Floating menus (.cp-auth-menu) stay a light
   card always, matching the account menu everywhere else on the site. ── */
.dp-dark .ms-profile-section{ background: var(--night) }
.dp-dark .ms-note p, .dp-dark .ms-profile-copy p{ color: rgba(244,234,214,.78) }
.dp-dark .ms-dog-choice img{ background: var(--night-3); border-color: var(--night-line) }
.dp-dark .ms-account{ background: var(--night) }
.dp-dark .ms-account-inner{ background: var(--night-2); border-color: var(--night-line) }
.dp-dark .ms-acct-avatar{ background: var(--night-3); border-color: var(--night-line) }
.dp-dark .ms-acct-label,
.dp-dark .ms-acct-pick-label{ color: var(--cream-mute) }
.dp-dark .ms-acct-input{ background: var(--night-3); border-color: var(--night-line); color: var(--cream) }
.dp-dark .ms-acct-status{ color: rgba(244,234,214,.7) }
.dp-dark .ms-acct-foot{ border-color: var(--night-line) }
.dp-dark .ms-acct-foot p{ color: rgba(244,234,214,.7) }
.dp-dark .ms-note-section{ background: var(--night) }
.dp-dark .ms-note{ background: var(--night-2); border-color: var(--night-line) }
.dp-dark .ms-stats{ background: var(--night) }