/* ==========================================================================
   DAILY PAWS — CONNECT PAWS, IN THE NEW DESIGN
   shared/css/connect-paws.css · loaded AFTER connect-paws.css
   --------------------------------------------------------------------------
   DELIBERATELY DOES NOT TOUCH THE WALLPAPER.

   Connect Paws draws its two backgrounds differently from Pawdle: dark mode
   paints the photograph straight onto `body`, light mode paints it in
   `body.light::before` with its own mobile crop. Nothing in this file sets a
   background on `body`, on `body::before` or on `body::after`, and nothing
   touches `.cp-bg` or its glows. Both treatments stay exactly as they are.

   THE FOUR GROUP COLOURS ARE ALSO LEFT ALONE. They carry the difficulty
   order, and the same four hex values are hard-coded in the page's own script
   for the share grid and the confetti. Restyling them here would desync the
   board from the card a player shares, so only their shape and type change.

   Everything is scoped to `body.cp-body` — a hook added to this page alone —
   because the result card, the leaderboard and the name modal share their
   classes with Paw Paths, which this pass must not touch.
   ========================================================================== */

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

  /* Still used for modal/panel borders (leaderboard, name entry, result card) */
  --cpx-card-line:   rgba(244,234,214,.24);

  --cpx-ink:   #1F150C;
  --cpx-cream: #F4EAD6;
  --cpx-rust:  #BF4E1C;
  --cpx-rust-deep:#8F380F;
  --cpx-amber: #C98526;
  --cpx-e-out: cubic-bezier(.16,.84,.44,1);
  --cpx-e-spring: cubic-bezier(.32,1.32,.5,1);

  --cpx-inset-x: clamp(9px,2.4vw,13px);
  --cpx-inset-y: clamp(9px,1.4vh,13px);
}
body.cp-body.light{
  --cpx-card-line:   rgba(31,21,12,.20);
}

/* ── The play surface ──────────────────────────────────────────────────
   No enclosing panel here any more - the wallpaper stays fully in view and
   each piece (cards, stat pills, buttons) carries its own background, so
   nothing draws one big box over the whole game. */
body.cp-body .cp-main{
  padding-top:calc(var(--cp-topbar-h) + var(--cpx-inset-y) + 2px);
  padding-bottom:calc(var(--cpx-inset-y) + 14px + env(safe-area-inset-bottom,0px));
}

/* ── Board tightening ──────────────────────────────────────────────────
   The base stylesheet reserves generous gaps around the grid and the
   stats row. Tighten them here — the grid itself (card size, aspect-ratio)
   is untouched. The solved-groups strip and one-away nudge are tightened
   further down, alongside their other overrides. */
body.cp-body #cp-grid{ gap:5px; margin-bottom:8px }
body.cp-body .cp-stats-pair{ gap:6px; margin-bottom:8px }
body.cp-body .cp-btn-row{ gap:6px }

/* ── Word cards ─────────────────────────────────────────────────────────
   Each tile carries its own solid-ish background now that there is no
   enclosing panel behind it. Dark mode uses a dark-tinted glass rather
   than a cream wash, so the cream text keeps its contrast. */
body.cp-body .cp-card{
  border-radius:clamp(9px,2.4vw,12px);
  border-width:1.5px;
  border-color:rgba(244,234,214,.30);
  background:rgba(20,13,6,.52);
  color:var(--cpx-cream);
  font-family:var(--cpx-f-ui);
  font-weight:600;
  letter-spacing:.045em;
  box-shadow:none;
  transition:background .16s var(--cpx-e-out), border-color .16s var(--cpx-e-out),
             transform .18s var(--cpx-e-spring), box-shadow .18s var(--cpx-e-out);
}
body.cp-body .cp-card:hover{
  background:rgba(20,13,6,.64);
  border-color:rgba(244,234,214,.42);
}
body.cp-body.light .cp-card{
  border-color:rgba(31,21,12,.24);
  background:rgba(255,253,248,.64);
  color:var(--cpx-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}
body.cp-body.light .cp-card:hover{
  background:rgba(255,254,251,.80);
  border-color:rgba(31,21,12,.36);
  box-shadow:0 3px 10px -5px rgba(64,40,14,.35), inset 0 1px 0 rgba(255,255,255,.75);
}
/* Selected: the edition's rust, in both themes */
body.cp-body .cp-card.selected,
body.cp-body.light .cp-card.selected{
  background:var(--cpx-rust);
  border-color:var(--cpx-rust);
  color:#FFF6EA;
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 8px 20px -10px rgba(191,78,28,.95);
}

/* ── Solved groups ─────────────────────────────────────────────────────
   Colours untouched (see the note at the top); shape and type only. */
body.cp-body #cp-solved{ gap:6px; padding-top:0; margin-bottom:0 }
body.cp-body .cp-solved-group{
  border-radius:clamp(11px,2.8vw,13px);
  padding:11px 15px;
  box-shadow:0 8px 20px -14px rgba(0,0,0,.8);
}
body.cp-body .cp-solved-name{
  font-family:var(--cpx-f-ui);
  font-size:.75rem; font-weight:700; letter-spacing:.09em;
  color:#FFF8EC;
}
body.cp-body .cp-solved-words{
  font-family:var(--cpx-f-ui);
  font-size:.75rem; font-weight:500; letter-spacing:.01em;
  color:rgba(255,248,236,.82); margin-top:3px;
}
/* The "one away" nudge is the only feedback between a near miss and a
   mistake, so it gets room to breathe and enough weight to be noticed.
   The element keeps its reserved height, so the grid never jumps. */
body.cp-body .cp-oneaway{
  font-family:var(--cpx-f-mono);
  font-size:.6875rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cpx-amber);
  height:16px; line-height:16px;
  margin:3px 0 5px;
}
body.cp-body.light .cp-oneaway{ color:var(--cpx-rust-deep) }

