/* reward — the minutes economy: the parent's Reward Settings beside the kid's Free time.
   Everything inside a phone is sized in iPhone points (var(--pt)). */

[data-scene="reward"] {
  padding: clamp(110px, 15vh, 170px) 0 clamp(90px, 12vh, 140px);
}
.reward-head .lede { margin-top: 18px; }

.reward-stage {
  --phone-w: min(318px, calc((100svh - 150px) / 2.0541), calc((100vw - 2 * var(--gutter) - 56px) / 2));
  display: flex; justify-content: center; align-items: flex-start;
  gap: clamp(32px, 6vw, 96px);
  margin-top: clamp(48px, 7vh, 80px);
  padding: 0 var(--gutter);
}
.reward-col { margin: 0; display: flex; flex-direction: column; align-items: center; }
.reward-col figcaption {
  margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: -0.01em;
}

/* ================= the parent: native iOS grouped list ================= */
.reward-sys {
  background: #f2f2f7; color: #000;
  font-family: var(--sans); letter-spacing: -0.02em;
  -webkit-user-select: none; user-select: none;
}
.reward-sys button { font-family: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.reward-nav {
  position: absolute; top: calc(60 * var(--pt)); left: 0; right: 0; height: calc(44 * var(--pt));
  display: flex; align-items: center; justify-content: center;
  font-size: calc(17 * var(--pt)); font-weight: 600;
}
.reward-list { position: absolute; top: calc(148 * var(--pt)); left: calc(16 * var(--pt)); right: calc(16 * var(--pt)); }
.reward-sec { background: #fff; border-radius: calc(24 * var(--pt)); overflow: hidden; }
.reward-row {
  position: relative; display: flex; align-items: center; gap: calc(10 * var(--pt));
  min-height: calc(51 * var(--pt)); padding: 0 calc(16 * var(--pt));
  font-size: calc(17 * var(--pt)); line-height: 1.2;
}
.reward-row + .reward-row::before,
.reward-eb > .reward-row::before,
.reward-full + .reward-row::before {
  content: ""; position: absolute; top: 0; left: calc(16 * var(--pt)); right: calc(16 * var(--pt));
  height: max(1px, calc(0.5 * var(--pt))); background: rgba(60, 60, 67, 0.15);
}
.reward-row-tall { min-height: calc(65 * var(--pt)); }
.reward-row-seg { min-height: calc(60 * var(--pt)); }
.reward-l { flex: 1; min-width: 0; padding: calc(8 * var(--pt)) 0; overflow-wrap: anywhere; hyphens: auto; }
.reward-v { color: rgba(60, 60, 67, 0.6); white-space: nowrap; font-variant-numeric: tabular-nums; }
.reward-hdr {
  margin: calc(28 * var(--pt)) calc(16 * var(--pt)) calc(10 * var(--pt));
  font-size: calc(17 * var(--pt)); font-weight: 600; color: rgba(60, 60, 67, 0.6);
}
.reward-foot {
  margin: calc(9 * var(--pt)) calc(16 * var(--pt)) 0;
  font-size: calc(13 * var(--pt)); line-height: 1.3; color: rgba(60, 60, 67, 0.6); letter-spacing: -0.005em;
}
.reward-gated.off, .reward-eb.off { display: none; }
.reward-gated, .reward-eb { animation: reward-in 0.35s ease both; }
@keyframes reward-in { from { opacity: 0; } }

/* stepper */
.reward-stepper {
  flex: none; display: flex; align-items: center;
  width: calc(94 * var(--pt)); height: calc(32 * var(--pt));
  border-radius: calc(16 * var(--pt)); background: rgba(118, 118, 128, 0.12); overflow: hidden;
}
.reward-stepper i { width: 1px; height: calc(18 * var(--pt)); background: rgba(60, 60, 67, 0.22); flex: none; }
.reward-step {
  flex: 1; height: 100%; display: grid; place-items: center; color: #000;
  transition: background-color 0.25s;
}
.reward-step svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.reward-step:active, .reward-step.is-pressed { background: rgba(118, 118, 128, 0.2); transition: none; }
.reward-step:disabled { color: rgba(60, 60, 67, 0.3); cursor: default; }

/* switch: parentTint #8A6A3B */
.reward-switch {
  flex: none; position: relative;
  width: calc(63 * var(--pt)); height: calc(28 * var(--pt)); border-radius: calc(14 * var(--pt));
  background: rgba(120, 120, 128, 0.16);
  transition: background-color 0.3s;
}
.reward-switch[aria-checked="true"] { background: #8a6a3b; }
.reward-switch i {
  position: absolute; left: calc(2 * var(--pt)); top: calc(2 * var(--pt));
  width: calc(39 * var(--pt)); height: calc(24 * var(--pt)); border-radius: calc(12 * var(--pt));
  background: #fff; box-shadow: 0 calc(2 * var(--pt)) calc(6 * var(--pt)) rgba(0, 0, 0, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  transition: transform 0.38s var(--spring);
}
.reward-switch[aria-checked="true"] i { transform: translateX(calc(20 * var(--pt))); }
.reward-switch:active i, .reward-switch.is-pressed i { width: calc(44 * var(--pt)); }
.reward-switch[aria-checked="true"]:active i { transform: translateX(calc(15 * var(--pt))); }

.reward-time {
  flex: none; padding: 0 calc(12 * var(--pt)); height: calc(36 * var(--pt));
  display: flex; align-items: center; border-radius: calc(18 * var(--pt));
  background: rgba(118, 118, 128, 0.12); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* segmented control */
.reward-seg {
  position: relative; flex: 1; display: flex; height: calc(32 * var(--pt));
  padding: calc(2 * var(--pt)); border-radius: calc(16 * var(--pt)); background: rgba(118, 118, 128, 0.12);
}
.reward-thumb {
  position: absolute; top: calc(2 * var(--pt)); bottom: calc(2 * var(--pt)); left: calc(2 * var(--pt));
  width: calc((100% - 4 * var(--pt)) / 4); border-radius: calc(14 * var(--pt)); background: #fff;
  box-shadow: 0 calc(3 * var(--pt)) calc(8 * var(--pt)) rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  transition: transform 0.42s var(--spring);
}
.reward-segb {
  position: relative; flex: 1; z-index: 1; font-size: calc(14 * var(--pt)); font-weight: 500;
  border-radius: calc(14 * var(--pt)); transition: opacity 0.2s;
}
.reward-segb[aria-checked="true"] { font-weight: 600; }
.reward-segb:active, .reward-segb.is-pressed { opacity: 0.55; }
.reward-v-end { margin-left: auto; }

.reward-toast {
  position: absolute; left: 50%; bottom: calc(30 * var(--pt)); z-index: 3;
  display: flex; align-items: center; gap: calc(6 * var(--pt));
  padding: calc(10 * var(--pt)) calc(16 * var(--pt)); border-radius: 999px;
  font-size: calc(15 * var(--pt)); font-weight: 500;
  opacity: 0; transform: translate(-50%, calc(14 * var(--pt)));
  transition: opacity 0.3s, transform 0.45s var(--spring);
  pointer-events: none;
}
.reward-toast svg { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); }
.reward-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* a finger, for the autoplay (Simulator's "show touches") */
.reward-touch {
  position: absolute; left: 0; top: 0; z-index: 10;
  width: calc(42 * var(--pt)); height: calc(42 * var(--pt)); margin: calc(-21 * var(--pt)) 0 0 calc(-21 * var(--pt));
  border-radius: 50%; background: rgba(120, 120, 120, 0.38);
  box-shadow: 0 0 0 calc(1.5 * var(--pt)) rgba(255, 255, 255, 0.7);
  opacity: 0; pointer-events: none; transition: opacity 0.16s;
}
.reward-touch.on { opacity: 1; }

/* ================= the kid ================= */
.reward-kid {
  --reward-bg: #efe3c7;
  -webkit-user-select: none; user-select: none;
}
.reward-kid button { -webkit-tap-highlight-color: transparent; font-family: var(--serif); color: inherit; }
.reward-kid svg { flex: none; }
.reward-kid .status { z-index: 8; transition: color 0.3s; }
.reward-sclock { display: inline-block; font-variant-numeric: tabular-nums; }
.reward-sclock.skipping { animation: reward-tick 0.24s steps(1) infinite; }
@keyframes reward-tick { 50% { opacity: 0.55; } }

.reward-app {
  position: absolute; inset: 0; z-index: 1;
  transition: transform 0.5s var(--out), opacity 0.4s;
}
.reward-kid[data-ios] .reward-app { transform: scale(0.88); opacity: 0; pointer-events: none; }

.reward-complete, .reward-home {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.35s;
}
.reward-kid[data-app="complete"] .reward-complete,
.reward-kid[data-app="home"] .reward-home,
.reward-kid[data-app="sheet"] .reward-home { opacity: 1; pointer-events: auto; }

/* ---- lesson complete (LessonCompletionView) ---- */
.reward-sealw { position: absolute; top: calc(117 * var(--pt)); left: 50%; width: calc(140 * var(--pt)); height: calc(140 * var(--pt)); margin-left: calc(-70 * var(--pt)); }
.reward-seal { width: 100%; height: 100%; overflow: visible; }
.reward-seal-body { transform-origin: 70px 70px; filter: drop-shadow(0 4px 10px rgba(201, 166, 107, 0.35)); }
.reward-ct {
  position: absolute; top: calc(283 * var(--pt)); left: 0; right: 0; text-align: center;
  font-weight: 700; font-size: calc(32 * var(--pt)); line-height: 1.25; letter-spacing: -0.01em;
}
.reward-cl {
  position: absolute; top: calc(327 * var(--pt)); left: calc(20 * var(--pt)); right: calc(20 * var(--pt)); text-align: center;
  font-weight: 500; font-size: calc(16 * var(--pt)); color: rgba(26, 26, 26, 0.55);
}
.reward-div {
  position: absolute; top: calc(378 * var(--pt)); left: calc(48 * var(--pt)); right: calc(48 * var(--pt));
  display: flex; align-items: center; gap: calc(12 * var(--pt));
}
.reward-div i { flex: 1; height: max(1px, calc(0.5 * var(--pt))); background: rgba(201, 166, 107, 0.25); }
.reward-div b { width: calc(4 * var(--pt)); height: calc(4 * var(--pt)); background: rgba(201, 166, 107, 0.4); transform: rotate(45deg); }
.reward-cards {
  position: absolute; top: calc(413 * var(--pt)); left: calc(20 * var(--pt)); right: calc(20 * var(--pt));
  display: flex; flex-direction: column; gap: calc(14 * var(--pt));
}
.reward-rc {
  --c: #c4956b;
  display: flex; align-items: center; gap: calc(16 * var(--pt));
  height: calc(83 * var(--pt)); padding: 0 calc(18 * var(--pt));
  background: var(--cream); border-radius: calc(14 * var(--pt));
  box-shadow: inset 0 0 0 calc(0.5 * var(--pt)) color-mix(in srgb, var(--c) 12%, transparent), 0 calc(2 * var(--pt)) calc(4 * var(--pt)) rgba(26, 26, 26, 0.06);
}
.reward-rc-min { --c: #5b8c6b; }
.reward-rc-task { --c: #6b8ba6; }
.reward-rc-ic {
  flex: none; width: calc(52 * var(--pt)); height: calc(52 * var(--pt)); border-radius: calc(12 * var(--pt));
  display: grid; place-items: center; color: var(--c);
  background: color-mix(in srgb, var(--c) 8%, transparent);
  box-shadow: inset 0 0 0 calc(0.5 * var(--pt)) color-mix(in srgb, var(--c) 15%, transparent);
}
.reward-rc-ic svg { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); }
.reward-rc-tx { display: flex; flex-direction: column; gap: calc(1 * var(--pt)); }
.reward-rc-l { font-size: calc(13 * var(--pt)); font-weight: 500; color: rgba(26, 26, 26, 0.55); }
.reward-rc-n { display: flex; align-items: baseline; gap: calc(5 * var(--pt)); }
.reward-rc-n b { font-size: calc(26 * var(--pt)); font-weight: 700; line-height: 1.2; font-variant-numeric: lining-nums; }
.reward-rc-n small { font-size: calc(15 * var(--pt)); font-weight: 500; color: rgba(26, 26, 26, 0.55); }
.reward-rc-min.bump .reward-rc-n b { animation: reward-bump 0.5s var(--spring); }
@keyframes reward-bump { 40% { transform: scale(1.12); } }
.reward-rc-n b { display: inline-block; transform-origin: 0 70%; }
.reward-next {
  position: absolute; top: calc(728 * var(--pt)); left: calc(20 * var(--pt)); right: calc(20 * var(--pt));
  height: calc(54 * var(--pt)); border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--pt));
  background: #fdf6e4; color: var(--app-ink) !important;
  font-size: calc(18 * var(--pt)); font-weight: 600;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.9), 0 calc(8 * var(--pt)) calc(22 * var(--pt)) rgba(138, 106, 59, 0.16);
  transition: transform 0.3s var(--spring);
}
.reward-next svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
.reward-next:active, .reward-next.is-pressed { transform: scale(0.96); }

/* the staggered entrance */
.reward-complete .reward-seal-body { transform: scale(0.3) rotate(-180deg); opacity: 0; }
.reward-complete .reward-seal > circle:first-child { stroke-dasharray: 434; stroke-dashoffset: 434; transform: rotate(-90deg); transform-origin: 70px 70px; }
.reward-complete .reward-ct, .reward-complete .reward-cl, .reward-complete .reward-div,
.reward-complete .reward-rc, .reward-complete .reward-next { opacity: 0; transform: translateY(calc(14 * var(--pt))); }
.reward-complete.play .reward-seal-body { transform: none; opacity: 1; transition: transform 0.8s var(--spring), opacity 0.25s; }
.reward-complete.play .reward-seal > circle:first-child { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--out) 0.15s; }
.reward-complete.play .reward-ct { opacity: 1; transform: none; transition: opacity 0.4s 0.3s, transform 0.5s var(--out) 0.3s; }
.reward-complete.play .reward-cl { opacity: 1; transform: none; transition: opacity 0.4s 0.45s, transform 0.5s var(--out) 0.45s; }
.reward-complete.play .reward-div { opacity: 1; transform: none; transition: opacity 0.4s 0.55s, transform 0.5s var(--out) 0.55s; }
.reward-complete.play .reward-rc { opacity: 1; transform: none; transition: opacity 0.4s, transform 0.55s var(--out); }
.reward-complete.play .reward-rc:nth-child(1) { transition-delay: 0.7s; }
.reward-complete.play .reward-rc:nth-child(2) { transition-delay: 0.8s; }
.reward-complete.play .reward-rc:nth-child(3) { transition-delay: 0.9s; }
.reward-complete.play .reward-next { opacity: 1; transform: none; transition: opacity 0.4s 1.2s, transform 0.5s var(--out) 1.2s; }
.reward-complete.play .reward-next:active, .reward-complete.play .reward-next.is-pressed { transform: scale(0.96); transition: transform 0.15s; }

/* ---- home (HomeView hero) ---- */
.reward-hero {
  position: absolute; top: 0; left: 0; right: 0; height: calc(506 * var(--pt));
  background: radial-gradient(120% 70% at 85% 10%, #10a37a 0%, transparent 60%), #059669;
  border-radius: 0 0 calc(40 * var(--pt)) calc(40 * var(--pt));
  color: #fff;
}
.reward-pill {
  position: absolute; top: calc(61 * var(--pt)); right: calc(16 * var(--pt));
  height: calc(42 * var(--pt)); padding: 0 calc(16 * var(--pt)) 0 calc(10 * var(--pt));
  display: flex; align-items: center; gap: calc(6 * var(--pt));
  border-radius: 999px; color: #fff !important; font-family: var(--sans) !important;
  font-size: calc(19 * var(--pt)); font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 0 0 calc(1 * var(--pt)) rgba(255, 255, 255, 0.35), 0 calc(4 * var(--pt)) calc(14 * var(--pt)) rgba(0, 0, 0, 0.08);
  transition: transform 0.3s var(--spring);
}
.reward-pill:active, .reward-pill.is-pressed { transform: scale(0.94); }
.reward-pill-ic { display: grid; place-items: center; width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); color: rgba(255, 255, 255, 0.92); }
.reward-pill-ic svg { width: 100%; height: 100%; }
.reward-pill-ic svg path[stroke="#fff"] { stroke: #059669; }
.reward-pill.running .reward-pill-ic svg { width: 70%; height: 70%; }
.reward-hi { position: absolute; top: calc(112 * var(--pt)); left: calc(20 * var(--pt)); display: flex; flex-direction: column; gap: calc(3 * var(--pt)); }
.reward-hi span { font-size: calc(15 * var(--pt)); font-weight: 500; color: rgba(255, 255, 255, 0.65); }
.reward-hi b { font-size: calc(26 * var(--pt)); font-weight: 700; line-height: 1.15; }
.reward-streak {
  position: absolute; top: calc(114 * var(--pt)); right: calc(20 * var(--pt));
  display: flex; align-items: center; gap: calc(6 * var(--pt));
  padding: calc(7 * var(--pt)) calc(12 * var(--pt)); border-radius: 999px;
  background: rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 calc(0.5 * var(--pt)) rgba(255, 255, 255, 0.18);
  font-size: calc(16 * var(--pt)); font-weight: 700;
}
.reward-streak svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
.reward-badge {
  position: absolute; top: calc(193 * var(--pt)); left: calc(20 * var(--pt));
  display: flex; align-items: center; gap: calc(6 * var(--pt));
  padding: calc(6 * var(--pt)) calc(12 * var(--pt)); border-radius: 999px;
  background: rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 calc(0.5 * var(--pt)) rgba(255, 255, 255, 0.18);
  font-size: calc(13 * var(--pt)); font-weight: 600; color: rgba(255, 255, 255, 0.9);
}
.reward-badge svg { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); }
.reward-course { position: absolute; top: calc(240 * var(--pt)); left: calc(20 * var(--pt)); font-size: calc(14 * var(--pt)); font-weight: 500; color: rgba(255, 255, 255, 0.6); }
.reward-lt {
  position: absolute; top: calc(264 * var(--pt)); left: calc(20 * var(--pt)); right: calc(20 * var(--pt));
  font-size: calc(32 * var(--pt)); font-weight: 700; line-height: 1.18; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.reward-dots {
  position: absolute; top: calc(358 * var(--pt)); left: calc(20 * var(--pt)); right: calc(20 * var(--pt));
  display: flex; align-items: center; gap: calc(10 * var(--pt));
}
.reward-dots i {
  width: calc(9 * var(--pt)); height: calc(9 * var(--pt)); border-radius: 50%; background: rgba(255, 255, 255, 0.3);
  display: grid; place-items: center; color: #059669;
}
.reward-dots i.done { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); background: #fff; }
.reward-dots i.done svg { width: 72%; height: 72%; }
.reward-dots i.cur { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); background: #fff; box-shadow: 0 0 0 calc(3 * var(--pt)) #059669, 0 0 0 calc(5 * var(--pt)) rgba(255, 255, 255, 0.55); margin: 0 calc(3 * var(--pt)); }
.reward-of { margin-left: auto; font-size: calc(16 * var(--pt)); font-weight: 600; color: rgba(255, 255, 255, 0.6); }
.reward-cont {
  position: absolute; top: calc(418 * var(--pt)); left: calc(20 * var(--pt)); right: calc(20 * var(--pt));
  height: calc(52 * var(--pt)); border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--pt));
  background: rgba(0, 0, 0, 0.22); color: #fff !important; font-size: calc(18 * var(--pt)); font-weight: 600;
  box-shadow: inset 0 0 0 calc(0.5 * var(--pt)) rgba(255, 255, 255, 0.16);
  transition: transform 0.3s var(--spring);
}
.reward-cont svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
.reward-cont:active, .reward-cont.is-pressed { transform: scale(0.97); }
.reward-side {
  position: absolute; top: calc(530 * var(--pt)); left: calc(20 * var(--pt)); right: calc(20 * var(--pt));
  padding: calc(18 * var(--pt)) calc(20 * var(--pt));
  box-shadow: inset 0 0 0 calc(0.5 * var(--pt)) rgba(26, 26, 26, 0.08), 0 calc(2 * var(--pt)) calc(4 * var(--pt)) rgba(26, 26, 26, 0.06);
}
.reward-side-d { font-size: calc(13 * var(--pt)); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #0284c7; }
.reward-side-t { margin-top: calc(4 * var(--pt)); font-size: calc(20 * var(--pt)); font-weight: 700; line-height: 1.2; }
.reward-side-s { margin-top: calc(4 * var(--pt)); font-size: calc(15 * var(--pt)); color: rgba(26, 26, 26, 0.55); }
.reward-tabs {
  position: absolute; bottom: calc(19 * var(--pt)); left: calc(63 * var(--pt)); right: calc(63 * var(--pt));
  height: calc(62 * var(--pt)); border-radius: 999px; padding: calc(4 * var(--pt));
  display: flex; background: rgba(253, 246, 228, 0.86);
}
.reward-tabs span {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--pt));
  border-radius: 999px; color: #1a1a1a; font-family: var(--sans);
}
.reward-tabs span.on { color: #c9a66b; background: rgba(201, 166, 107, 0.16); }
.reward-tabs svg { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); }
.reward-tabs b { font-size: calc(10.5 * var(--pt)); font-weight: 600; }

