/* GENERATED from reward.dp.css by build-dp.cjs, do not edit */
/* Stop 5: quiz reward and Odznaky. App screen width calc(412 * var(--dp)); node build-dp.cjs writes reward.css. */
.s5 .scr { --dp: calc(100cqw / 412); position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--pw) * 0.125); container-type: inline-size; background: #fbf1e6; color: #4e070b; font-family: var(--body); }
.s5 .scr > * { pointer-events: none; }
.s5 .scr b, .s5 .scr small, .s5 .scr em { font-style: normal; }
.s5 .scr i[data-g] { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.s5 .scr i[data-g] svg.yg { display: block; width: calc(20 * var(--dp)); height: calc(20 * var(--dp)); }
.s5 .rw-title { font: 800 calc(26 * var(--dp))/calc(32 * var(--dp)) var(--display); letter-spacing: calc(-0.5 * var(--dp)); }
.s5 .rw-caption { font: 400 calc(12 * var(--dp))/calc(16 * var(--dp)) var(--body); color: #7f6152; }
.s5 .rw-round { width: calc(44 * var(--dp)); height: calc(44 * var(--dp)); flex: none; border-radius: 50%; display: grid; place-items: center; color: #042f1b; }
.s5 .scr .rw-round .yg { width: calc(24 * var(--dp)); height: calc(24 * var(--dp)); }

/* Detail remains under the cream FormSheet and its forest scrim. */
.s5 .rw-detail { position: absolute; inset: 0; background: #fbf1e6; }
.s5 .rw-photo { position: relative; height: calc(300 * var(--dp)); }
.s5 .rw-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 0 calc(24 * var(--dp)) calc(24 * var(--dp)); }
.s5 .rw-photo .rw-round { position: absolute; left: calc(20 * var(--dp)); top: calc(64 * var(--dp)); background: #fff; }
.s5 .rw-place { display: grid; gap: calc(4 * var(--dp)); padding: calc(16 * var(--dp)) calc(20 * var(--dp)); }
.s5 .rw-scrim { position: absolute; inset: 0; background: rgba(4, 47, 27, 0.45); }
.s5 .stat { position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: calc(44 * var(--dp)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(28 * var(--dp)); font: 600 calc(15 * var(--dp))/1 var(--body); color: #fff; }
.s5 .stat b { font-weight: 600; }
.s5 .stat span { display: flex; align-items: center; gap: calc(5 * var(--dp)); }
.s5 .stat svg { display: block; width: calc(16 * var(--dp)); height: calc(16 * var(--dp)); }
.s5 .stat .rw-battery { width: calc(22 * var(--dp)); }

/* Shared FormSheet and Button tokens from spec sections 1 and 2. Bottom inset: calc(34 * var(--dp)). */
.s5 .rw-sheet { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: calc(12 * var(--dp)); padding: calc(8 * var(--dp)) calc(20 * var(--dp)) calc(50 * var(--dp)); border-radius: calc(24 * var(--dp)) calc(24 * var(--dp)) 0 0; background: #fbf1e6; }
.s5 .rw-grab { display: block; width: calc(40 * var(--dp)); height: calc(4 * var(--dp)); flex: none; align-self: center; border-radius: 999px; background: #e8d9cb; margin-bottom: calc(4 * var(--dp)); }
.s5 .rw-head { display: flex; align-items: flex-start; gap: calc(8 * var(--dp)); }
.s5 .rw-head > div { flex: 1; display: grid; gap: calc(4 * var(--dp)); }
.s5 .rw-kicker { display: flex; align-items: center; gap: calc(8 * var(--dp)); margin-bottom: calc(4 * var(--dp)); font: 500 calc(12 * var(--dp))/calc(16 * var(--dp)) var(--body); color: #7f6152; }
.s5 .rw-pill { display: inline-flex; align-items: center; gap: calc(4 * var(--dp)); padding: calc(4 * var(--dp)) calc(8 * var(--dp)); border-radius: 999px; background: #e7ec48; font: 500 calc(12 * var(--dp))/calc(16 * var(--dp)) var(--body); color: #042f1b; white-space: nowrap; }
.s5 .rw-pill.bonus { background: #f4842d; color: #4e070b; }
.s5 .rw-segments { display: flex; gap: calc(4 * var(--dp)); }
.s5 .rw-segments i { flex: 1; height: calc(8 * var(--dp)); border-radius: 999px; background: #042f1b; }
.s5 .rw-prompt { font: 700 calc(20 * var(--dp))/calc(26 * var(--dp)) var(--display); }
.s5 .rw-options { display: grid; gap: calc(12 * var(--dp)); }
.s5 .rw-option { display: flex; align-items: center; gap: calc(12 * var(--dp)); padding: calc(14 * var(--dp)) calc(16 * var(--dp)); border: calc(2 * var(--dp)) solid #fff; border-radius: calc(20 * var(--dp)); background: #fff; font: 400 calc(15 * var(--dp))/calc(22 * var(--dp)) var(--body); }
.s5 .rw-radio { position: relative; width: calc(22 * var(--dp)); height: calc(22 * var(--dp)); flex: none; margin-left: auto; border-radius: 50%; box-shadow: inset 0 0 0 calc(2 * var(--dp)) #e8d9cb; }
.s5 .rw-radio b { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 calc(6 * var(--dp)) #042f1b; visibility: hidden; }
.s5 .rw-actions { display: flex; gap: calc(8 * var(--dp)); margin-top: calc(8 * var(--dp)); }
.s5 .rw-button { display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--dp)); min-height: calc(48 * var(--dp)); padding: 0 calc(24 * var(--dp)); border: calc(1.5 * var(--dp)) solid #f4842d; border-radius: 999px; background: #f4842d; color: #4e070b; font: 600 calc(15 * var(--dp))/calc(20 * var(--dp)) var(--body); white-space: nowrap; }
.s5 .rw-actions .rw-button { flex: 1; }
.s5 .rw-button.outline { border-color: #4e070b; background: transparent; }
.s5 .rw-submit { opacity: 0.5; }

/* Perfect result: peeking wave, RewardSummary, one answer review. */
.s5 .rw-result { visibility: hidden; }
.s5 .rw-result-head { position: relative; display: grid; gap: calc(4 * var(--dp)); padding-top: calc(24 * var(--dp)); text-align: center; }
.s5 .rw-result-head .rw-round { position: absolute; right: 0; top: calc(-8 * var(--dp)); }
.s5 .rw-result .rw-mascot { position: absolute; top: calc(-64 * var(--dp)); left: 50%; translate: -50% 0; width: calc(130 * var(--dp)); height: calc(110 * var(--dp)); object-fit: contain; object-position: center; border-radius: 0; }
.s5 .rw-reward { display: grid; gap: calc(12 * var(--dp)); width: 100%; }
.s5 .rw-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(8 * var(--dp)); }
.s5 .rw-level { padding: calc(18 * var(--dp)); border-radius: calc(20 * var(--dp)); background: #042f1b; }
.s5 .rw-level-row { display: flex; justify-content: space-between; align-items: center; }
.s5 .rw-level-pill { display: inline-flex; align-items: center; gap: calc(6 * var(--dp)); height: calc(30 * var(--dp)); padding: 0 calc(12 * var(--dp)); border-radius: 999px; background: #e7ec48; color: #042f1b; font: 600 calc(13 * var(--dp))/calc(18 * var(--dp)) var(--body); }
.s5 .scr .rw-level-pill .yg { width: calc(15 * var(--dp)); height: calc(15 * var(--dp)); }
.s5 .rw-total { font: 400 calc(12 * var(--dp))/calc(16 * var(--dp)) var(--body); color: rgba(255, 255, 255, 0.7); white-space: nowrap; }
.s5 .rw-total b { color: #fff; font: 800 calc(20 * var(--dp))/calc(24 * var(--dp)) var(--display); }
.s5 .rw-bar { display: flex; height: calc(8 * var(--dp)); overflow: hidden; border-radius: 999px; background: #f4ebdf; }
.s5 .rw-bar > b { display: block; height: 100%; background: #042f1b; }
.s5 .rw-level .rw-bar { margin-top: calc(12 * var(--dp)); background: rgba(255, 255, 255, 0.15); }
.s5 .rw-bar .rw-existing { width: 48%; background: #4ec46e; }
.s5 .rw-bar .rw-gained { width: 6%; background: #e7ec48; border-radius: 0 999px 999px 0; transform: scaleX(0); transform-origin: left; }
.s5 .rw-review { display: grid; gap: calc(8 * var(--dp)); padding: calc(12 * var(--dp)); border-radius: calc(20 * var(--dp)); background: #fff; }
.s5 .rw-review > b { font: 600 calc(15 * var(--dp))/calc(22 * var(--dp)) var(--body); }
.s5 .rw-review .rw-pill { justify-self: start; background: #4ec46e; }
.s5 .scr .rw-review .yg { width: calc(12 * var(--dp)); height: calc(12 * var(--dp)); }

/* AchievementsScreen: family counts, newest unlock first, three-column grid. */
.s5 .rw-badges { position: absolute; inset: 0; padding-top: calc(44 * var(--dp)); background: #fbf1e6; visibility: hidden; }
.s5 .rw-screen-head { display: flex; align-items: center; gap: calc(12 * var(--dp)); padding: calc(8 * var(--dp)) calc(20 * var(--dp)) calc(12 * var(--dp)); }
.s5 .rw-screen-head .rw-round { background: #fff; }
.s5 .rw-screen-title { margin-top: calc(3 * var(--dp)); font: 800 calc(32 * var(--dp))/calc(38 * var(--dp)) var(--display); letter-spacing: calc(-0.5 * var(--dp)); }
.s5 .rw-content { padding: calc(16 * var(--dp)) calc(20 * var(--dp)) calc(32 * var(--dp)); }
.s5 .rw-summary { display: grid; gap: calc(12 * var(--dp)); padding: calc(16 * var(--dp)); border-radius: calc(20 * var(--dp)); background: #042f1b; }
.s5 .rw-summary-row { display: flex; align-items: center; gap: calc(8 * var(--dp)); font: 500 calc(12 * var(--dp))/calc(16 * var(--dp)) var(--body); color: rgba(255, 255, 255, 0.7); }
.s5 .rw-summary-row b { color: #fff; font: 800 calc(32 * var(--dp))/calc(38 * var(--dp)) var(--display); letter-spacing: calc(-0.5 * var(--dp)); }
.s5 .rw-summary .rw-bar { background: rgba(255, 255, 255, 0.15); }
.s5 .rw-summary .rw-bar b { width: 24%; background: #4ec46e; border-radius: 999px; }
.s5 .rw-section-title { display: flex; align-items: center; gap: calc(8 * var(--dp)); margin: calc(24 * var(--dp)) 0 calc(12 * var(--dp)); font: 700 calc(20 * var(--dp))/calc(26 * var(--dp)) var(--display); }
.s5 .rw-count { display: inline-flex; align-items: center; justify-content: center; min-width: calc(18 * var(--dp)); min-height: calc(18 * var(--dp)); padding: 0 calc(5 * var(--dp)); border-radius: 999px; background: #fff; font: 600 calc(10 * var(--dp))/calc(14 * var(--dp)) var(--body); }
.s5 .rw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(10 * var(--dp)); }
.s5 .rw-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--dp)); min-width: 0; padding: calc(12 * var(--dp)) calc(8 * var(--dp)); border-radius: calc(20 * var(--dp)); background: #fff; }
.s5 .rw-tile-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: calc(4 * var(--dp)); min-height: calc(32 * var(--dp)); font: 500 calc(12 * var(--dp))/calc(16 * var(--dp)) var(--body); text-align: center; }
.s5 .rw-tier, .s5 .rw-tile-progress small { font: 500 calc(10 * var(--dp))/calc(12 * var(--dp)) var(--body); color: #7f6152; text-align: center; }
.s5 .rw-tile-progress { display: grid; gap: calc(4 * var(--dp)); align-self: stretch; margin-top: auto; }
.s5 .rw-medal { position: relative; display: grid; place-items: center; flex: none; width: calc(56 * var(--dp)); height: calc(56 * var(--dp)); color: #042f1b; }
.s5 .rw-medal > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.s5 .scr .rw-medal > i .yg { position: relative; width: calc(26 * var(--dp)); height: calc(26 * var(--dp)); }
.s5 .rw-medal.locked { color: #7f6152; }
.s5 .rw-lock { position: absolute; right: calc(-2 * var(--dp)); bottom: calc(-2 * var(--dp)); display: grid; place-items: center; width: calc(20 * var(--dp)); height: calc(20 * var(--dp)); border-radius: 50%; background: #fff; }
.s5 .scr .rw-lock .yg { width: calc(12 * var(--dp)); height: calc(12 * var(--dp)); }
.s5 .rw-glow { position: absolute; inset: calc(-3 * var(--dp)); border: calc(3 * var(--dp)) solid #e7ec48; border-radius: calc(23 * var(--dp)); opacity: 0; }

/* Success toast sits above the app, below the status bar. */
.s5 .rw-toast { position: absolute; z-index: 5; top: calc(56 * var(--dp)); left: calc(16 * var(--dp)); right: calc(16 * var(--dp)); display: flex; align-items: center; gap: calc(12 * var(--dp)); padding: calc(8 * var(--dp)) calc(12 * var(--dp)) calc(8 * var(--dp)) calc(8 * var(--dp)); border-radius: calc(24 * var(--dp)); background: #042f1b; box-shadow: 0 calc(6 * var(--dp)) calc(18 * var(--dp)) rgba(4, 47, 27, 0.22); visibility: hidden; }
.s5 .rw-toast-disc { display: grid; place-items: center; flex: none; width: calc(30 * var(--dp)); height: calc(30 * var(--dp)); border-radius: 50%; background: #e7ec48; color: #042f1b; }
.s5 .scr .rw-toast-disc .yg { width: calc(17 * var(--dp)); height: calc(17 * var(--dp)); }
.s5 .rw-toast-message { flex: 1; font: 600 calc(15 * var(--dp))/calc(22 * var(--dp)) var(--body); color: #fff; }
.s5 .scr .rw-toast-close .yg { width: calc(16 * var(--dp)); height: calc(16 * var(--dp)); color: rgba(255, 255, 255, 0.7); }

@media (prefers-reduced-motion: reduce) {
  .s5 .rw-detail, .s5 .rw-scrim, .s5 .rw-sheet, .s5 .rw-toast { visibility: hidden; }
  .s5 .rw-badges { visibility: visible; }
  .s5 .stat { color: #111; }
}