/* ==========================================================================
   DAILY PAWS — CLAUDE EDITION
   result-card.css · Connect Paws and Paw Paths result cards, plus the
                     score breakdown shared with Pawdle
   --------------------------------------------------------------------------
   This component was defined in styles.css against the original design
   (#2e1a0c gradient, Bree Serif, legacy orange, an amber halo behind the
   close button) and then corrected separately in each game's stylesheet.
   It is now defined once, against the tokens. Light and dark differ only in
   the --rc-* values. Pawdle's end card is its own component (shared/css/pawdle.css).
   ========================================================================== */

.cp-result-overlay{
  position:fixed; inset:0; z-index:900;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(14,9,4,.72);
}
.cp-result-overlay[hidden]{ display:none }
.light .cp-result-overlay{ background:rgba(38,25,11,.52) }

.cp-result-card{
  --rc-ink:       var(--cream);
  --rc-muted:     var(--cream-mute);
  --rc-faint:     rgba(244,234,214,.45);
  --rc-line:      var(--night-line);
  --rc-line-firm: rgba(244,234,214,.26);
  --rc-accent:    var(--amber);
  --rc-hover:     rgba(244,234,214,.10);

  position:relative; box-sizing:border-box;
  width:min(92vw,380px); max-height:90dvh; overflow-y:auto;
  padding:28px 24px 24px;
  text-align:center;
  background:radial-gradient(120% 100% at 30% -10%, var(--night-3) 0%, var(--night-2) 62%, var(--night) 100%);
  color:var(--rc-ink);
  border:1px solid var(--rc-line);
  border-radius:var(--r-lg);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.85);
  font-family:var(--f-sans); font-weight:400; line-height:1.5;
}
.cp-result-card *{ box-sizing:border-box }

/* Light keeps the wallpaper under a paper wash, as Pawdle's end card does. */
.light .cp-result-card{
  --rc-ink:       var(--ink);
  --rc-muted:     var(--muted);
  --rc-faint:     rgba(31,21,12,.5);
  --rc-line:      rgba(31,21,12,.16);
  --rc-line-firm: var(--line-firm);
  --rc-accent:    var(--rust);
  --rc-hover:     rgba(31,21,12,.06);
  background:
    linear-gradient(168deg, rgba(247,242,232,.93), rgba(241,232,217,.88)),
    url('../../images/wallpaper.webp') center/cover;
  box-shadow:0 34px 70px -36px rgba(64,40,14,.5);
}

/* ── Close: a quiet control, not an amber halo ─────────────────────────── */
.cp-result-close{
  position:absolute; top:10px; right:10px; z-index:2;
  width:40px; height:40px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:var(--r-pill); cursor:pointer;
  font-family:var(--f-sans); font-size:15px; line-height:1;
  color:var(--rc-muted);
  transition:color .22s var(--e-out), background .22s var(--e-out);
}
.cp-result-close:hover{ color:var(--rc-ink); background:var(--rc-hover) }
.cp-result-close span{ position:relative }

/* ── Portrait: a hairline ring ─────────────────────────────────────────── */
.cp-result-avatar{
  width:82px; height:82px; margin:0 auto 12px;
  overflow:hidden; border-radius:50%;
  border:1px solid var(--rc-line-firm);
  background:var(--paper-2);
}
.cp-result-avatar img{ display:block; width:100%; height:100%; object-fit:cover }

/* ── Type ──────────────────────────────────────────────────────────────── */
.cp-result-title{
  margin:0 0 6px;
  font-family:var(--f-display); font-weight:600; font-optical-sizing:auto;
  font-size:1.75rem; letter-spacing:-.02em; line-height:1.05;
  color:var(--rc-ink);
}
.cp-result-kicker{
  font-family:var(--f-mono); font-weight:500; font-size:.75rem;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--rc-accent);
}
.cp-result-summary{
  margin:6px 0 18px;
  font-size:.8125rem; line-height:1.55;
  color:var(--rc-muted);
}

/* ── Stats ─────────────────────────────────────────────────────────────── */
.cp-result-stats{ display:flex; justify-content:center; gap:28px; margin-bottom:20px }
.cp-result-stat{ min-width:60px; text-align:center }
.cp-result-stat strong{
  display:block;
  font-family:var(--f-display); font-weight:600;
  font-size:1.75rem; letter-spacing:-.02em; line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--rc-ink);
}
.cp-result-stat span{
  display:block; margin-top:6px;
  font-family:var(--f-mono); font-size:.625rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--rc-faint);
}

