/* ==========================================================================
   DAILY PAWS — CLAUDE EDITION
   catch-up-paws.css · the one-time Catch-Up Paw notice on the game pages
   --------------------------------------------------------------------------
   Built by shared/js/catch-up-paws.js. Same frame as the game panels (Pawdle's
   .pw-panel, Paw Paths' .pp-modal): night by default, paper under body.light,
   one rust action. The award is the only large figure; everything else is
   set small so the card reads in a glance.
   Tokens: shared/css/tokens.css.
   ========================================================================== */

.cup-overlay{
  position:fixed; inset:0; z-index:100000;
  display:flex; align-items:center; justify-content:center;
  padding:max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background:rgba(14,9,4,.72);
  overflow-y:auto; overscroll-behavior:contain;
}
body.light .cup-overlay{ background:rgba(38,25,11,.52) }

.cup-notice{
  --cup-ink:    var(--cream);
  --cup-soft:   rgba(244,234,214,.80);
  --cup-muted:  var(--cream-mute);
  --cup-line:   var(--night-line);
  --cup-accent: var(--amber);

  position:relative; box-sizing:border-box;
  width:100%; max-width:360px; margin:auto;
  padding:30px 26px 24px;
  text-align:center;
  color:var(--cup-ink);
  background:radial-gradient(120% 100% at 30% -10%, #31220F 0%, #1E1409 62%, #17100A 100%);
  border:1px solid rgba(244,234,214,.18);
  border-radius:clamp(18px, 4vw, 22px);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
  font-family:var(--f-sans); font-weight:400; line-height:1.5;
}
body.light .cup-notice{
  --cup-ink:    var(--ink);
  --cup-soft:   var(--ink-soft);
  --cup-muted:  var(--muted);
  --cup-line:   var(--line);
  --cup-accent: var(--rust);
  background:linear-gradient(168deg, #FBF6EC, #F2E9D9);
  border-color:rgba(31,21,12,.16);
  box-shadow:0 34px 70px -36px rgba(64,40,14,.5);
}
.cup-notice *, .cup-notice *::before, .cup-notice *::after{ box-sizing:border-box }
.cup-notice p, .cup-notice h2{ margin:0 }

/* The paw sits in a quiet ring rather than as an emoji. */
.cup-notice__mark{
  width:46px; height:46px; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  color:var(--cup-accent);
  background:color-mix(in srgb, var(--cup-accent) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--cup-accent) 32%, transparent);
}
.cup-notice__mark svg{ display:block; width:21px; height:21px }

.cup-notice .cup-notice__eyebrow{
  margin-bottom:6px;
  font-family:var(--f-mono); font-size:.625rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--cup-muted);
}
.cup-notice__title{
  font-family:var(--f-display); font-weight:600;
  font-size:1.625rem; line-height:1.08; letter-spacing:-.02em;
  color:var(--cup-ink); text-wrap:balance;
}
.cup-notice .cup-notice__body{
  max-width:30ch; margin:10px auto 0;
  font-size:.9375rem; line-height:1.5;
  color:var(--cup-soft); text-wrap:pretty;
}

.cup-notice .cup-notice__award{
  margin-top:20px; padding:16px 0 15px;
  border-top:1px solid var(--cup-line);
  border-bottom:1px solid var(--cup-line);
}
.cup-notice__points{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center;
  column-gap:9px; row-gap:2px;
}
.cup-notice__num{
  font-family:var(--f-display); font-weight:600;
  font-size:2.5rem; line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:var(--cup-accent);
}
.cup-notice__unit{
  font-family:var(--f-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--cup-soft);
}
.cup-notice .cup-notice__basis{
  margin-top:8px;
  font-size:.8125rem; line-height:1.45;
  color:var(--cup-muted);
}
.cup-notice .cup-notice__next{
  max-width:32ch; margin:14px auto 0;
  font-size:.8125rem; line-height:1.5;
  color:var(--cup-soft); text-wrap:pretty;
}
.cup-notice__next strong{ font-weight:600; color:var(--cup-ink); white-space:nowrap }

.cup-notice__btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:48px; margin:20px 0 0; padding:0 24px;
  border:1px solid var(--rust); border-radius:var(--r-pill);
  background:var(--rust); color:#FFF6EA;
  font-family:var(--f-sans); font-size:.9375rem; font-weight:600; line-height:1.2; letter-spacing:.005em;
  cursor:pointer; -webkit-appearance:none; appearance:none;
  box-shadow:0 12px 26px -16px rgba(191,78,28,.9);
  -webkit-tap-highlight-color:transparent;
}
.cup-notice__btn:hover{ background:var(--rust-deep); border-color:var(--rust-deep) }
.cup-notice__btn:focus{ outline:none }
.cup-notice__btn:focus-visible{ outline:2px solid var(--cup-accent); outline-offset:3px }

@media (prefers-reduced-motion:no-preference){
  .cup-overlay{ animation:cupFadeIn .22s var(--e-out) both }
  .cup-notice{ animation:cupRise .38s var(--e-out) both }
  .cup-overlay.is-closing{ animation:cupFadeOut .18s ease both }
  .cup-notice__btn{
    transition:background .3s var(--e-out), border-color .3s var(--e-out), transform .3s var(--e-spring);
  }
  .cup-notice__btn:hover{ transform:translateY(-1px) }
  .cup-notice__btn:active{ transform:translateY(1px) scale(.986) }
}
@keyframes cupFadeIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes cupFadeOut{ from{ opacity:1 } to{ opacity:0 } }
@keyframes cupRise{ from{ opacity:0; transform:translateY(14px) scale(.985) } to{ opacity:1; transform:none } }

@media (max-width:380px){
  .cup-notice{ padding:26px 20px 20px }
  .cup-notice__title{ font-size:1.45rem }
  .cup-notice__num{ font-size:2.2rem }
}
@media (max-height:560px){
  .cup-overlay{ align-items:flex-start }
  .cup-notice__mark{ display:none }
}