/* ── Time and mistakes ─────────────────────────────────────────────────── */
body.cp-body .cp-stat-pill{
  height:38px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(244,234,214,.20);
  background:rgba(38,25,12,.60);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:none;
}
body.cp-body.light .cp-stat-pill{
  border-color:rgba(31,21,12,.16);
  background:rgba(255,253,248,.80);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
body.cp-body .cp-stat-pill .cp-timer-label,
body.cp-body .cp-stat-pill .cp-mistakes-label{
  font-family:var(--cpx-f-mono);
  font-size:.5625rem; font-weight:500; letter-spacing:.18em;
  color:rgba(244,234,214,.58);
}
body.cp-body.light .cp-stat-pill .cp-timer-label,
body.cp-body.light .cp-stat-pill .cp-mistakes-label{ color:rgba(31,21,12,.52) }
body.cp-body .cp-stat-pill .cp-timer-val{
  font-family:var(--cpx-f-mono);
  font-size:.875rem; font-weight:500; letter-spacing:.04em;
  color:var(--cpx-amber);
}
body.cp-body.light .cp-stat-pill .cp-timer-val{ color:var(--cpx-rust-deep) }
body.cp-body .cp-dot{
  width:9px; height:9px; border-width:1px;
  background:rgba(244,234,214,.14); border-color:rgba(244,234,214,.26);
}
body.cp-body.light .cp-dot{ background:rgba(31,21,12,.10); border-color:rgba(31,21,12,.22) }
body.cp-body .cp-dot.used,
body.cp-body.light .cp-dot.used{
  background:var(--cpx-rust); border-color:var(--cpx-rust); transform:scale(.86);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
body.cp-body .cp-btn{
  height:44px;
  border-radius:999px;
  font-family:var(--cpx-f-ui);
  font-size:.875rem; font-weight:600; letter-spacing:.01em;
  text-transform:none;
  transition:background .28s var(--cpx-e-out), border-color .28s var(--cpx-e-out),
             color .28s var(--cpx-e-out), transform .3s var(--cpx-e-spring),
             box-shadow .3s var(--cpx-e-out);
}
body.cp-body .cp-btn-secondary{
  background:transparent;
  border:1px solid rgba(244,234,214,.30);
  color:var(--cpx-cream);
}
body.cp-body .cp-btn-secondary:hover{
  background:rgba(244,234,214,.13);
  border-color:rgba(244,234,214,.48);
  transform:translateY(-1px);
}
body.cp-body.light .cp-btn-secondary{
  background:rgba(255,253,248,.72);
  border-color:rgba(31,21,12,.22);
  color:var(--cpx-ink);
}
body.cp-body.light .cp-btn-secondary:hover{ background:rgba(255,255,255,.94); border-color:rgba(31,21,12,.34) }

body.cp-body .cp-btn-primary{
  background:var(--cpx-rust);
  border:1px solid var(--cpx-rust);
  color:#FFF6EA;
  box-shadow:0 12px 26px -16px rgba(191,78,28,.95);
}
body.cp-body .cp-btn-primary:hover:not(:disabled){
  background:var(--cpx-rust-deep); border-color:var(--cpx-rust-deep);
  transform:translateY(-1px); box-shadow:0 16px 30px -16px rgba(143,56,15,.95);
}
/* Disabled has to read as "not yet", not as "broken" */
body.cp-body .cp-btn-primary:disabled{
  background:rgba(244,234,214,.07);
  border-color:rgba(244,234,214,.20);
  color:rgba(244,234,214,.46);
  box-shadow:none; transform:none;
}
body.cp-body.light .cp-btn-primary:disabled{
  background:rgba(31,21,12,.05);
  border-color:rgba(31,21,12,.18);
  color:rgba(31,21,12,.42);
  box-shadow:none;
}

/* ── Loading and error ─────────────────────────────────────────────────── */
/* Teddy stands in for the pulsing paw graphic: a still portrait, no loop. */
body.cp-body .cp-loading-teddy{
  display:block; width:64px; height:64px; margin:0 auto;
  border-radius:50%; object-fit:cover;
  border:1px solid var(--cpx-card-line);
}
body.cp-body .cp-error-kicker{ color:rgba(244,234,214,.72) }
body.cp-body.light .cp-error-kicker{ color:var(--cpx-rust-deep) }
body.cp-body .cp-loading-text{
  font-family:var(--cpx-f-display); font-style:italic; font-weight:400;
  font-size:1.06rem; letter-spacing:-.008em; color:var(--cpx-amber); opacity:1;
}
body.cp-body.light .cp-loading-text{ color:var(--cpx-rust-deep) }
body.cp-body .cp-error-title{
  font-family:var(--cpx-f-display); font-weight:600; font-size:1.4rem;
  letter-spacing:-.018em; color:var(--cpx-cream);
}
body.cp-body.light .cp-error-title{ color:var(--cpx-ink) }
body.cp-body .cp-error-msg{
  font-family:var(--cpx-f-ui); font-size:.875rem; line-height:1.55;
  color:rgba(244,234,214,.68);
}
body.cp-body.light .cp-error-msg{ color:rgba(31,21,12,.62) }

/* ── Toast ─────────────────────────────────────────────────────────────── */
body.cp-body #cp-toast{
  top:calc(var(--nav-h,64px) + 18px);
  background:var(--cpx-ink);
  border:0;
  color:var(--cpx-cream);
  font-family:var(--cpx-f-ui);
  font-size:.875rem; font-weight:600; letter-spacing:.005em;
  padding:11px 22px; border-radius:999px;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.7);
}
body.cp-body.light #cp-toast{ background:var(--cpx-ink); color:var(--cpx-cream) }