/* ---- the sheet (RewardActivationSheet, .fraction(0.75)) ---- */
.reward-dim {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2);
  opacity: 0; pointer-events: none; transition: opacity 0.4s;
}
.reward-sheet {
  position: absolute; left: calc(8 * var(--pt)); right: calc(8 * var(--pt)); top: calc(266 * var(--pt)); bottom: calc(9 * var(--pt));
  border-radius: calc(40 * var(--pt)) calc(40 * var(--pt)) calc(48 * var(--pt)) calc(48 * var(--pt));
  background: var(--parch); overflow: hidden;
  box-shadow: 0 calc(-2 * var(--pt)) calc(30 * var(--pt)) rgba(0, 0, 0, 0.12);
  transform: translateY(calc(600 * var(--pt))); visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.5s;
}
.reward-kid[data-app="sheet"] .reward-dim { opacity: 1; pointer-events: auto; }
.reward-kid[data-app="sheet"] .reward-sheet { transform: none; visibility: visible; transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s; }
.reward-grab {
  position: absolute; top: calc(6 * var(--pt)); left: 50%; margin-left: calc(-18 * var(--pt)); z-index: 2;
  width: calc(36 * var(--pt)); height: calc(5 * var(--pt)); border-radius: 3px; background: rgba(26, 26, 26, 0.22); cursor: pointer;
}
.reward-grab::after { content: ""; position: absolute; inset: calc(-12 * var(--pt)) calc(-20 * var(--pt)); }

