/* ============================================================
   rewards — Great Job · Badge reward (gift → open → reveal) ·
             Choose a Buddy · Jr. Profile
   Figma: 6709:24177, 6725:35562/35617/35698, 6725:35788/6730:191484, 6725:31651
   All rules scoped to this group's screens.
   ============================================================ */

/* ---------- shared bits (scoped to the four screens) ---------- */
:is(.scr[data-screen="great-job"], .scr[data-screen="badge"], .scr[data-screen="buddy"], .scr[data-screen="profile"]) .rw-abs { position: absolute; display: block; }
:is(.scr[data-screen="great-job"], .scr[data-screen="badge"], .scr[data-screen="buddy"], .scr[data-screen="profile"]) img { user-select: none; -webkit-user-drag: none; }

/* Top Toolbar → frosted 48px circle button ("Button Overlay Style") */
:is(.scr[data-screen="badge"], .scr[data-screen="buddy"], .scr[data-screen="profile"]) .rw-navbtn {
  position: absolute; top: 48px; width: 48px; height: 48px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 2px solid transparent;
  background:
    linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, .6)) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, .64), rgba(255, 255, 255, 0)) border-box;
  box-shadow: 0 0 8px rgba(20, 19, 19, .08);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer; z-index: 20;
  transition: transform var(--hs-duration-fastest) var(--hs-easing-standard);
}
:is(.scr[data-screen="badge"], .scr[data-screen="buddy"], .scr[data-screen="profile"]) .rw-navbtn:active { transform: scale(.94); }
:is(.scr[data-screen="badge"], .scr[data-screen="buddy"], .scr[data-screen="profile"]) .rw-navbtn.r { left: 311px; }
:is(.scr[data-screen="badge"], .scr[data-screen="buddy"], .scr[data-screen="profile"]) .rw-navbtn.l { left: 16px; }
:is(.scr[data-screen="badge"], .scr[data-screen="buddy"], .scr[data-screen="profile"]) .rw-navbtn img.i24 { width: 24px; height: 24px; }
:is(.scr[data-screen="badge"], .scr[data-screen="buddy"], .scr[data-screen="profile"]) .rw-navbtn img.i32 { width: 32px; height: 32px; }

