/* ==========================================================================
   DAILY PAWS — CLAUDE EDITION
   result-card.css · the daily result card shared by Connect Paws and
                     Paw Paths
   --------------------------------------------------------------------------
   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 }
}