/* ==========================================================================
   DAILY PAWS — PAW PATHS, IN THE NEW DESIGN
   shared/css/paw-paths.css · loaded AFTER paw-paths.css, restyles only what sits
   on top of the wallpaper.
   --------------------------------------------------------------------------
   DELIBERATELY DOES NOT TOUCH THE WALLPAPER.

   Paw Paths draws its two backgrounds the same way Connect Paws does: dark
   mode paints the photograph straight onto `body`, light mode paints it in
   `body.pp-light::before` with its own mobile crop (see the v1.5.284 block
   in paw-paths.css). Nothing in this file sets a background on `body`, on
   `body::before` or on `body::after`, and nothing touches `.pw-bg` or its
   glows. Both treatments, and the mobile wallpaper crop, stay exactly as
   they are.

   THE BOARD ITSELF IS ALSO LEFT ALONE. Every dog portrait, path line and
   filled-cell colour is drawn straight onto <canvas id="pp-canvas"> by the
   page's own script using the DOGS colour table — there is no CSS hook for
   any of it, so this file only ever styles the empty DOM cells underneath
   and the chrome around the board (card, controls, toast, modals). Grid
   size, cell count and gap all come from paw-paths.css and stay untouched.

   Everything is scoped to `body.pp-body` — a hook this page alone carries —
   because the result card and the leaderboard share their classes with
   Connect Paws, which this pass must not touch.
   ========================================================================== */

/* ── Tokens ────────────────────────────────────────────────────────────── */
body.pp-body{
  --ppx-f-ui:      "DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ppx-f-display: "Fraunces",Georgia,"Times New Roman",serif;
  --ppx-f-mono:    "DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ppx-card-line: rgba(244,234,214,.22);

  --ppx-ink:   #1F150C;
  --ppx-cream: #F4EAD6;
  --ppx-rust:  #BF4E1C;
  --ppx-rust-deep:#8F380F;
  --ppx-amber: #C98526;
  --ppx-e-out: cubic-bezier(.16,.84,.44,1);
  --ppx-e-spring: cubic-bezier(.32,1.32,.5,1);
}
body.pp-body.light{
  --ppx-card-line: rgba(31,21,12,.20);
}

/* ── Board card ────────────────────────────────────────────────────────
   Kept (unlike Pawdle's bare tiles) because the board is a single dense
   64-cell surface with a canvas layer drawing over it — it needs a defined
   ground to stay legible. But it is now a translucent, blurred pane rather
   than the old near-opaque gradient, so the wallpaper still reads through
   at the edges. Padding, radius base and canvas/board children are
   untouched — only the surface it sits on changes. */