/* HS Button — Primary / M-Large (48), pill, gradient 2px inside stroke, shadowRaised */
:is(.scr[data-screen="great-job"], .scr[data-screen="badge"], .scr[data-screen="buddy"]) .rw-pill {
  position: absolute; top: 732px; height: 48px; padding: 0 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border-radius: 999px; border: 2px solid transparent;
  font: 700 16px/19.2px var(--hs-font-sans); letter-spacing: -0.48px; white-space: nowrap;
  box-shadow: 0 2px 4px rgba(20, 19, 19, .2);
  cursor: pointer;
  transition: transform var(--hs-duration-fastest) var(--hs-easing-standard), opacity var(--hs-duration-faster) linear;
}
:is(.scr[data-screen="great-job"], .scr[data-screen="badge"], .scr[data-screen="buddy"]) .rw-pill:active { transform: scale(.97); }
/* on-blue "inverse" variant (white fill) */
:is(.scr[data-screen="great-job"], .scr[data-screen="badge"]) .rw-pill.white {
  color: var(--hs-warm-grey-700);
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(180deg, #fff, #f9f4f2) border-box;
}
.scr[data-screen="buddy"] .rw-pill.green {
  color: #fff;
  background:
    linear-gradient(var(--hs-green-300), var(--hs-green-300)) padding-box,
    linear-gradient(180deg, var(--hs-green-200), var(--hs-green-400)) border-box;
}
.scr[data-screen="buddy"] .rw-pill.green img { width: 20px; height: 20px; }
.scr[data-screen="buddy"] .rw-pill.green[aria-disabled="true"] { opacity: .4; cursor: default; pointer-events: none; }

/* Blue reward screens: headline block */
:is(.scr[data-screen="great-job"], .scr[data-screen="badge"]) .rw-head {
  position: absolute; left: 72px; top: 481px; width: 231px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: #fff; text-align: center; white-space: nowrap;
}
:is(.scr[data-screen="great-job"], .scr[data-screen="badge"]) .rw-head h1 {
  margin: 0; font: 900 48px/1 var(--hs-font-sans); letter-spacing: -1.44px; color: #fff;
}
:is(.scr[data-screen="great-job"], .scr[data-screen="badge"]) .rw-head p {
  margin: 0; font: 400 18px/27px var(--hs-font-sans); opacity: .8; color: #fff;
}

/* ============================================================
   great-job — 6709:24177
   ============================================================ */
.scr[data-screen="great-job"] { background: var(--hs-blue-200); }
.scr[data-screen="great-job"] .gj-art { left: 53.36px; top: 239.86px; width: 268.65px; height: 204.09px; }
.scr[data-screen="great-job"] .gj-done { left: 134px; width: 108px; }

/* ============================================================
   badge — gift (6725:35562) → opening (6725:35617) → reveal (6725:35698)
   ============================================================ */
.scr[data-screen="badge"] { background: var(--hs-blue-200); }
.scr[data-screen="badge"] .bd-tap { position: absolute; inset: 100px 0 0 0; z-index: 1; }
.scr[data-screen="badge"] .bd-layer { position: absolute; display: block; transform-origin: 50% 50%; will-change: transform, opacity; pointer-events: none; }

/* (a) gift — Group 2134287459: box 6725:35569 + lid 6725:35577 (render bounds) */
.scr[data-screen="badge"] .bd-gift-box { left: 88px; top: 320.64px; width: 198px; height: 122.72px; z-index: 6; }
.scr[data-screen="badge"] .bd-gift-lid { left: 121px; top: 283.42px; width: 131.17px; height: 41.34px; z-index: 7; }

/* (b) opening — badge 6726:144244, glow Mask group 6725:35653, body 6725:35659, lid 6725:35662 */
.scr[data-screen="badge"] .bd-peek { left: 118px; top: 362.25px; width: 115px; height: 104px; z-index: 2; opacity: 0; }
.scr[data-screen="badge"] .bd-glow { left: 36px; top: 284px; width: 313px; height: 324px; z-index: 3; opacity: 0; }
.scr[data-screen="badge"] .bd-body { left: 58.46px; top: 386.88px; width: 209px; height: 151px; z-index: 6; opacity: 0; }
.scr[data-screen="badge"] .bd-lid  { left: 65.43px; top: 288.32px; width: 198px; height: 85px;  z-index: 7; opacity: 0; }

/* (c) reveal — Badge 6726:144210 */
.scr[data-screen="badge"] .bd-reveal { left: 72.25px; top: 238.12px; width: 231px; height: 208px; z-index: 4; opacity: 0; }

.scr[data-screen="badge"] .bd-head-a,
.scr[data-screen="badge"] .bd-head-c { transition: opacity var(--hs-duration-fast) linear; }
.scr[data-screen="badge"] .bd-head-c,
.scr[data-screen="badge"] .bd-collect { opacity: 0; pointer-events: none; }
.scr[data-screen="badge"] .bd-collect { left: 115px; width: 145px; z-index: 8; transition: opacity var(--hs-duration-fast) linear, transform var(--hs-duration-fastest) var(--hs-easing-standard); }
.scr[data-screen="badge"][data-phase="reveal"] .bd-head-c,
.scr[data-screen="badge"][data-phase="reveal"] .bd-collect { opacity: 1; pointer-events: auto; }
.scr[data-screen="badge"]:not([data-phase="gift"]) .bd-head-a { opacity: 0; }
.scr[data-screen="badge"]:not([data-phase="gift"]) .bd-tap { display: none; }

/* ============================================================
   buddy — Choose a Buddy (6725:35788 / 6730:191484)
   ============================================================ */
.scr[data-screen="buddy"] { background: #F1ECDE; }
.scr[data-screen="buddy"] .by-title {
  position: absolute; left: 24px; top: 116px; width: 327px; margin: 0;
  font: 700 32px/38.4px var(--hs-font-sans); letter-spacing: -0.96px;
  color: var(--hs-warm-grey-700); text-align: center;
}
.scr[data-screen="buddy"] .by-grid {
  position: absolute; left: 32px; top: 179px; width: 312px;
  display: grid; grid-template-columns: repeat(3, 104px); grid-auto-rows: 104px;
}
.scr[data-screen="buddy"] .by-cell {
  position: relative; width: 104px; height: 104px; padding: 0; border: 0; background: none;
  border-radius: 999px; cursor: pointer;
}
.scr[data-screen="buddy"] .by-cell .av {
  position: absolute; left: 16px; top: 16px; width: 72px; height: 72px; border-radius: 50%;
  transition: transform var(--hs-duration-faster) var(--hs-easing-standard);
}
/* press feedback — Figma shows jr_avatar-8 at 88px (72→88) in the pre-selection frame */
.scr[data-screen="buddy"] .by-cell.pressed .av,
.scr[data-screen="buddy"] .by-cell[aria-pressed="true"] .av { transform: scale(1.2222); }
.scr[data-screen="buddy"] .by-cell .ring {
  position: absolute; left: -1px; top: 0; width: 104px; height: 104px;
  transform: rotate(-90deg) scale(.92); opacity: 0;
  transition: opacity var(--hs-duration-fast) linear, transform var(--hs-duration-fast) var(--hs-easing-entrance);
}
.scr[data-screen="buddy"] .by-cell[aria-pressed="true"] .ring { opacity: 1; transform: rotate(-90deg) scale(1); }
.scr[data-screen="buddy"] .by-save { left: 135px; width: 105px; padding: 0 20px; }

/* ============================================================
   profile — 6725:31651 (content runs to y≈898 → vertical scroll)
   ============================================================ */
.scr[data-screen="profile"] { background: #F1ECDE; }
.scr[data-screen="profile"] .pf-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.scr[data-screen="profile"] .pf-canvas { position: relative; width: 375px; height: 932px; }
.scr[data-screen="profile"] .pf-avatar { left: 128px; top: 48px; width: 120px; height: 120px; border-radius: 50%; }
.scr[data-screen="profile"] .pf-edit {
  position: absolute; left: 220px; top: 128px; width: 40px; height: 40px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 2px solid transparent;
  background:
    linear-gradient(var(--hs-green-300), var(--hs-green-300)) padding-box,
    linear-gradient(180deg, var(--hs-green-200), var(--hs-green-400)) border-box;
  box-shadow: 0 2px 4px rgba(20, 19, 19, .2);
  cursor: pointer; z-index: 2;
  transition: transform var(--hs-duration-fastest) var(--hs-easing-standard);
}
.scr[data-screen="profile"] .pf-edit:active { transform: scale(.94); }
.scr[data-screen="profile"] .pf-edit img { width: 24px; height: 24px; }
.scr[data-screen="profile"] .pf-name {
  position: absolute; left: 0; top: 176px; width: 375px; margin: 0; text-align: center;
  font: 900 48px/60px var(--hs-font-sans); letter-spacing: -1.92px; color: #000;
}
.scr[data-screen="profile"] .pf-div { left: 24px; width: 327px; height: 8px; }
.scr[data-screen="profile"] .pf-sec {
  position: absolute; left: 24px; width: 327px; margin: 0;
  font: 700 20px/24px var(--hs-font-sans); letter-spacing: -0.6px; color: var(--hs-warm-grey-700);
}
/* Your Favs — horizontal Action Tiles (pad 24, gap 16) */
.scr[data-screen="profile"] .pf-favs {
  position: absolute; left: 0; top: 324px; width: 375px; height: 138px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
}
.scr[data-screen="profile"] .pf-favs-row { display: flex; gap: 16px; padding: 0 24px; width: max-content; align-items: flex-start; }
.scr[data-screen="profile"] .pf-tile { width: 144px; display: flex; flex-direction: column; gap: 8px; filter: drop-shadow(0 0 4px rgba(20, 19, 19, .08)); }
.scr[data-screen="profile"] .pf-thumb { position: relative; width: 144px; height: 96px; border-radius: 9.6px; overflow: hidden; }
.scr[data-screen="profile"] .pf-thumb .sprite { position: absolute; width: 314.496px; height: 394.003px; max-width: none; }
.scr[data-screen="profile"] .pf-thumb .media { position: absolute; left: 0; bottom: 0; width: 24px; height: 24px; }
.scr[data-screen="profile"] .pf-thumb .media i { position: absolute; inset: 0; background: rgba(20, 19, 19, .6); border-top-right-radius: 32px; }
.scr[data-screen="profile"] .pf-thumb .media img { position: absolute; left: 4px; top: 8px; width: 12px; height: 12px; }
.scr[data-screen="profile"] .pf-thumb .frame { position: absolute; inset: 0; width: 144px; height: 96px; }
.scr[data-screen="profile"] .pf-tile-t {
  margin: 0; font: 700 14px/16.8px var(--hs-font-sans); letter-spacing: -0.42px; color: #000; text-align: center;
}
/* Your Badges — cards */
.scr[data-screen="profile"] .pf-card { position: absolute; left: 24px; width: 327px; height: 166px; background: rgba(255, 255, 255, .6); border-radius: 16px; overflow: hidden; }
.scr[data-screen="profile"] .pf-card-t {
  position: absolute; top: 18px; margin: 0;
  font: 700 16px/19.2px var(--hs-font-sans); letter-spacing: -0.48px; color: var(--hs-warm-grey-700);
}
.scr[data-screen="profile"] .pf-card-n {
  position: absolute; top: 18px; right: 12px; margin: 0;
  font: 700 16px/19.2px var(--hs-font-sans); letter-spacing: -0.48px; color: var(--hs-warm-grey-400); text-align: right;
}
.scr[data-screen="profile"] .pf-card-div { left: 12px; top: 56px; width: 303px; height: 4px; opacity: .4; }
.scr[data-screen="profile"] .pf-badge { left: 21.32px; top: 75.87px; width: 91px; height: 82px; transform-origin: 50% 55%; }
.scr[data-screen="profile"] .pf-badge.pending { opacity: 0; }