/* ── Actions ───────────────────────────────────────────────────────────── */
.cp-result-action{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:48px; padding:0 20px;
  background:var(--rust); color:#FFF6EA;
  border:0; border-radius:var(--r-pill); cursor:pointer;
  font-family:var(--f-sans); font-size:.9375rem; font-weight:600;
  transition:background .28s var(--e-out), transform .3s var(--e-spring), box-shadow .3s var(--e-out);
}
.cp-result-action:hover{
  background:var(--rust-deep);
  transform:translateY(-1px);
  box-shadow:0 14px 28px -16px rgba(31,21,12,.6);
}
.cp-result-secondary{
  display:block; width:100%; margin-top:8px; padding:10px;
  background:none; border:0; cursor:pointer;
  font-family:var(--f-sans); font-size:.8125rem;
  color:var(--rc-muted);
  text-decoration:underline; text-underline-offset:3px;
}
.cp-result-secondary:hover{ color:var(--rc-ink) }

/* ── Countdown ─────────────────────────────────────────────────────────── */
.cp-result-countdown{ margin-top:14px }
.cp-result-countdown span{
  display:block; margin-bottom:4px;
  font-family:var(--f-mono); font-size:.625rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--rc-faint);
}
.cp-result-countdown strong{
  font-family:var(--f-mono); font-weight:500;
  font-size:1.25rem; letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  color:var(--rc-ink);
}

@media (prefers-reduced-motion:reduce){
  .cp-result-close,.cp-result-action{ transition:none }
  .cp-result-action:hover{ transform:none }
}

/* Weekly score breakdown shared by all three competitive games. */
.cp-result-breakdown{
  margin:20px 0 0; padding:8px 18px 0;
  border:1px solid var(--rc-line); border-radius:var(--r-md);
  background:var(--rc-hover);
}
.cp-score-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px 0;
}
.cp-score-row dt{
  font-family:var(--f-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--rc-muted);
}
.cp-score-row dd{
  margin:0; font-family:var(--f-mono); font-size:1.125rem;
  font-weight:500; font-variant-numeric:tabular-nums; color:var(--rc-ink);
}
.cp-score-total{
  margin-top:4px; padding:14px 0 16px; border-top:1px solid var(--rc-line-firm);
}
.cp-score-total dt{ font-size:.8125rem; color:var(--rc-accent) }
.cp-score-total dd{
  font-family:var(--f-display); font-size:2.5rem; font-weight:600;
  letter-spacing:-.02em; line-height:1; color:var(--rc-accent);
}
.cp-result-score-note{
  margin:8px 0 0; font-size:.75rem; color:var(--rc-muted);
}
.cp-result-summary{ margin:10px 0 18px; font-size:.75rem }

/* Pawdle keeps its own panel, portrait and answer typography. */
.pw-panel--end{
  --rc-ink:var(--pw-cream); --rc-muted:var(--pw-muted);
  --rc-line:rgba(244,234,214,.16); --rc-line-firm:rgba(244,234,214,.26);
  --rc-accent:var(--pwx-amber); --rc-hover:rgba(244,234,214,.10);
}
.light .pw-panel--end{
  --rc-ink:var(--ink); --rc-muted:var(--muted);
  --rc-line:rgba(31,21,12,.16); --rc-line-firm:var(--line-firm);
  --rc-accent:var(--pwx-rust); --rc-hover:rgba(31,21,12,.06);
}
.pw-panel--end .cp-result-breakdown{ margin-top:14px }
.pw-panel--end .cp-result-score-note{ margin-bottom:14px }
.pw-result-performance{ margin:10px 0 18px; font-size:.75rem; color:var(--rc-muted) }