body.pp-body .pp-card{
  background:radial-gradient(120% 120% at 30% -10%,rgba(58,38,18,.62) 0%,
             rgba(26,17,8,.70) 58%,rgba(18,12,6,.76) 100%);
  border-color:var(--ppx-card-line);
  border-radius:clamp(18px,4vw,24px);
  box-shadow:0 30px 64px -34px rgba(0,0,0,.8), inset 0 1px 0 rgba(244,234,214,.08);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
body.pp-body.light .pp-card{
  background:linear-gradient(168deg,rgba(252,247,238,.80) 0%,rgba(243,234,218,.76) 100%);
  border-color:var(--ppx-card-line);
  box-shadow:0 24px 54px -30px rgba(64,40,14,.4), inset 0 1px 0 rgba(255,255,255,.6);
}

/* ── Empty cells ───────────────────────────────────────────────────────
   Everything a player draws on top of these is canvas-painted, so only the
   resting look of an unfilled square changes: a lighter, flatter translucent
   tile in the edition's palette instead of the old inset-shadowed well. */
body.pp-body .pp-cell{
  border-radius:clamp(7px,2vw,10px);
  background:rgba(255,210,140,.07);
  border-color:rgba(255,210,140,.16);
  box-shadow:none;
}
body.pp-body.light .pp-cell{
  background:rgba(58,34,18,.055);
  border-color:rgba(58,34,18,.14);
}

/* ── Fill counter ──────────────────────────────────────────────────────
   Colour and nudge-pulse logic stay in the inline head style (they already
   track pp-light correctly) — only the type family is brought in line with
   the mono stat labels used on Pawdle and Connect Paws. */
body.pp-body .pp-fill-status{
  font-family:var(--ppx-f-mono);
  letter-spacing:.14em;
}

/* ── Controls ──────────────────────────────────────────────────────────
   Four flat, equal-height pills instead of the old offset "gumdrop" shadow
   buttons. Undo and Reset stay neutral; Practice and Solution keep a
   colour cue (amber / rust) so the row still reads as two utility actions
   and two feature actions, just without clashing fills. */
body.pp-body .pp-controls{ gap:9px }
body.pp-body .pp-btn{
  border:1px solid rgba(244,234,214,.28);
  border-radius:999px;
  padding:12px 6px;
  background:rgba(244,234,214,.07);
  color:var(--ppx-cream);
  font-family:var(--ppx-f-ui);
  font-weight:600;
  font-size:.8125rem;
  letter-spacing:.005em;
  box-shadow:none;
  transition:background .28s var(--ppx-e-out), border-color .28s var(--ppx-e-out),
             transform .3s var(--ppx-e-spring), box-shadow .3s var(--ppx-e-out);
}
body.pp-body .pp-btn:hover{
  background:rgba(244,234,214,.14);
  border-color:rgba(244,234,214,.44);
  transform:translateY(-1px);
}
body.pp-body .pp-btn:active{ transform:scale(.97); box-shadow:none }
body.pp-body .pp-btn--dark{
  background:rgba(244,234,214,.07);
  border-color:rgba(244,234,214,.28);
  color:var(--ppx-cream);
}
body.pp-body .pp-btn--practice{
  border-color:rgba(201,133,38,.50);
  color:var(--ppx-amber);
}
body.pp-body .pp-btn--practice:hover{ background:rgba(201,133,38,.14); border-color:rgba(201,133,38,.68) }
body.pp-body .pp-btn--solution{
  border-color:rgba(191,78,28,.50);
  color:#E8A46A;
}
body.pp-body .pp-btn--solution:hover{ background:rgba(191,78,28,.16); border-color:rgba(191,78,28,.68) }

body.pp-body.light .pp-btn{
  background:rgba(255,253,248,.68);
  border-color:rgba(31,21,12,.20);
  color:var(--ppx-ink);
}
body.pp-body.light .pp-btn:hover{ background:rgba(255,255,255,.92); border-color:rgba(31,21,12,.32) }
body.pp-body.light .pp-btn--dark{
  background:rgba(255,253,248,.68);
  border-color:rgba(31,21,12,.20);
  color:var(--ppx-ink);
}
body.pp-body.light .pp-btn--practice{ border-color:rgba(191,78,28,.42); color:var(--ppx-rust-deep) }
body.pp-body.light .pp-btn--practice:hover{ background:rgba(191,78,28,.10) }
body.pp-body.light .pp-btn--solution{ border-color:rgba(191,78,28,.55); color:var(--ppx-rust) }
body.pp-body.light .pp-btn--solution:hover{ background:rgba(191,78,28,.12) }

/* ── Toast ─────────────────────────────────────────────────────────────── */
body.pp-body .pp-toast{
  top:calc(var(--nav-h,64px) + 18px);
  background:var(--ppx-ink);
  color:var(--ppx-cream);
  font-family:var(--ppx-f-ui);
  font-weight:600;
  border-radius:999px;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.7);
}
body.pp-body.light .pp-toast{ background:var(--ppx-ink); color:var(--ppx-cream) }

