/* Stickers and milestones (P2-59, js/nx-rewards.js): round die-cut stickers in the track's colour, a gold ring at
   three stars, an outline with its number for one not earned yet. New ones pop in; with Reduce motion they fade in
   over the same time. Used on play, quizzes, the sticker book and the dashboard. */
.nx-stk { --c: #fedb71; --t: 0deg; position: relative; display: inline-grid; place-items: center; flex: none; width: 64px; height: 64px; transform: rotate(var(--t)); }
.nx-stk.is-s { width: 44px; height: 44px; }
.nx-stk.is-l { width: 88px; height: 88px; }
.nx-stk-disc { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--c); color: #282858; border: 4px solid #fff; box-shadow: 0 0 0 2px #282858, 3px 4px 0 2px #282858; }
.nx-stk.is-s .nx-stk-disc { border-width: 3px; box-shadow: 0 0 0 2px #282858, 2px 3px 0 1px #282858; }
.nx-stk-disc svg { display: block; }
.nx-stk.is-todo { transform: none; }
.nx-stk.is-todo .nx-stk-disc { background: #fff; color: #8a8aa3; border: 3px dashed #a9a9be; box-shadow: none; }
.nx-stk.is-gold .nx-stk-disc { border-color: #ffd23f; box-shadow: 0 0 0 2px #282858, 0 0 0 5px #fff3c4, 3px 5px 0 4px #282858; overflow: hidden; position: relative; }
.nx-stk.is-gold .nx-stk-disc::after { content: ''; position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .75) 50%, transparent 62%); transform: translateX(-120%); animation: nx-stk-shine 2.4s ease-in-out 0.6s 2; pointer-events: none; }
.nx-stk-num { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); min-width: 28px; padding: 1px 7px; border-radius: 999px; border: 2px solid #282858; background: #282858; color: #fedb71; font: 800 14px/1.3 Geist, Inter, system-ui, sans-serif; text-align: center; white-space: nowrap; }
.nx-stk.is-l .nx-stk-num { font-size: 16px; bottom: -11px; }
.nx-stk.is-todo .nx-stk-num { background: #fff; color: #4a4a68; border-color: #a9a9be; }
.nx-stk.is-new { animation: nx-stk-in 0.62s cubic-bezier(.3, 1.6, .5, 1) var(--d, 0s) both; }
@keyframes nx-stk-in { 0% { opacity: 0; transform: scale(0.2) rotate(-30deg); } 70% { opacity: 1; transform: scale(1.12) rotate(calc(var(--t) + 6deg)); } 100% { opacity: 1; transform: rotate(var(--t)); } }
@keyframes nx-stk-shine { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(120%); } }
@keyframes nx-fade { from { opacity: 0; } to { opacity: 1; } }

/* "New in your sticker book", on the end card of a round or a quiz: in the card, under the title, never over it */
.nx-unlocks { margin: 12px 0 4px; padding: 14px 14px 12px; border: 2px solid #282858; border-radius: 18px; background: #fff8dc; text-align: left; }
.nx-unlocks-title { margin: 0 0 10px; font: 800 16px/1.3 Geist, Inter, system-ui, sans-serif; color: #282858; text-align: center; }
/* one compact row (P2-59 review): each sticker over its title, three across even on a phone, so "Play again" stays near */
.nx-unlocks-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); justify-content: center; gap: 16px 12px; margin: 0; padding: 0; list-style: none; }
.nx-unlocks-list:has(> :only-child) { grid-template-columns: minmax(76px, 260px); }
.nx-unlock { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; text-align: center; }
.nx-unlock-text { display: grid; gap: 2px; min-width: 0; }
.nx-unlock-text strong { font-size: 15px; line-height: 1.25; color: #282858; overflow-wrap: anywhere; }
.nx-unlock-text span { font-size: 14px; line-height: 1.3; color: #4a4a68; }
/* on a phone the titles say it; the lines stay in each sticker's name for screen readers, and in the sticker book */
@media (max-width: 479px) { .nx-unlock-text span { display: none; } }
.nx-unlock-text, .nx-unlocks-more { animation: nx-fade 0.4s ease calc(var(--d, 0s) + 0.25s) both; }
.nx-unlocks-more { margin: 10px 0 0; text-align: center; font-size: 14px; font-weight: 700; color: #4a4a68; }
.nx-unlocks-more a, .nx-goal a { color: #282858; font-weight: 800; }

/* The next milestone, close to the "Play again" button: what is left, a small bar, its sticker in outline */
.nx-goal { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 10px 12px; border: 2px dashed #a9a9be; border-radius: 16px; background: #fff; text-align: left; }
.nx-goal-text { flex: 1; min-width: 0; display: grid; gap: 6px; font-size: 15px; line-height: 1.35; color: #282858; }
.nx-goal-text b { font-weight: 800; }
.nx-goal-left { font-size: 14px; color: #4a4a68; }
.nx-goal-bar { display: block; height: 8px; border-radius: 999px; background: #e7e7f0; overflow: hidden; }
.nx-goal-bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: #75c5a8; transform-origin: left; animation: nx-bar-in 0.8s ease 0.5s both; }
@keyframes nx-bar-in { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .nx-stk.is-new { transform: rotate(var(--t)); animation: nx-fade 0.62s ease var(--d, 0s) both !important; }
  .nx-stk.is-gold .nx-stk-disc::after { display: none; }
  .nx-unlocks .nx-unlock-text, .nx-unlocks .nx-unlocks-more { animation: nx-fade 0.4s ease calc(var(--d, 0s) + 0.25s) both !important; }
  .nx-goal .nx-goal-bar i { animation: nx-fade 0.8s ease 0.5s both !important; }
}