.reward-act, .reward-run, .reward-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  opacity: 0; pointer-events: none; transform: scale(0.97);
  transition: opacity 0.35s, transform 0.45s var(--out);
}
.reward-kid[data-sheet="act"] .reward-act,
.reward-kid[data-sheet="run"] .reward-run,
.reward-kid[data-sheet="empty"] .reward-empty { opacity: 1; pointer-events: auto; transform: none; }

.reward-st { margin-top: calc(24 * var(--pt)); font-size: calc(28 * var(--pt)); font-weight: 700; line-height: 1.2; }
.reward-avail, .reward-left {
  display: flex; align-items: center; gap: calc(6 * var(--pt));
  font-size: calc(13 * var(--pt)); font-weight: 500; color: rgba(26, 26, 26, 0.55);
}
.reward-avail { margin-top: calc(8 * var(--pt)); }
.reward-avail svg { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); }
.reward-left svg { width: calc(13 * var(--pt)); height: calc(13 * var(--pt)); }
.reward-big {
  margin-top: calc(20 * var(--pt)); font-size: calc(64 * var(--pt)); font-weight: 700; line-height: 1.05;
  color: var(--gold); font-variant-numeric: tabular-nums lining-nums;
}
.reward-bigmin { margin-top: calc(2 * var(--pt)); font-size: calc(13 * var(--pt)); font-weight: 500; color: rgba(26, 26, 26, 0.55); }
.reward-presets {
  align-self: stretch; margin: calc(24 * var(--pt)) calc(20 * var(--pt)) 0;
  display: flex; gap: calc(12 * var(--pt));
}
.reward-pre {
  flex: 1; height: calc(72 * var(--pt)); border-radius: calc(10 * var(--pt));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--pt));
  background: var(--cream); color: var(--app-ink) !important;
  box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.1), 0 calc(2 * var(--pt)) calc(4 * var(--pt)) rgba(26, 26, 26, 0.06);
  transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1), background-color 0.2s, color 0.2s;
}
.reward-pre b { font-size: calc(24 * var(--pt)); font-weight: 700; line-height: 1; }
.reward-pre small { font-size: calc(12 * var(--pt)); font-weight: 500; }
.reward-pre.sel { background: var(--gold); color: #fff !important; transform: scale(1.04); box-shadow: 0 calc(2 * var(--pt)) calc(4 * var(--pt)) rgba(26, 26, 26, 0.06); }
.reward-pre:disabled { color: rgba(26, 26, 26, 0.28) !important; box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.05); cursor: default; }
.reward-pre.is-pressed:not(.sel) { transform: scale(0.97); }
.reward-custom { margin-top: calc(24 * var(--pt)); display: flex; align-items: center; gap: calc(16 * var(--pt)); font-size: calc(13 * var(--pt)); font-weight: 500; color: rgba(26, 26, 26, 0.55); }
.reward-circ {
  width: calc(40 * var(--pt)); height: calc(40 * var(--pt)); border-radius: 50%;
  display: grid; place-items: center; background: var(--cream); color: var(--app-ink) !important;
  box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.1);
  transition: transform 0.25s var(--spring);
}
.reward-circ svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }
.reward-circ:active { transform: scale(0.92); }
.reward-circ:disabled { color: rgba(26, 26, 26, 0.17) !important; cursor: default; transform: none; }
.reward-left { margin-top: calc(24 * var(--pt)); transition: opacity 0.2s, transform 0.2s; }
.reward-left.off { opacity: 0; transform: translateY(calc(-6 * var(--pt))); }