/* ── Overlays and panels ───────────────────────────────────────────────── */
body.pp-body .pp-overlay{
  background:rgba(14,9,4,.72);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
body.pp-body.light .pp-overlay{ background:rgba(38,25,11,.52) }

body.pp-body .pp-modal{
  background:radial-gradient(120% 100% at 30% -10%,#31220F 0%,#1E1409 62%,#17100A 100%);
  border-color:var(--ppx-card-line);
  border-radius:clamp(18px,4vw,22px);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
}
body.pp-body.light .pp-modal{
  background:linear-gradient(168deg,#FBF6EC,#F2E9D9);
  border-color:var(--ppx-card-line);
  box-shadow:0 34px 70px -36px rgba(64,40,14,.5);
}

/* ── Name / submit modal ───────────────────────────────────────────────
   The close button already matches Pawdle pixel-for-pixel (see the
   v1.5.245 pass below in paw-paths.css) and is left alone. Title, input
   and submit button are brought onto the shared Fraunces / rust system. */
body.pp-body #pp-name .pp-mtit{
  font-family:var(--ppx-f-display);
  font-weight:600;
  font-size:1.5rem;
  letter-spacing:-.018em;
  color:var(--ppx-cream);
}
body.pp-body.light #pp-name .pp-mtit{ color:var(--ppx-ink) }
body.pp-body #pp-name .pp-msub{
  font-family:var(--ppx-f-ui);
  color:rgba(244,234,214,.68);
}
body.pp-body.light #pp-name .pp-msub{ color:rgba(31,21,12,.62) }
body.pp-body #pp-name .pp-name-input{
  border-radius:12px;
  border:1px solid var(--ppx-card-line);
  background:rgba(244,234,214,.08);
  color:var(--ppx-cream);
  font-family:var(--ppx-f-ui);
  font-weight:400;
  -webkit-text-fill-color:currentColor;
}
body.pp-body.light #pp-name .pp-name-input{
  background:rgba(255,255,255,.8);
  color:var(--ppx-ink);
  border-color:rgba(31,21,12,.22);
  -webkit-text-fill-color:var(--ppx-ink);
}
body.pp-body #pp-name .pp-name-input:focus{ border-color:var(--ppx-rust) }
body.pp-body #pp-name-submit.pp-btn{
  background:var(--ppx-rust);
  color:#FFF6EA;
  font-family:var(--ppx-f-ui);
  box-shadow:0 12px 26px -16px rgba(191,78,28,.95);
  transition:background .28s var(--ppx-e-out), transform .3s var(--ppx-e-spring);
}
body.pp-body #pp-name-submit.pp-btn:hover{ background:var(--ppx-rust-deep) }
body.pp-body #pp-name-skip.pp-btn{ font-family:var(--ppx-f-ui) }

/* ── Practice / solution note ─────────────────────────────────────────── */
body.pp-body .pp-practice-note{
  font-family:var(--ppx-f-mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ppx-amber);
}
body.pp-body.light .pp-practice-note{ color:var(--ppx-rust-deep) }

/* ── Result card ───────────────────────────────────────────────────────
   Defined once in shared/css/result-card.css, shared with Connect Paws. */

/* ── Leaderboard ───────────────────────────────────────────────────────
   The board itself is shared/css/leaderboard.css. All this game states is its
   accent; the fonts, radii and avatar ring that used to be patched here are
   the shared component's own now. */
body.pp-body .lb-panel{ --lb-accent:#8FA86F }
body.pp-body.light .lb-panel{ --lb-accent:var(--moss) }

/* ── Focus ─────────────────────────────────────────────────────────────── */
body.pp-body :focus-visible{
  outline:2px solid var(--ppx-amber); outline-offset:2px; border-radius:6px;
}
body.pp-body.light :focus-visible{ outline-color:var(--ppx-rust) }

/* ── Increased contrast ────────────────────────────────────────────────
   Paw Paths has no contrast switch of its own, so it follows the operating
   system, same as Connect Paws. The canvas-drawn dog colours and path
   lines are left alone; only the DOM chrome's edges and weights firm up. */
@media (prefers-contrast: more){
  body.pp-body .pp-card{ border-color:rgba(244,234,214,.55) }
  body.pp-body.light .pp-card{ border-color:rgba(31,21,12,.50) }
  body.pp-body .pp-cell{ border-color:rgba(255,210,140,.42) }
  body.pp-body.light .pp-cell{ border-color:rgba(58,34,18,.40) }
  body.pp-body .pp-btn{ border-color:rgba(244,234,214,.62) }
  body.pp-body.light .pp-btn{ border-color:rgba(31,21,12,.55); background:#FFFFFF }
  body.pp-body .pp-modal{ border-color:rgba(244,234,214,.5) }}

/* ── Short viewports ───────────────────────────────────────────────────── */
@media (max-height:700px){
  body.pp-body .pp-btn{ padding:10px 6px }}