/* The final fallback remains usable when browser sharing and copying are denied. */
.dp-share-dialog{ width:min(440px, calc(100% - 32px)); padding:24px; border:1px solid var(--line-firm); border-radius:var(--r-lg); background:var(--night-2, #2c1a0a); color:var(--cream); font-family:var(--f-sans) }
.dp-share-dialog::backdrop{ background:rgba(14,9,4,.72) }
.dp-share-dialog h2{ margin:0 0 12px; font-family:var(--f-display); font-size:1.5rem }
.dp-share-dialog p{ font-size:.875rem; line-height:1.5 }
.dp-share-dialog textarea{ display:block; width:100%; box-sizing:border-box; min-height:210px; margin:16px 0; padding:12px; border:1px solid rgba(244,234,214,.3); border-radius:12px; background:rgba(244,234,214,.06); color:inherit; font-family:var(--f-mono); font-size:.875rem; resize:vertical }
.dp-share-dialog .cp-result-secondary{ width:100%; color:inherit; border-color:rgba(244,234,214,.4) }
.light .dp-share-dialog{ background:var(--paper); color:var(--ink) }
.light .dp-share-dialog textarea, .light .dp-share-dialog .cp-result-secondary{ border-color:var(--line-firm) }

/* ==========================================================================
   Pass 3 — one shape for the result cards of all three daily games.
   Outcome → points → save status → Daily 3 → next game → secondary actions.
   ========================================================================== */

/* Phone sizing: the card scrolls inside itself, never past the screen. */
.cp-result-overlay{ padding:max(12px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom)) }
.cp-result-card{ overscroll-behavior:contain; -webkit-overflow-scrolling:touch }
.pw-panel--end{ overscroll-behavior:contain }
@media (max-width:480px), (max-height:700px){
  .cp-result-card{ padding:22px 18px 18px }
  .cp-result-avatar{ width:64px; height:64px; margin-bottom:8px }
  .cp-result-title{ font-size:1.5rem }
  .cp-result-breakdown{ margin-top:12px; padding:4px 14px 0 }
  .cp-score-row{ padding:7px 0 }
  .cp-score-total{ padding:10px 0 12px }
  .cp-score-total dd{ font-size:2.1rem }
  .pw-panel--end .pw-end-avatar{ width:64px; height:64px; margin-bottom:8px }
}

/* Whether the points are confirmed (saved) or still the server's preview. */
.cp-result-breakdown dd.is-provisional{ opacity:.62 }
.cp-score-state{
  display:inline-block; margin-left:8px; padding:2px 8px; vertical-align:middle;
  border:1px solid var(--rc-line-firm); border-radius:var(--r-pill);
  font-family:var(--f-mono); font-size:.5625rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--rc-muted);
}
.cp-score-state.is-saved{ color:var(--rc-accent); border-color:currentColor }

/* Saving / Saved / Retry — a quiet chip under the points. */
.dp-save-status{
  margin:12px 0 0; padding:9px 14px; text-align:center;
  border:1px solid var(--rc-line); border-radius:var(--r-md);
  background:var(--rc-hover);
  font-family:var(--f-sans); font-size:.8125rem; line-height:1.45; color:var(--rc-muted);
}
.dp-save-status[hidden]{ display:none }
.dp-save-status[data-state="saved"]{ color:var(--rc-ink); border-color:var(--rc-line-firm) }
.dp-save-status[data-state="saved"]::before{ content:"\2713\00a0"; color:var(--rc-accent); font-weight:700 }
.dp-save-status[data-state="saving"]::before{
  content:""; display:inline-block; width:9px; height:9px; margin-right:8px; vertical-align:baseline;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation:dpSpin .8s linear infinite;
}
.dp-save-status[data-state="retry"],.dp-save-status[data-state="waiting"],
.dp-save-status[data-state="failed"],.dp-save-status[data-state="attemptUsed"],
.dp-save-status[data-state="nameDenied"],.dp-save-status[data-state="needName"]{
  color:var(--rc-ink); border-color:var(--rc-accent);
}
.dp-save-status button,.dp-save-status a{
  min-height:32px; margin:0 0 0 6px; padding:4px 10px;
  border:1px solid currentColor; border-radius:var(--r-pill); background:none;
  font:inherit; font-weight:700; color:var(--rc-accent); cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center;
}
@keyframes dpSpin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){
  .dp-save-status[data-state="saving"]::before{ animation:none; border-right-color:currentColor; opacity:.6 }
}