/* hold to activate / hold to add */
.reward-hold {
  position: absolute; left: calc(20 * var(--pt)); right: calc(20 * var(--pt)); bottom: calc(47 * var(--pt));
  height: calc(56 * var(--pt)); border-radius: calc(10 * var(--pt)); overflow: hidden;
  background: color-mix(in srgb, var(--gold) 12%, var(--parch));
  color: var(--gold) !important; touch-action: none; -webkit-touch-callout: none;
  isolation: isolate;
}
.reward-hold-fill {
  position: absolute; inset: 0; border-radius: calc(10 * var(--pt)); background: var(--gold);
  transform: translateX(-100%); will-change: transform;
}
.reward-hold-lab {
  position: relative; z-index: 1; height: 100%;
  display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--pt));
  font-size: calc(16 * var(--pt)); font-weight: 600; transition: color 0.15s;
  pointer-events: none;
}
.reward-hold.is-light .reward-hold-lab { color: #fff; }
.reward-hold-ic { display: grid; place-items: center; width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }
.reward-hold-ic svg { width: 100%; height: 100%; }
.reward-hold:focus-visible, .reward-kid button:focus-visible, .reward-sys button:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }

/* running (RewardRunningView) */
.reward-ring {
  position: relative; margin-top: calc(24 * var(--pt));
  width: calc(232 * var(--pt)); height: calc(232 * var(--pt));
}
.reward-ring svg { width: 100%; height: 100%; }
.reward-arc { transition: stroke-dashoffset 1s linear; }
.reward-ring.pulse { animation: reward-pulse 0.5s var(--spring); }
@keyframes reward-pulse { 45% { transform: scale(1.04); } }
.reward-ring-tx { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6 * var(--pt)); }
.reward-cd { font-size: calc(62 * var(--pt)); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.reward-until { font-size: calc(13 * var(--pt)); font-weight: 500; color: rgba(26, 26, 26, 0.55); }
.reward-addw {
  position: absolute; left: calc(20 * var(--pt)); right: calc(20 * var(--pt)); bottom: calc(109 * var(--pt));
  height: calc(150 * var(--pt));
}
.reward-addh { display: flex; align-items: baseline; justify-content: space-between; }
.reward-addh b { font-size: calc(16 * var(--pt)); font-weight: 600; }
.reward-addh span { font-size: calc(13 * var(--pt)); font-weight: 500; color: rgba(26, 26, 26, 0.55); }
.reward-chips { display: flex; gap: calc(10 * var(--pt)); margin-top: calc(14 * var(--pt)); }
.reward-chip {
  flex: 1; height: calc(46 * var(--pt)); border-radius: calc(10 * var(--pt));
  background: var(--cream); box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.1);
  font-size: calc(15 * var(--pt)); font-weight: 600; color: var(--app-ink) !important;
  transition: background-color 0.2s, color 0.2s;
}
.reward-chip.sel { background: var(--gold); color: #fff !important; box-shadow: none; }
.reward-chip:disabled { color: rgba(26, 26, 26, 0.28) !important; cursor: default; }
.reward-addw .reward-hold { left: 0; right: 0; bottom: 0; }
.reward-hold.off { opacity: 0.5; pointer-events: none; }
.reward-earn {
  display: none; align-items: center; justify-content: center; gap: calc(6 * var(--pt));
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: calc(13 * var(--pt)); font-weight: 500; color: rgba(26, 26, 26, 0.55);
}
.reward-earn svg { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); }
.reward-addw.none > :not(.reward-earn) { display: none; }
.reward-addw.none .reward-earn { display: flex; }
.reward-stop {
  position: absolute; left: calc(20 * var(--pt)); right: calc(20 * var(--pt)); bottom: calc(47 * var(--pt));
  height: calc(46 * var(--pt)); border-radius: calc(10 * var(--pt));
  display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--pt));
  background: var(--cream); box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.1);
  font-size: calc(15 * var(--pt)); font-weight: 600; color: var(--app-ink) !important;
  transition: transform 0.25s var(--spring);
}
.reward-stop svg { width: calc(13 * var(--pt)); height: calc(13 * var(--pt)); }
.reward-stop:active { transform: scale(0.98); }