/* ── Overlays and panels ───────────────────────────────────────────────── */
/* No backdrop-filter on the overlays. The play card below already uses one,
   and stacking a second blur over it made the panel composite wrong — the
   board showed straight through an opaque cream panel. A slightly deeper
   flat scrim does the same job and renders reliably everywhere. */
body.cp-body .cp-overlay,
body.cp-body .cp-result-overlay,
body.cp-body .cp-name-modal{
  background:rgba(14,9,4,.72);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
body.cp-body.light .cp-overlay,
body.cp-body.light .cp-result-overlay,
body.cp-body.light .cp-name-modal{ background:rgba(38,25,11,.52) }


body.cp-body .cp-name-panel{
  border-radius:clamp(18px,4vw,22px);
  border:1px solid var(--cpx-card-line);
  background:radial-gradient(120% 100% at 30% -10%,#31220F 0%,#1E1409 62%,#17100A 100%);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
}

body.cp-body.light .cp-name-panel{
  background:linear-gradient(168deg,#FBF6EC,#F2E9D9);
  box-shadow:0 34px 70px -36px rgba(64,40,14,.5);
}
body.cp-body .cp-panel-title,
body.cp-body .cp-submit-title{
  font-family:var(--cpx-f-display); font-weight:600; font-size:1.5rem;
  letter-spacing:-.018em; line-height:1.08; color:var(--cpx-cream);
}
body.cp-body.light .cp-panel-title,
body.cp-body.light .cp-submit-title{ color:var(--cpx-ink) }
body.cp-body .cp-panel-sub{ font-family:var(--cpx-f-ui); font-size:.8125rem; line-height:1.55 }
body.cp-body .cp-panel-close{
  background:transparent; border:0;
  border-radius:50%; color:rgba(244,234,214,.7);
}
body.cp-body .cp-panel-close:hover{ background:rgba(244,234,214,.12); color:var(--cpx-cream) }
body.cp-body.light .cp-panel-close{ color:rgba(31,21,12,.6) }
body.cp-body.light .cp-panel-close:hover{ background:rgba(31,21,12,.07); color:var(--cpx-ink) }

body.cp-body .cp-name-input{
  border-radius:var(--r-sm); border:1px solid var(--cpx-card-line);
  background:rgba(244,234,214,.08); color:var(--cpx-cream);
  font-family:var(--cpx-f-ui); -webkit-text-fill-color:currentColor;
}
body.cp-body.light .cp-name-input{
  background:rgba(255,255,255,.8); color:var(--cpx-ink); border-color:rgba(31,21,12,.22);
  -webkit-text-fill-color:var(--cpx-ink);
}
body.cp-body .cp-name-input:focus{ border-color:var(--cpx-rust); outline:none }
body.cp-body .cp-name-submit{
  min-height:48px; padding:0 24px; border-radius:999px;
  background:var(--cpx-rust); color:#FFF6EA;
  font-family:var(--cpx-f-ui); font-size:.9375rem; font-weight:600;
  box-shadow:0 12px 26px -16px rgba(191,78,28,.95);
  transition:background .28s var(--cpx-e-out), transform .3s var(--cpx-e-spring);
}
body.cp-body .cp-name-submit:hover{ background:var(--cpx-rust-deep); transform:translateY(-1px) }
body.cp-body .cp-name-skip{ font-family:var(--cpx-f-ui); font-size:.8125rem }

/* ── Result card ───────────────────────────────────────────────────────
   Defined once in shared/css/result-card.css, shared with Paw Paths. */

/* ── Completion block ──────────────────────────────────────────────────── */

body.cp-body .cp-share-grid{ border-radius:var(--r-md); border-color:var(--cpx-card-line); background:rgba(244,234,214,.05) }
body.cp-body.light .cp-share-grid{ background:rgba(31,21,12,.04) }

/* ── Character speech bubbles ──────────────────────────────────────────── */


/* ── 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.cp-body .lb-panel{ --lb-accent:var(--cpx-rust) }
body.cp-body.light .lb-panel{ --lb-accent:var(--cpx-rust-deep) }

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

/* ── Increased contrast ────────────────────────────────────────────────
   Connect Paws has no contrast switch of its own, so it follows the
   operating system. Hues are left alone — the four group colours are
   mirrored in the page's own script — and only the edges and weights firm
   up, which is what actually carries legibility here. */
@media (prefers-contrast: more){
  body.cp-body .cp-card{ border-color:rgba(244,234,214,.55); background:rgba(20,13,6,.78) }
  body.cp-body.light .cp-card{ border-color:rgba(31,21,12,.55); background:#FFFFFF }
  body.cp-body .cp-solved-group{ box-shadow:0 0 0 1.5px rgba(255,248,236,.55) }
  body.cp-body.light .cp-solved-group{ box-shadow:0 0 0 1.5px rgba(31,21,12,.45) }
  body.cp-body .cp-solved-words{ color:#FFF8EC }
  body.cp-body .cp-stat-pill{ border-color:rgba(244,234,214,.55) }
  body.cp-body.light .cp-stat-pill{ border-color:rgba(31,21,12,.5); background:#FFFFFF }
  body.cp-body .cp-stat-pill .cp-timer-label,
  body.cp-body .cp-stat-pill .cp-mistakes-label{ color:rgba(244,234,214,.9) }
  body.cp-body.light .cp-stat-pill .cp-timer-label,
  body.cp-body.light .cp-stat-pill .cp-mistakes-label{ color:rgba(31,21,12,.85) }
  body.cp-body .cp-dot{ border-color:rgba(244,234,214,.7) }
  body.cp-body.light .cp-dot{ border-color:rgba(31,21,12,.6) }
  body.cp-body .cp-btn-secondary{ border-color:rgba(244,234,214,.7) }
  body.cp-body.light .cp-btn-secondary{ border-color:rgba(31,21,12,.6); background:#FFFFFF }
  body.cp-body .cp-btn-primary:disabled{ color:rgba(244,234,214,.72); border-color:rgba(244,234,214,.5) }
  body.cp-body.light .cp-btn-primary:disabled{ color:rgba(31,21,12,.7); border-color:rgba(31,21,12,.45) }}

/* ── Short viewports ───────────────────────────────────────────────────── */
@media (max-height:700px){
  body.cp-body{ --cpx-inset-x:8px; --cpx-inset-y:8px }
  body.cp-body .cp-btn{ height:42px }
  body.cp-body .cp-stat-pill{ height:34px }}