/* Daily 3 progress and the next game. */
.dp-daily3{ margin-top:16px; text-align:left }
.dp-daily3[hidden]{ display:none }
.dp-daily3-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px }
.dp-daily3-title,.dp-daily3-count{
  font-family:var(--f-mono); font-size:.625rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
}
.dp-daily3-title{ color:var(--rc-accent) }
.dp-daily3-count{ color:var(--rc-muted) }
.dp-daily3-list{ list-style:none; margin:0 0 10px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:6px }
.dp-daily3-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:52px; padding:8px 4px;
  border:1px solid var(--rc-line); border-radius:var(--r-md);
  font-size:.6875rem; font-weight:500; line-height:1.2; text-align:center; color:var(--rc-muted);
}
.dp-daily3-mark{ display:inline-flex; width:15px; height:15px; opacity:.55 }
.dp-daily3-mark svg{ width:100%; height:100% }
.dp-daily3-item.is-done{ color:var(--rc-ink); border-color:var(--rc-line-firm) }
.dp-daily3-item.is-done .dp-daily3-mark{ color:var(--rc-accent); opacity:1 }
.dp-daily3-item.is-here{ background:var(--rc-hover) }
.dp-daily3-done{
  display:grid; gap:8px; padding:14px; text-align:center;
  border:1px solid var(--rc-line-firm); border-radius:var(--r-md); background:var(--rc-hover);
}
.dp-daily3-done strong{ font-family:var(--f-display); font-weight:600; font-size:1.125rem; color:var(--rc-ink) }
.dp-daily3-done span{ font-size:.8125rem; line-height:1.5; color:var(--rc-muted) }

/* Buttons shared by every result card. */
.dp-rbtn{
  box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:48px; padding:0 18px; margin:0;
  border:1px solid var(--rc-line-firm); border-radius:var(--r-pill);
  background:transparent; color:var(--rc-ink); cursor:pointer; text-decoration:none;
  font-family:var(--f-sans); font-size:.9375rem; font-weight:600; letter-spacing:.005em;
  transition:background .25s var(--e-out), border-color .25s var(--e-out), transform .25s var(--e-out);
}
.dp-rbtn:hover{ background:var(--rc-hover) }
.dp-rbtn:focus-visible{ outline:2px solid var(--rc-accent); outline-offset:2px }
.dp-rbtn[disabled]{ opacity:.5; cursor:not-allowed }
.dp-rbtn--primary{ background:var(--rust); border-color:var(--rust); color:#FFF6EA }
.dp-rbtn--primary:hover{ background:var(--rust-deep); border-color:var(--rust-deep) }
.dp-daily3-next{ justify-content:space-between; padding:0 20px }
.dp-daily3-next-kicker{ font-family:var(--f-mono); font-size:.625rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; opacity:.82 }
.dp-daily3-next-name{ font-weight:700 }
.dp-result-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px }
.dp-result-actions .dp-rbtn{ min-height:44px; font-size:.875rem; padding:0 10px }
.dp-result-actions[data-single]{ grid-template-columns:1fr }
.dp-result-home{
  display:flex; align-items:center; justify-content:center; min-height:44px; margin-top:4px;
  font-size:.8125rem; color:var(--rc-muted); text-decoration:underline; text-underline-offset:3px;
}
.dp-result-home:hover{ color:var(--rc-ink) }
.dp-result-home:focus-visible{ outline:2px solid var(--rc-accent); outline-offset:2px; border-radius:4px }
.cp-result-card .cp-result-countdown,.pw-panel--end .pw-end-countdown{ margin-top:6px }
.pw-panel--end .pw-end-countdown{ text-align:center }
.pw-panel--end .pw-end-countdown-lbl{ color:var(--rc-faint, var(--rc-muted)); margin-bottom:4px }
.pw-panel--end .pw-end-countdown-val{ color:var(--rc-ink) }
@media (prefers-reduced-motion:reduce){ .dp-rbtn{ transition:none } }
.dp-result-actions:has(> [hidden]){ grid-template-columns:1fr }

/* Pawdle's overlays sit beneath the masthead, so they start below it rather
   than letting the header cover the top of a panel (most visible on phones and
   short windows). */
.pw-overlay{ padding-top:calc(var(--nav-h,64px) + 8px); padding-bottom:max(12px,env(safe-area-inset-bottom)) }
.pw-overlay .pw-panel{ max-height:calc(100dvh - var(--nav-h,64px) - 20px - env(safe-area-inset-bottom,0px)) }

/* Panels scroll inside themselves; the page behind them never moves. */
.cp-overlay,.pp-overlay,.pw-overlay,.cp-giveup-overlay,.lb-panel{ overscroll-behavior:contain }

/* Paw Paths' result also sits beneath the masthead: start below it. */
#pp-win.pp-overlay{ padding-top:calc(var(--nav-h,64px) + 8px) }
#pp-win .cp-result-card{ max-height:calc(100dvh - var(--nav-h,64px) - 20px - env(safe-area-inset-bottom,0px)) }