/* empty */
.reward-empty { justify-content: center; text-align: center; gap: calc(16 * var(--pt)); padding: 0 calc(32 * var(--pt)) calc(80 * var(--pt)); }
.reward-empty-ic {
  width: calc(56 * var(--pt)); height: calc(56 * var(--pt)); border-radius: calc(14 * var(--pt));
  display: grid; place-items: center; color: rgba(26, 26, 26, 0.55); background: rgba(26, 26, 26, 0.06);
}
.reward-empty-ic svg { width: calc(26 * var(--pt)); height: calc(26 * var(--pt)); }
.reward-empty-t { font-size: calc(20 * var(--pt)); font-weight: 600; }
.reward-empty-s { font-size: calc(17 * var(--pt)); color: rgba(26, 26, 26, 0.55); }
.reward-close {
  position: absolute; left: calc(20 * var(--pt)); right: calc(20 * var(--pt)); bottom: calc(47 * var(--pt));
  height: calc(54 * var(--pt)); border-radius: calc(14 * var(--pt));
  font-size: calc(17 * var(--pt)); font-weight: 600; color: var(--gold-deep) !important;
  box-shadow: inset 0 0 0 calc(1.5 * var(--pt)) rgba(201, 166, 107, 0.5);
}

/* ---- iOS home screen: the picked apps behind their shields ---- */
.reward-ios {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, #2c3a4f 0%, #1d2533 55%, #151a23 100%);
  opacity: 0; pointer-events: none; transition: opacity 0.35s;
  font-family: var(--sans);
}
.reward-kid[data-ios] .reward-ios { opacity: 1; pointer-events: auto; }
.reward-apps {
  position: absolute; top: calc(78 * var(--pt)); left: calc(27 * var(--pt)); right: calc(27 * var(--pt));
  display: flex; justify-content: space-between;
  transform: scale(1.12); transition: transform 0.55s var(--out);
}
.reward-kid[data-ios] .reward-apps { transform: none; }
.reward-ap { width: calc(64 * var(--pt)); display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--pt)); font-family: var(--sans); }
.reward-ap-i {
  position: relative; width: calc(64 * var(--pt)); height: calc(64 * var(--pt)); border-radius: calc(15 * var(--pt));
  background: var(--reward-ic, #fff); display: grid; place-items: center; overflow: hidden;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.25);
}
.reward-ap-i svg { width: 56%; height: 56%; }
.reward-ap-i img { width: 100%; height: 100%; }
.reward-ap-i i { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 0.4s; }
.reward-ap-n { position: relative; display: flex; align-items: center; justify-content: center; color: #fff; font-size: calc(12 * var(--pt)); font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.reward-ap-n svg { position: absolute; right: 100%; margin-right: calc(2 * var(--pt)); width: calc(11 * var(--pt)); height: calc(11 * var(--pt)); opacity: 0; transition: opacity 0.4s; }
.reward-ap-n b { font-weight: 500; transition: opacity 0.4s; }
.reward-ios.shielded .reward-ap-i i, .reward-ios.shielded .reward-ap-n svg { opacity: 1; }
.reward-ios.shielded .reward-ap[data-app] .reward-ap-n b { opacity: 0.6; }
.reward-ap[data-app="games"] .reward-ap-i i, .reward-ap[data-app="games"] .reward-ap-n * { transition-delay: 0.08s; }
.reward-ap[data-app="social"] .reward-ap-i i, .reward-ap[data-app="social"] .reward-ap-n * { transition-delay: 0.16s; }
.reward-kid .reward-ap-ll { font-family: var(--sans); transition: transform 0.25s var(--spring); }
.reward-ap-ll:active, .reward-ap-ll.is-pressed { transform: scale(0.9); }
.reward-pdots { position: absolute; bottom: calc(120 * var(--pt)); left: 0; right: 0; display: flex; justify-content: center; gap: calc(8 * var(--pt)); }
.reward-pdots i { width: calc(7 * var(--pt)); height: calc(7 * var(--pt)); border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
.reward-pdots i.on { background: #fff; }

/* the app's own "Time's up!" notification */
.reward-banner {
  position: absolute; top: calc(52 * var(--pt)); left: calc(10 * var(--pt)); right: calc(10 * var(--pt)); z-index: 9;
  display: flex; align-items: center; gap: calc(11 * var(--pt));
  padding: calc(13 * var(--pt)) calc(14 * var(--pt));
  border-radius: calc(24 * var(--pt));
  background: rgba(246, 246, 246, 0.9);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 calc(10 * var(--pt)) calc(30 * var(--pt)) rgba(0, 0, 0, 0.25);
  font-family: var(--sans); color: #000; letter-spacing: -0.01em;
  opacity: 0; transform: translateY(calc(-90 * var(--pt))) scale(0.96);
  transition: transform 0.45s var(--out), opacity 0.25s;
  pointer-events: none;
}
.reward-banner.on { opacity: 1; transform: none; transition: transform 0.55s var(--spring), opacity 0.2s; }
.reward-banner img { flex: none; width: calc(38 * var(--pt)); height: calc(38 * var(--pt)); border-radius: calc(9 * var(--pt)); }
.reward-banner > span { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: calc(15 * var(--pt)); line-height: 1.3; }
.reward-banner b { font-weight: 600; }
.reward-banner small { align-self: flex-start; font-size: calc(13 * var(--pt)); color: rgba(60, 60, 67, 0.6); }

/* ================= phones under 760 px: the parent is a settings card, the kid a phone ================= */
@media (max-width: 760px) {
  .reward-stage {
    flex-direction: column; align-items: center; gap: 36px;
    --phone-w: min(300px, calc(100vw - 2 * var(--gutter) - 40px));
  }
  .reward-col-k { order: -1; }
  .reward-col-p { width: 100%; max-width: 420px; }
  .reward-pphone { width: 100%; aspect-ratio: auto; container-type: normal; }
  .reward-pphone .phone-frame, .reward-pphone .status { display: none; }
  .reward-pphone .phone-screen {
    --pt: 0.95px;
    position: relative; left: 0; top: 0; width: 100%; height: auto;
    border-radius: 28px; padding: 6px 0 18px;
    font-size: 17px;
  }
  .reward-pphone .reward-nav { position: static; height: 50px; }
  .reward-pphone .reward-list { position: static; margin: 0 12px; }
  .reward-pphone .reward-full { display: none; }
  .reward-pphone .reward-hdr:first-child { margin-top: 6px; }
  .reward-pphone .reward-toast { bottom: 12px; }
}

/* ================= reduced motion: no movement, crossfades at most ================= */
@media (prefers-reduced-motion: reduce) {
  [data-scene="reward"] *, [data-scene="reward"] *::before, [data-scene="reward"] *::after {
    animation: none !important;
    transition-property: opacity, color, background-color !important;
    transition-delay: 0s !important;
    transition-duration: 0.2s !important;
  }
  .reward-complete .reward-seal-body, .reward-complete .reward-ct, .reward-complete .reward-cl,
  .reward-complete .reward-div, .reward-complete .reward-rc, .reward-complete .reward-next { transform: none; }
  .reward-complete .reward-seal > circle:first-child { stroke-dashoffset: 0; }
  .reward-sheet { transform: none; opacity: 0; transition-property: opacity, visibility !important; }
  .reward-kid[data-app="sheet"] .reward-sheet { opacity: 1; }
  .reward-apps, .reward-app, .reward-kid[data-ios] .reward-app { transform: none; }
  .reward-act, .reward-run, .reward-empty { transform: none; }
  .reward-banner { transform: none; }
  .reward-hold-fill { transition: none !important; }
}

/* a section header right after a footer sits closer, as in the inset-grouped list */
.reward-foot + .reward-hdr { margin-top: calc(18 * var(--pt)); }
@media (max-width: 760px) {
  .reward-pphone .reward-gated > .reward-hdr:nth-of-type(2) { margin-top: calc(24 * var(--pt)); }
}