/* Motion pieces for the front page (ADR-0152 copy refresh): the season example and the Plus perk loops, ported from the
   setup wizard Gate P page (design/setup-wizard-2026-10-11.html). Every piece shows its finished frame with reduced motion,
   no script, or when paused; each loop plays only while on screen. No numbers or prices. */
.site .levelup {
  margin: 22px 0 8px;
  background: var(--canvas);
  border: var(--outline);
  border-radius: var(--r);
  box-shadow: var(--edge);
  padding: 10px;
  overflow: hidden;
}

/* rw.css */
.rw-loop {
  --rw-bg: #1e2237;
  --rw-text: #f8efa8;
  --rw-muted: #b3a8a9;
  --rw-ink: #191121;
  --rw-surface: #29314c;
  --rw-accent: #f69c4e;
  --rw-green: #6dc688;
  --rw-grey: #63677c;
  --rw-app: ui-rounded, "SF Pro Rounded", -apple-system, "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
  width: 92cqw;
  height: 30cqw;
  margin: 0 auto 1cqw;
  padding: 2.5cqw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--rw-surface);
  border: 0.5cqw solid var(--rw-ink);
  border-radius: 1cqw;
  box-shadow: 0 0.77cqw 0 var(--rw-ink);
  color: var(--rw-text);
  font-family: var(--rw-app);
  overflow: hidden;
}
.rw-loop * {
  box-sizing: border-box;
}
.rw-caps {
  display: grid;
  height: 5cqw;
  align-items: center;
  flex: none;
}
.rw-cap {
  grid-area: 1 / 1;
  font: 700 3.5cqw / 1.2 var(--rw-app);
  color: var(--rw-text);
  white-space: nowrap;
  opacity: 0;
}
.rw-cap3 {
  opacity: 1;
}
.rw-cap1 {
  animation: rw-c1 3.3s linear both;
}
.rw-cap2 {
  animation: rw-c2 3.3s linear both;
}
.rw-cap3 {
  animation: rw-c3 3.3s linear both;
}
.rw-stage {
  position: relative;
  height: 17cqw;
  flex: none;
}

.rw-row {
  display: flex;
  justify-content: center;
  gap: 1.5cqw;
  height: 8cqw;
  padding: 0 0.3cqw;
  margin-top: 4.5cqw;
}
.rw-tile {
  flex: none;
  width: 7.5cqw;
  height: 7.5cqw;
  border: 0.4cqw solid var(--rw-ink);
  border-radius: 0.8cqw;
  box-shadow: 0 0.5cqw 0 var(--rw-ink);
  display: grid;
  place-items: center;
}
.rw-tile svg {
  width: 5cqw;
  height: 5cqw;
  display: block;
}
@keyframes rw-in {
  from {
    opacity: 0;
    scale: 0.6;
  }
}
.rw-t5 {
  animation: rw-slide 3.3s linear both;
}
@keyframes rw-c1 {
  0% {
    opacity: 1;
  }
  25.758% {
    opacity: 1;
  }
  30.303% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rw-c2 {
  0% {
    opacity: 0;
    translate: 0 1cqw;
  }
  30.303% {
    opacity: 0;
    translate: 0 1cqw;
  }
  34.848% {
    opacity: 1;
    translate: 0 0;
  }
  56.061% {
    opacity: 1;
    translate: 0 0;
  }
  60.607% {
    opacity: 0;
    translate: 0 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rw-c3 {
  0% {
    opacity: 0;
    translate: 0 1cqw;
  }
  60.607% {
    opacity: 0;
    translate: 0 1cqw;
  }
  65.152% {
    opacity: 1;
    translate: 0 0;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes rw-slide {
  0% {
    opacity: 0;
    translate: 14cqw 0;
    scale: 1;
  }
  33.333% {
    opacity: 0;
    translate: 14cqw 0;
    scale: 1;
  }
  36.364% {
    opacity: 1;
    translate: 10cqw 0;
    animation-timing-function: ease-out;
  }
  45.455% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    animation-timing-function: ease-out;
  }
  48.485% {
    scale: 1.18;
  }
  54.545% {
    scale: 1;
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rw-loop *,
  .rw-loop *::after {
    animation: none;
  }
  /* The tiles carry their entrance as an inline style, which the rule above cannot beat. */
  .rw-loop .rw-tile {
    animation: none !important;
  }
}

/* rr.css */
.rr-loop {
  --rr-bg: #1e2237;
  --rr-text: #f8efa8;
  --rr-muted: #b3a8a9;
  --rr-ink: #191121;
  --rr-surface: #29314c;
  --rr-accent: #f69c4e;
  --rr-green: #6dc688;
  --rr-grey: #63677c;
  --rr-app: ui-rounded, "SF Pro Rounded", -apple-system, "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
  width: 92cqw;
  height: 30cqw;
  margin: 0 auto 1cqw;
  padding: 2.5cqw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--rr-surface);
  border: 0.5cqw solid var(--rr-ink);
  border-radius: 1cqw;
  box-shadow: 0 0.77cqw 0 var(--rr-ink);
  color: var(--rr-text);
  font-family: var(--rr-app);
  overflow: hidden;
}
.rr-loop * {
  box-sizing: border-box;
}
.rr-caps {
  display: grid;
  height: 5cqw;
  align-items: center;
}
.rr-cap {
  grid-area: 1 / 1;
  font: 700 3.5cqw / 1.2 var(--rr-app);
  color: var(--rr-text);
  white-space: nowrap;
  opacity: 0;
}
.rr-cap3 {
  opacity: 1;
}
.rr-cap1 {
  animation: rr-c1 3.3s linear both;
}
.rr-cap2 {
  animation: rr-c2 3.3s linear both;
}
.rr-cap3 {
  animation: rr-c3 3.3s linear both;
}
.rr-bar {
  position: relative;
  height: 5cqw;
}
.rr-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 2.5cqw;
  background: var(--rr-ink);
}
.rr-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  border-radius: 2.5cqw;
  background: #8a8fa8;
  overflow: hidden;
  animation: rr-fill 3.3s linear both;
}
.rr-fill::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 45%;
  background: rgba(255, 255, 255, 0.22);
}
.rr-m {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.rr-tick {
  width: 0.6cqw;
  height: 2.6cqw;
  background: var(--rr-text);
  box-shadow: 0 0 0 0.25cqw var(--rr-ink);
  border-radius: 0.25cqw;
  animation: rr-tick 0.2s ease-out var(--d) backwards;
}
@keyframes rr-tick {
  from {
    background: var(--rr-grey);
    box-shadow: 0 0 0 0 var(--rr-ink);
    scale: 1 0.8;
  }
  60% {
    scale: 1.8 1.4;
  }
}
.rr-stop {
  width: 4.6cqw;
  height: 4.6cqw;
  border: 0.3cqw solid var(--rr-ink);
  border-radius: 0.4cqw;
  background: var(--rr-green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rr-stop svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.rr-st {
  opacity: 0;
}
.rr-stop {
  animation: rr-pop 0.3s ease-out var(--s) backwards;
}
@keyframes rr-pop {
  50% {
    scale: 1.45;
  }
}
.rr-lbls {
  position: relative;
  height: 3.4cqw;
  margin-top: -1cqw;
}
.rr-lb {
  position: absolute;
  top: 0;
  font: 600 2.9cqw / 1 var(--rr-app);
  color: var(--rr-muted);
  white-space: nowrap;
}
.rr-slot {
  display: grid;
  height: 8cqw;
}
.rr-card {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  padding: 0 1.5cqw 0 2.5cqw;
  background: var(--rr-bg);
  border: 0.5cqw solid var(--rr-ink);
  border-radius: 1cqw;
  box-shadow: 0 0.5cqw 0 var(--rr-ink);
  opacity: 0;
}
.rr-card.rr-last {
  opacity: 1;
  animation: rr-cardin 0.1s ease-out var(--s) backwards;
}
.rr-card:not(.rr-last) {
  animation: rr-card 0.65s linear var(--s);
}
@keyframes rr-card {
  0% {
    opacity: 0;
    translate: 0 1.2cqw;
  }
  15% {
    opacity: 1;
    translate: 0 0;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes rr-cardin {
  from {
    opacity: 0;
    translate: 0 1.2cqw;
  }
}
.rr-nm {
  font: 700 3.5cqw / 1 var(--rr-app);
  color: var(--rr-text);
  white-space: nowrap;
}
.rr-act {
  flex: none;
  display: grid;
  justify-items: end;
  align-items: center;
}
.rr-act > * {
  grid-area: 1 / 1;
}
.rr-btn {
  position: relative;
  flex: none;
  width: 17cqw;
  height: 5.4cqw;
  display: grid;
  place-items: center;
  background: var(--rr-accent);
  border: 0.5cqw solid var(--rr-ink);
  border-radius: 1cqw;
  box-shadow: 0 0.5cqw 0 var(--rr-ink);
  color: var(--rr-ink);
  font: 700 3.3cqw / 1 var(--rr-app);
}
/* the last card: "You tap Given" shows (2.15 s), the tap lands (2.45 s), the button becomes the app's done mark (2.61 s) */
.rr-last .rr-btn {
  opacity: 0;
  animation:
    rr-press 0.22s ease-out var(--p),
    rr-btnout 3.3s step-end both;
}
@keyframes rr-btnout {
  0%,
  79.09% {
    opacity: 1;
  }
  79.1%,
  100% {
    opacity: 0;
  }
}
/* SQCheckMark(state: .verified): a 4pt-cornered square, solid SQ.choreVerified, bold checkmark at 46% in SQ.onAccent; no outline */
.rr-done {
  width: 6.2cqw;
  height: 6.2cqw;
  border-radius: 1.03cqw;
  background: #46d160;
  display: grid;
  place-items: center;
  margin-right: 0.6cqw;
  animation: rr-donein 3.3s linear both;
}
.rr-done svg {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes rr-donein {
  0%,
  79.09% {
    opacity: 0;
    scale: 0.6;
  }
  79.1% {
    opacity: 1;
    scale: 0.6;
  }
  84% {
    scale: 1.25;
  }
  90%,
  100% {
    opacity: 1;
    scale: 1;
  }
}
.rr-btn > * {
  grid-area: 1 / 1;
}
.rr-ring {
  position: absolute;
  inset: -0.6cqw;
  border: 0.5cqw solid var(--rr-text);
  border-radius: 1.5cqw;
  opacity: 0;
  animation: rr-ring 0.32s ease-out var(--p);
}
@keyframes rr-press {
  0% {
    translate: 0 0;
  }
  45% {
    translate: 0 0.5cqw;
    box-shadow: 0 0 0 var(--rr-ink);
    filter: brightness(1.25);
  }
  100% {
    translate: 0 0;
  }
}
@keyframes rr-ring {
  0% {
    opacity: 0.95;
    scale: 0.8;
  }
  100% {
    opacity: 0;
    scale: 1.25;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rr-loop *,
  .rr-loop *::after {
    animation: none;
  }
}
@keyframes rr-fill {
  0% {
    width: 0;
  }
  7.879% {
    width: 0%;
  }
  10.909% {
    width: 3.0%;
  }
  11.212% {
    width: 3.0%;
  }
  14.242% {
    width: 9.714%;
  }
  14.545% {
    width: 9.714%;
  }
  17.576% {
    width: 16.429%;
  }
  17.879% {
    width: 16.429%;
  }
  20.909% {
    width: 23.143%;
  }
  21.212% {
    width: 23.143%;
  }
  24.242% {
    width: 29.857%;
  }
  24.545% {
    width: 29.857%;
  }
  27.576% {
    width: 36.571%;
  }
  27.879% {
    width: 36.571%;
  }
  30.909% {
    width: 43.286%;
  }
  31.212% {
    width: 43.286%;
  }
  34.242% {
    width: 50.0%;
  }
  34.545% {
    width: 50.0%;
  }
  37.576% {
    width: 56.714%;
  }
  37.879% {
    width: 56.714%;
  }
  40.909% {
    width: 63.429%;
  }
  41.212% {
    width: 63.429%;
  }
  44.242% {
    width: 70.143%;
  }
  44.545% {
    width: 70.143%;
  }
  47.576% {
    width: 76.857%;
  }
  47.879% {
    width: 76.857%;
  }
  50.909% {
    width: 83.571%;
  }
  51.212% {
    width: 83.571%;
  }
  54.242% {
    width: 90.286%;
  }
  54.545% {
    width: 90.286%;
  }
  57.576% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}
@keyframes rr-sbg0 {
  0%,
  24.232% {
    background: #63677c;
  }
  24.242%,
  36.051% {
    background: #f8efa8;
  }
  36.061%,
  100% {
    background: #6dc688;
  }
}
@keyframes rr-sst0 {
  0%,
  36.051% {
    opacity: 1;
  }
  36.061%,
  100% {
    opacity: 0;
  }
}
@keyframes rr-sck0 {
  0%,
  36.051% {
    opacity: 0;
  }
  36.061%,
  100% {
    opacity: 1;
  }
}
@keyframes rr-sbg1 {
  0%,
  40.899% {
    background: #63677c;
  }
  40.909%,
  52.717% {
    background: #f8efa8;
  }
  52.727%,
  100% {
    background: #6dc688;
  }
}
@keyframes rr-sst1 {
  0%,
  52.717% {
    opacity: 1;
  }
  52.727%,
  100% {
    opacity: 0;
  }
}
@keyframes rr-sck1 {
  0%,
  52.717% {
    opacity: 0;
  }
  52.727%,
  100% {
    opacity: 1;
  }
}
@keyframes rr-sbg2 {
  0%,
  57.566% {
    background: #63677c;
  }
  57.576%,
  69.384% {
    background: #f8efa8;
  }
  69.394%,
  100% {
    background: #6dc688;
  }
}
@keyframes rr-sst2 {
  0%,
  69.384% {
    opacity: 1;
  }
  69.394%,
  100% {
    opacity: 0;
  }
}
@keyframes rr-sck2 {
  0%,
  69.384% {
    opacity: 0;
  }
  69.394%,
  100% {
    opacity: 1;
  }
}
@keyframes rr-c1 {
  0%,
  20.606% {
    opacity: 1;
  }
  22.424%,
  100% {
    opacity: 0;
  }
}
@keyframes rr-c2 {
  0%,
  22.424% {
    opacity: 0;
    translate: 0 1cqw;
  }
  24.242%,
  61.5% {
    opacity: 1;
    translate: 0 0;
  }
  63%,
  100% {
    opacity: 0;
  }
}
@keyframes rr-c3 {
  0%,
  63% {
    opacity: 0;
    translate: 0 1cqw;
  }
  65.15%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
.rr-s0 {
  animation:
    rr-pop 0.3s ease-out var(--s) backwards,
    rr-sbg0 3.3s step-end both;
}
.rr-s0 .rr-st {
  animation: rr-sst0 3.3s step-end both;
}
.rr-s0 .rr-ckw2 {
  animation: rr-sck0 3.3s step-end both;
}
.rr-s1 {
  animation:
    rr-pop 0.3s ease-out var(--s) backwards,
    rr-sbg1 3.3s step-end both;
}
.rr-s1 .rr-st {
  animation: rr-sst1 3.3s step-end both;
}
.rr-s1 .rr-ckw2 {
  animation: rr-sck1 3.3s step-end both;
}
.rr-s2 {
  animation:
    rr-pop 0.3s ease-out var(--s) backwards,
    rr-sbg2 3.3s step-end both;
}
.rr-s2 .rr-st {
  animation: rr-sst2 3.3s step-end both;
}
.rr-s2 .rr-ckw2 {
  animation: rr-sck2 3.3s step-end both;
}

/* pp.css */
.pp-loop {
  --pp-bg: #1e2237;
  --pp-text: #f8efa8;
  --pp-muted: #b3a8a9;
  --pp-ink: #191121;
  --pp-surface: #29314c;
  --pp-accent: #f69c4e;
  --pp-green: #6dc688;
  --pp-grey: #63677c;
  --pp-app: ui-rounded, "SF Pro Rounded", -apple-system, "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
  width: 92cqw;
  height: 30cqw;
  margin: 0 auto 1cqw;
  padding: 2.5cqw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--pp-surface);
  border: 0.5cqw solid var(--pp-ink);
  border-radius: 1cqw;
  box-shadow: 0 0.77cqw 0 var(--pp-ink);
  color: var(--pp-text);
  font-family: var(--pp-app);
  overflow: hidden;
}
.pp-loop * {
  box-sizing: border-box;
}
.pp-caps {
  display: grid;
  height: 5cqw;
  align-items: center;
  flex: none;
}
.pp-cap {
  grid-area: 1 / 1;
  font: 700 3.5cqw / 1.2 var(--pp-app);
  color: var(--pp-text);
  white-space: nowrap;
  opacity: 0;
}
.pp-cap3 {
  opacity: 1;
}
.pp-cap1 {
  animation: pp-c1 3.3s linear both;
}
.pp-cap2 {
  animation: pp-c2 3.3s linear both;
}
.pp-cap3 {
  animation: pp-c3 3.3s linear both;
}
.pp-stage {
  position: relative;
  height: 17cqw;
  flex: none;
}

.pp-grid {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -7cqw;
  height: 14.5cqw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3cqw;
  padding: 0 0.3cqw;
}
.pp-slot {
  position: relative;
  height: 14cqw;
}
.pp-tile {
  position: absolute;
  inset: 0;
  border: 0.4cqw solid var(--pp-ink);
  border-radius: 0.9cqw;
  box-shadow: 0 0.5cqw 0 var(--pp-ink);
  display: grid;
  place-items: center;
}
.pp-tile svg {
  width: 9cqw;
  height: 9cqw;
  display: block;
}
.pp-j {
  animation: pp-join 0.35s ease-out var(--s) backwards;
}
@keyframes pp-join {
  from {
    opacity: 0;
    translate: 8cqw 0;
    scale: 0.7;
  }
}
.pp-ghost {
  position: absolute;
  inset: 0;
  border: 0.4cqw dashed var(--pp-muted);
  border-radius: 0.9cqw;
  display: grid;
  place-items: center;
  opacity: 0;
  animation: pp-ghost 3.3s linear both;
}
.pp-ghost i {
  position: relative;
  width: 4.4cqw;
  height: 4.4cqw;
  display: block;
}
.pp-ghost i::before,
.pp-ghost i::after {
  content: "";
  position: absolute;
  background: var(--pp-muted);
  border-radius: 0.2cqw;
}
.pp-ghost i::before {
  left: 0;
  right: 0;
  top: 1.8cqw;
  height: 0.8cqw;
}
.pp-ghost i::after {
  top: 0;
  bottom: 0;
  left: 1.8cqw;
  width: 0.8cqw;
}
@keyframes pp-c1 {
  0% {
    opacity: 1;
  }
  21.212% {
    opacity: 1;
  }
  25.758% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes pp-c2 {
  0% {
    opacity: 0;
    translate: 0 1cqw;
  }
  25.758% {
    opacity: 0;
    translate: 0 1cqw;
  }
  30.303% {
    opacity: 1;
    translate: 0 0;
  }
  50% {
    opacity: 1;
    translate: 0 0;
  }
  54.545% {
    opacity: 0;
    translate: 0 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes pp-c3 {
  0% {
    opacity: 0;
    translate: 0 1cqw;
  }
  54.545% {
    opacity: 0;
    translate: 0 1cqw;
  }
  59.091% {
    opacity: 1;
    translate: 0 0;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes pp-ghost {
  0% {
    opacity: 1;
  }
  33.333% {
    opacity: 1;
  }
  36.364% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pp-loop *,
  .pp-loop *::after {
    animation: none;
  }
}

/* ach.css */
.ach-loop {
  --ach-bg: #1e2237;
  --ach-text: #f8efa8;
  --ach-muted: #b3a8a9;
  --ach-ink: #191121;
  --ach-surface: #29314c;
  --ach-accent: #f69c4e;
  --ach-green: #6dc688;
  --ach-grey: #63677c;
  --ach-app: ui-rounded, "SF Pro Rounded", -apple-system, "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
  width: 92cqw;
  height: 30cqw;
  margin: 0 auto 1cqw;
  padding: 2.5cqw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--ach-surface);
  border: 0.5cqw solid var(--ach-ink);
  border-radius: 1cqw;
  box-shadow: 0 0.77cqw 0 var(--ach-ink);
  color: var(--ach-text);
  font-family: var(--ach-app);
  overflow: hidden;
}
.ach-loop * {
  box-sizing: border-box;
}
.ach-caps {
  display: grid;
  height: 5cqw;
  align-items: center;
  flex: none;
}
.ach-cap {
  grid-area: 1 / 1;
  font: 700 3.5cqw / 1.2 var(--ach-app);
  color: var(--ach-text);
  white-space: nowrap;
  opacity: 0;
}
.ach-cap3 {
  opacity: 1;
}
.ach-cap1 {
  animation: ach-c1 3.3s linear both;
}
.ach-cap2 {
  animation: ach-c2 3.3s linear both;
}
.ach-cap3 {
  animation: ach-c3 3.3s linear both;
}
.ach-stage {
  position: relative;
  height: 17cqw;
  flex: none;
}

.ach-slot {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -6.8cqw;
  height: 13.6cqw;
  display: grid;
}
.ach-slot > * {
  grid-area: 1 / 1;
}
.ach-card {
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 0 3cqw 0 2.5cqw;
  background: var(--ach-bg);
  border: 0.5cqw solid var(--ach-ink);
  border-radius: 1cqw;
  box-shadow: 0 0.5cqw 0 var(--ach-ink);
  opacity: 0;
  animation: ach-card 3.3s linear both;
}
.ach-tile {
  flex: none;
  width: 9cqw;
  height: 9cqw;
  border: 0.4cqw solid var(--ach-ink);
  border-radius: 0.9cqw;
  background: var(--ach-text);
  display: grid;
  place-items: center;
  box-shadow: 0 0.4cqw 0 var(--ach-ink);
  animation: ach-tile 3.3s linear both;
}
.ach-tile svg {
  width: 6cqw;
  height: 6cqw;
  display: block;
}
.ach-col {
  display: flex;
  flex-direction: column;
  gap: 1.2cqw;
  min-width: 0;
  flex: 1;
}
.ach-lbl {
  font: 600 2.9cqw / 1 var(--ach-app);
  color: var(--ach-muted);
  white-space: nowrap;
}
.ach-name {
  position: relative;
  align-self: flex-start;
  font: 700 3.8cqw / 1 var(--ach-app);
  white-space: nowrap;
}
.ach-name b {
  display: block;
  font: inherit;
  animation: ach-type 3.3s linear both;
}
.ach-name::after {
  content: "";
  position: absolute;
  left: 100%;
  top: -0.3cqw;
  width: 0.5cqw;
  height: 4.4cqw;
  margin-left: 0.3cqw;
  background: var(--ach-text);
  opacity: 0;
  animation: ach-caret 3.3s linear both;
}
.ach-bar {
  height: 1.6cqw;
  border-radius: 0.8cqw;
  background: var(--ach-ink);
  overflow: hidden;
}
.ach-bar i {
  display: block;
  height: 100%;
  width: 70%;
  border-radius: 0.8cqw;
  background: var(--ach-green);
  animation: ach-prog 3.3s linear both;
}
.ach-pop {
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 0 3cqw 0 2.5cqw;
  background: var(--ach-bg);
  border: 0.5cqw solid var(--ach-text);
  border-radius: 1cqw;
  box-shadow: 0 0.5cqw 0 var(--ach-ink);
  animation: ach-pop 3.3s linear both;
}
.ach-star {
  flex: none;
  width: 9.6cqw;
  height: 9.6cqw;
  border: 0.4cqw solid var(--ach-ink);
  border-radius: 50%;
  background: #f5c542;
  display: grid;
  place-items: center;
}
.ach-star svg {
  width: 6.4cqw;
  height: 6.4cqw;
  display: block;
}
.ach-tx {
  display: flex;
  flex-direction: column;
  gap: 1.3cqw;
  min-width: 0;
}
.ach-t1 {
  font: 700 3.8cqw / 1 var(--ach-app);
  white-space: nowrap;
}
.ach-t2 {
  font: 600 2.9cqw / 1 var(--ach-app);
  color: var(--ach-muted);
  white-space: nowrap;
}
@keyframes ach-c1 {
  0% {
    opacity: 1;
  }
  36.364% {
    opacity: 1;
  }
  40.909% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ach-c2 {
  0% {
    opacity: 0;
    translate: 0 1cqw;
  }
  40.909% {
    opacity: 0;
    translate: 0 1cqw;
  }
  45.455% {
    opacity: 1;
    translate: 0 0;
  }
  62.121% {
    opacity: 1;
    translate: 0 0;
  }
  66.667% {
    opacity: 0;
    translate: 0 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ach-c3 {
  0% {
    opacity: 0;
    translate: 0 1cqw;
  }
  66.667% {
    opacity: 0;
    translate: 0 1cqw;
  }
  71.212% {
    opacity: 1;
    translate: 0 0;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes ach-card {
  0% {
    opacity: 0;
    translate: 0 1.5cqw;
  }
  3.03% {
    opacity: 0;
    translate: 0 1.5cqw;
  }
  12.121% {
    opacity: 1;
    translate: 0 0;
    animation-timing-function: ease-out;
  }
  69.697% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
  77.273% {
    opacity: 0;
    translate: 0 -1cqw;
    scale: 0.96;
  }
  100% {
    opacity: 0;
    translate: 0 -1cqw;
    scale: 0.96;
  }
}
@keyframes ach-tile {
  0% {
    scale: 1;
  }
  43.939% {
    scale: 1;
  }
  48.485% {
    scale: 1.25;
    animation-timing-function: ease-out;
  }
  54.545% {
    scale: 1;
  }
  100% {
    scale: 1;
  }
}
@keyframes ach-type {
  0%,
  16.667% {
    clip-path: inset(-1cqw 100% -1cqw 0);
  }
  43.939%,
  100% {
    clip-path: inset(-1cqw 0 -1cqw 0);
  }
}
.ach-name b {
  animation: ach-type 3.3s steps(13, end) both;
}
@keyframes ach-caret {
  0% {
    opacity: 0;
    left: 0%;
  }
  16.667% {
    opacity: 0;
    left: 0%;
  }
  16.97% {
    opacity: 1;
    left: 0%;
    animation-timing-function: steps(13, end);
  }
  43.939% {
    opacity: 1;
    left: 100%;
  }
  44.242% {
    opacity: 0;
    left: 100%;
  }
  100% {
    opacity: 0;
    left: 100%;
  }
}
@keyframes ach-prog {
  0% {
    width: 0%;
  }
  45.455% {
    width: 0%;
  }
  68.182% {
    width: 70%;
    animation-timing-function: ease-out;
  }
  100% {
    width: 70%;
  }
}
@keyframes ach-pop {
  0% {
    opacity: 0;
    translate: 0 4cqw;
    scale: 0.85;
  }
  71.212% {
    opacity: 0;
    translate: 0 4cqw;
    scale: 0.85;
  }
  75.758% {
    opacity: 1;
    translate: 0 1cqw;
    scale: 0.95;
    animation-timing-function: ease-out;
  }
  84.848% {
    opacity: 1;
    translate: 0 -0.6cqw;
    scale: 1.06;
    animation-timing-function: ease-out;
  }
  90.909% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
  100% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ach-loop *,
  .ach-loop *::after {
    animation: none;
  }
}

/* lvl.css */
.lvl {
  display: block;
  width: 100%;
  height: auto;
  --display: "Bungee", "Avenir Next Condensed", "Arial Black", sans-serif;
  --app: ui-rounded, "SF Pro Rounded", -apple-system, "Helvetica Neue", Arial, sans-serif;
}
/* card 18 level-up reveal on the in-app loot box: base = end frame; plays once when .lv-run is set */
.lvl .lv-drop,
.lvl .lv-shake,
.lvl .lv-rays,
.lvl .lv-brk,
.lvl .lv-ring,
.lvl .lv-perk,
.lvl .lv-star,
.lvl .lv-sheen,
.lvl .lv-conf {
  transform-box: fill-box;
  transform-origin: center;
}
.lvl .lv-brk,
.lvl .lv-ring,
.lvl .lv-flash,
.lvl .lv-sheen,
.lvl .lv-conf {
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .lvl.lv-run .lv-drop {
    animation: lv-drop 0.3s steps(4, end) both;
  }
  .lvl.lv-run .lv-shake {
    animation: lv-shake 0.8s 0.35s linear both;
  }
  .lvl.lv-run .lv-brk {
    animation: lv-brk 1.15s step-end both;
  }
  .lvl.lv-run .lv-flash {
    animation: lv-flash 0.3s 1.15s steps(3, end) both;
  }
  .lvl.lv-run .lv-ring {
    animation: lv-ring 0.5s 1.15s steps(5, end) both;
  }
  .lvl.lv-run .lv-rays {
    animation: lv-rays 0.4s 1.15s steps(3, end) both;
  }
  .lvl.lv-run .lv-conf {
    animation: lv-conf 1.4s var(--d) ease-out both;
  }
  .lvl.lv-run .lv-perk {
    animation: lv-perk 0.5s var(--d) cubic-bezier(0.2, 0.8, 0.3, 1.25) both;
  }
  .lvl.lv-run .lv-star {
    animation: lv-star 0.3s var(--d) steps(3, end) both;
  }
  .lvl.lv-run .lv-sheen {
    animation: lv-sheen 0.5s 2.1s ease-in-out both;
  }
}
@keyframes lv-drop {
  from {
    transform: translateY(-64px);
  }
  to {
    transform: none;
  }
}
@keyframes lv-shake {
  0%,
  100% {
    transform: none;
  }
  10% {
    transform: rotate(-2deg);
  }
  20% {
    transform: rotate(2deg);
  }
  35% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
  65% {
    transform: rotate(-6deg);
  }
  80% {
    transform: rotate(6deg);
  }
  92% {
    transform: rotate(-7deg);
  }
}
@keyframes lv-brk {
  0% {
    opacity: 0;
    transform: scale(1.5);
  }
  30% {
    opacity: 1;
    transform: scale(1.5);
  }
  53% {
    opacity: 1;
    transform: scale(1.33);
  }
  76% {
    opacity: 1;
    transform: scale(1.17);
  }
  99% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes lv-flash {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lv-ring {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  1% {
    opacity: 1;
    transform: scale(0.2);
  }
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes lv-rays {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes lv-conf {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  8% {
    opacity: 1;
  }
  60% {
    opacity: 1;
    transform: translate(var(--cx), var(--cy));
  }
  100% {
    opacity: 0;
    transform: translate(var(--cx), calc(var(--cy) + 50px));
  }
}
@keyframes lv-perk {
  0% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.3);
  }
  70% {
    opacity: 1;
    transform: translate(0, -6px) scale(1.12);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes lv-star {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  60% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes lv-sheen {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  20% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translateX(90px);
  }
}

/* Front-page layout and craft fixes from the design pass */
.rw-caps,
.rr-caps,
.pp-caps,
.ach-caps {
  height: auto;
  min-height: max(22px, 5cqw);
  align-items: start;
}
.rw-cap,
.rr-cap,
.pp-cap,
.ach-cap {
  font-size: max(14px, 3.5cqw);
  white-space: normal;
}
.rw-loop,
.rr-loop,
.pp-loop,
.ach-loop {
  height: auto;
  min-height: 30cqw;
  padding-bottom: 3cqw;
}
.rw-tile {
  width: 11cqw;
  height: 11cqw;
}
.rw-tile svg {
  width: 7cqw;
  height: 7cqw;
}
.rw-t5 {
  outline: 0.6cqw solid var(--rw-accent);
  outline-offset: 0.6cqw;
}
.site .levelup {
  width: min(100%, 560px);
  margin: 22px 0 8px;
}
.lvl .lv-brk,
.lvl .lv-star {
  display: none;
}

/* Achievement medals, unlock burst, season ladder (card 10) */
/* Creative web-only pieces. Scoped under .site .cz; the base style is the finished frame (no JS, reduced motion, paused). */
.site .cz {
  --canvas: #1e2237;
  --surface: #29314c;
  --ink: #191121;
  --orange: #f69c4e;
  --cream: #f8efa8;
  --body: #e6e1d3;
  --mute: #c9c3b4;
  --gold: #ffd24a;
  --kid: #3b82f6;
  --green: #46d160;
  --ahead: #4a5170;
  --purple: #b57bff;
  --pink: #ff7ab6;
  --display: "Bungee", "Arial Black", sans-serif;
  --outline: 2px solid var(--ink);
  --edge: 0 3px 0 var(--ink);
  margin: 0;
  color: var(--body);
  font:
    15px / 1.4 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  container-type: inline-size;
}
.site .cz * {
  box-sizing: border-box;
}
.site .cz .stage {
  position: relative;
  overflow: hidden;
  background: var(--canvas);
  border: var(--outline);
  border-radius: 8px;
  box-shadow: var(--edge);
  height: 340px;
}
.site .cz .head {
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  text-align: center;
  font: 400 clamp(16px, 5.2cqw, 26px) / 1.1 var(--display);
  color: var(--cream);
  text-shadow: 0 3px 0 var(--ink);
  letter-spacing: 0.03em;
  z-index: 5;
}
.site .cz .foot {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.site .cz figcaption {
  font-size: 14px;
  color: var(--mute);
}
.site .cz {
  position: relative;
}
.site .cz .pz {
  position: absolute;
  z-index: 6;
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cream);
  opacity: 0.8;
  cursor: pointer;
  border-radius: 4px;
}
.site .cz .pz:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -4px;
}
.site .cz .pz[hidden] {
  display: none;
}
.site .cz.paused * {
  animation-play-state: paused;
}

/* 1. unlock burst */
.site .cz.burst .rays {
  position: absolute;
  left: 50%;
  top: 68%;
  width: 620px;
  height: 620px;
  margin: -310px 0 0 -310px;
  background: repeating-conic-gradient(
    from 0deg,
    rgb(255 210 74 / 0.28) 0 10deg,
    transparent 10deg 30deg
  );
  -webkit-mask: radial-gradient(circle, #000 8%, transparent 62%);
  mask: radial-gradient(circle, #000 8%, transparent 62%);
}
.site .cz.burst .box {
  position: absolute;
  left: 50%;
  top: 68%;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
}
.site .cz.burst .box i {
  position: absolute;
  display: block;
  border: var(--outline);
  box-shadow: var(--edge);
}
.site .cz.burst .body {
  left: 6px;
  right: 6px;
  bottom: 0;
  height: 58px;
  background: var(--orange);
}
.site .cz.burst .band {
  left: 42px;
  width: 12px;
  bottom: 0;
  height: 58px;
  background: var(--gold);
  border-top: 0;
  border-bottom: 0;
  box-shadow: none;
}
.site .cz.burst .lid {
  left: 0;
  right: 0;
  top: 12px;
  height: 30px;
  background: #ffb468;
  transform-origin: left bottom;
  transform: translateY(-34px) rotate(-18deg);
}
.site .cz.burst .lid::after {
  content: "";
  position: absolute;
  left: 36px;
  width: 12px;
  top: 0;
  bottom: 0;
  background: var(--gold);
}
.site .cz.burst .bit {
  position: absolute;
  left: 50%;
  top: 68%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: var(--outline);
  background: var(--c);
  transform: translate(var(--dx), var(--dy));
  opacity: 0;
}
.site .cz.burst .rcard {
  position: absolute;
  left: 50%;
  top: 68%;
  transform: translate(-50%, -158px);
  width: min(86%, 260px);
  text-align: center;
  padding: 10px 12px;
  background: var(--surface);
  border: var(--outline);
  border-radius: 4px;
  box-shadow: var(--edge);
}
.site .cz.burst .rcard small {
  display: block;
  font: 400 11px / 1 var(--display);
  color: var(--gold);
  letter-spacing: 0.08em;
}
.site .cz.burst .rcard b {
  display: block;
  margin-top: 6px;
  font: 400 20px / 1.1 var(--display);
  color: var(--cream);
}
@media (prefers-reduced-motion: no-preference) {
  .site .cz.burst.run:not(.paused) :is(.rays, .box, .lid, .bit, .rcard) {
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
  }
  .site .cz.burst.run:not(.paused) .rays {
    animation-name: z-rays;
  }
  .site .cz.burst.run:not(.paused) .box {
    animation-name: z-shake;
  }
  .site .cz.burst.run:not(.paused) .lid {
    animation-name: z-lid;
  }
  .site .cz.burst.run:not(.paused) .bit {
    animation-name: z-bit;
  }
  .site .cz.burst.run:not(.paused) .rcard {
    animation-name: z-card;
  }
  @keyframes z-rays {
    0%,
    38% {
      opacity: 0;
      transform: rotate(0);
    }
    40% {
      opacity: 1;
    }
    100% {
      opacity: 1;
      transform: rotate(60deg);
    }
  }
  @keyframes z-shake {
    0%,
    8% {
      transform: none;
    }
    10% {
      transform: translate(-4px, 0);
    }
    12% {
      transform: translate(4px, 0);
    }
    14% {
      transform: translate(-4px, 0);
    }
    16% {
      transform: translate(4px, 0);
    }
    18%,
    100% {
      transform: none;
    }
  }
  @keyframes z-lid {
    0%,
    36% {
      transform: none;
    }
    38% {
      transform: translateY(-34px) rotate(-18deg);
    }
    100% {
      transform: translateY(-34px) rotate(-18deg);
    }
  }
  @keyframes z-bit {
    0%,
    37% {
      opacity: 0;
      transform: translate(0, 0);
      animation-timing-function: steps(8, end);
    }
    38% {
      opacity: 1;
    }
    60%,
    100% {
      opacity: 0;
      transform: translate(var(--dx), var(--dy));
    }
  }
  @keyframes z-card {
    0%,
    40% {
      opacity: 0;
      transform: translate(-50%, -60px);
    }
    48%,
    92% {
      opacity: 1;
      transform: translate(-50%, -158px);
    }
    98%,
    100% {
      opacity: 0;
      transform: translate(-50%, -158px);
    }
  }
}
@media (prefers-reduced-motion: no-preference) {
  .site .cz.burst .lid {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site .cz.burst .lid {
    transform: translateY(-34px) rotate(-18deg);
  }
  .site .cz.burst .bit {
    opacity: 1;
  }
}

/* 2. medals rain */
.site .cz.medals .shelf {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 34px;
  height: 10px;
  background: var(--ahead);
  border: var(--outline);
  box-shadow: var(--edge);
}
.site .cz.medals .row {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 50px;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
.site .cz.medals .m {
  width: 18cqw;
  max-width: 96px;
  text-align: center;
}
.site .cz.medals .m svg {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}
.site .cz.medals .m span {
  display: block;
  margin-top: 4px;
  font: 400 clamp(8px, 2.4cqw, 11px) / 1.15 var(--display);
  color: var(--cream);
  letter-spacing: 0.02em;
}
.site .cz.medals .flash {
  position: absolute;
  inset: 0;
  background: var(--gold);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .site .cz.medals.run:not(.paused) .m {
    animation: z-drop 7s infinite both;
  }
  .site .cz.medals.run:not(.paused) .m:nth-child(2) {
    animation-delay: 0.35s;
  }
  .site .cz.medals.run:not(.paused) .m:nth-child(3) {
    animation-delay: 0.7s;
  }
  .site .cz.medals.run:not(.paused) .m:nth-child(4) {
    animation-delay: 1.05s;
  }
  .site .cz.medals.run:not(.paused) .m:nth-child(5) {
    animation-delay: 1.4s;
  }
  @keyframes z-drop {
    0% {
      opacity: 0;
      transform: translateY(-300px) rotate(-20deg);
      animation-timing-function: steps(9, end);
    }
    10% {
      opacity: 1;
      transform: translateY(0) rotate(0);
    }
    13% {
      transform: translateY(-16px);
      animation-timing-function: steps(3, end);
    }
    16%,
    88% {
      opacity: 1;
      transform: none;
    }
    96%,
    100% {
      opacity: 0;
      transform: none;
    }
  }
}

/* 3. season ladder: --p (0 to 1) set by motion.js's loop; the finished ladder (1) is the base frame and shows under reduced motion. Parallax layers read it. */
.site .cz.sladder {
  --p: 1;
}
.site .cz.sladder .stage {
  height: 300px;
}
.site .cz.sladder .sky,
.site .cz.sladder .hills,
.site .cz.sladder .near {
  position: absolute;
  left: -35%;
  right: -35%;
  bottom: 0;
  will-change: transform;
}
/* The hills slide left by up to 140px and the near ground by up to 260px as --p reaches 1: their right ends stay past the card,
   so the finished ladder never shows a layer's cut-off edge. */
.site .cz.sladder .hills {
  right: min(-35%, -150px);
}
.site .cz.sladder .near {
  right: min(-35%, -270px);
}
/* The title keeps clear of the Pause control. */
.site .cz.sladder .head {
  padding-inline: 48px;
}
.site .cz.sladder .sky {
  top: 0;
  background:
    radial-gradient(circle, #fff 1.5px, transparent 2px) 0 0 / 46px 46px,
    radial-gradient(circle, var(--cream) 1.5px, transparent 2px) 23px 23px / 46px 46px;
  opacity: 0.35;
  transform: translateX(calc(var(--p) * -60px));
}
.site .cz.sladder .hills {
  height: 46%;
  background: var(--ahead);
  clip-path: polygon(
    0 60%,
    8% 38%,
    16% 58%,
    26% 30%,
    38% 62%,
    50% 36%,
    62% 60%,
    74% 28%,
    86% 56%,
    100% 40%,
    100% 100%,
    0 100%
  );
  opacity: 0.7;
  transform: translateX(calc(var(--p) * -140px));
}
.site .cz.sladder .near {
  height: 28%;
  background: var(--surface);
  clip-path: polygon(
    0 50%,
    12% 20%,
    24% 50%,
    40% 10%,
    58% 50%,
    72% 24%,
    88% 54%,
    100% 30%,
    100% 100%,
    0 100%
  );
  transform: translateX(calc(var(--p) * -260px));
}
.site .cz.sladder .track {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 150px;
  height: 22px;
  border: var(--outline);
  border-radius: 3px;
  background: var(--ink);
  overflow: hidden;
  box-shadow: var(--edge);
}
.site .cz.sladder .fill {
  position: absolute;
  inset: 0;
  background: var(--kid);
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 17px,
    rgb(25 17 33 / 0.55) 17px 19px
  );
  transform-origin: left;
  transform: scaleX(var(--p));
}
.site .cz.sladder .nodes {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 132px;
  display: flex;
  justify-content: space-between;
}
.site .cz.sladder .n {
  width: 12cqw;
  max-width: 56px;
  aspect-ratio: 1;
  border: var(--outline);
  border-radius: 4px;
  box-shadow: var(--edge);
  background: var(--ahead);
  color: var(--mute);
  display: grid;
  place-items: center;
  font: 400 clamp(10px, 3cqw, 14px) / 1 var(--display);
  transform: translateY(calc(var(--lift, 0) * -10px));
}
.site .cz.sladder .n.on {
  background: var(--gold);
  color: var(--ink);
  --lift: 1;
}
/* The app's own prize art (the self-hosted Fluent icons the app shows), dim until its mark is reached. */
.site .cz.sladder .n {
  position: relative;
}
.site .cz.sladder .n img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  opacity: 0.6;
  filter: grayscale(0.5);
}
.site .cz.sladder .n.on img {
  opacity: 1;
  filter: none;
}
/* The big one gets the party: a larger square that pops, with confetti flung when it is reached. */
.site .cz.sladder .n:last-child {
  width: 15cqw;
  max-width: 70px;
}
.site .cz.sladder .n .cf {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3px;
  background: var(--c);
  border: 1px solid var(--ink);
  pointer-events: none;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .site .cz.sladder .n:last-child.boom {
    animation: z-big-pop 0.6s steps(6, end);
  }
  .site .cz.sladder .n.boom .cf {
    animation: z-confetti 1.3s ease-out var(--d, 0s) both;
  }
}
@keyframes z-big-pop {
  0% {
    transform: translateY(0) scale(1);
  }
  35% {
    transform: translateY(-18px) scale(1.3);
  }
  100% {
    transform: translateY(-10px) scale(1);
  }
}
@keyframes z-confetti {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--r));
  }
}
.site .cz.sladder .lab {
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  position: absolute;
  left: 6%;
  right: 6%;
  top: 196px;
  display: flex;
  justify-content: space-between;
  font: 400 clamp(10px, 2.3cqw, 11px) / 1.15 var(--display);
  color: var(--cream);
}
.site .cz.sladder .lab span {
  width: 17cqw;
  max-width: 64px;
  margin-inline: -2.5cqw;
  text-align: center;
  overflow-wrap: normal;
}

/* Mission report card (listing page card 10) */
/* Sidequest Mission report (weekly card). Scoped under .site .mr. Base style is the finished frame; .run plays it once (<=5 s). */
.site .mr {
  --canvas: #1e2237;
  --surface: #29314c;
  --ink: #191121;
  --orange: #f69c4e;
  --cream: #f8efa8;
  --body: #e6e1d3;
  --mute: #c9c3b4;
  --gold: #ffd24a;
  --green: #46d160;
  --display: "Bungee", "Arial Black", sans-serif;
  --outline: 2px solid var(--ink);
  --edge: 0 3px 0 var(--ink);
  --r: 4px;
  --fs: clamp(14px, 3.5cqw, 17px);
  --g: clamp(10px, 3cqw, 16px);
  container-type: inline-size;
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--g);
  padding: calc(var(--g) + 2px) var(--g) calc(var(--g) + 4px);
  background: var(--canvas);
  border: var(--outline);
  border-radius: 8px;
  box-shadow: var(--edge);
  color: var(--body);
  font:
    var(--fs) / 1.35 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}
.site .mr * {
  box-sizing: border-box;
  margin: 0;
}
.site .mr .t,
.site .mr .sub {
  padding-right: 36px;
}
.site .mr .t {
  font: 400 clamp(20px, 6cqw, 28px) / 1.1 var(--display);
  color: var(--cream);
  letter-spacing: 0.03em;
}
.site .mr .sub {
  margin-top: calc(var(--g) * -0.6);
  color: var(--mute);
}
.site .mr .m {
  color: var(--mute);
  font-size: var(--fs);
  text-wrap: balance;
}
.site .mr .c {
  background: var(--surface);
  border: var(--outline);
  border-radius: var(--r);
  box-shadow: var(--edge);
  padding: var(--g);
}
.site .mr .head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  outline: 2px solid rgb(255 210 74 / 0.5);
  outline-offset: -5px;
  padding: calc(var(--g) + 3px);
}
.site .mr .big {
  text-wrap: balance;
  font:
    700 clamp(17px, 4.6cqw, 22px) / 1.25 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  color: var(--body);
}
.site .mr .bars {
  display: flex;
  flex-direction: column;
  gap: calc(var(--g) * 0.9);
}
.site .mr .bar {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.site .mr .bh {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.site .mr .l {
  font: 400 12px / 1 var(--display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.site .mr .l u {
  text-decoration: none;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0;
  margin-right: 6px;
}
.site .mr .bh b {
  color: var(--k);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.site .mr .track {
  position: relative;
  height: 12px;
  background: var(--surface);
  border: var(--outline);
  border-radius: 3px;
  overflow: hidden;
}
.site .mr .bar .track,
.site .mr .xp .track {
  background: var(--ink);
}
.site .mr .track.tall {
  height: 16px;
}
.site .mr .track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p) * 1%);
  background: var(--k);
  border-radius: 2px;
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.35);
}
.site .mr .track s {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ink);
  box-shadow: 0 0 0 1px rgb(248 239 168 / 0.3);
}
.site .mr .track s.nx {
  width: 2px;
  background: var(--mute);
  box-shadow: none;
}
.site .mr .xp {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.site .mr .num {
  font: 400 clamp(28px, 9cqw, 40px) / 1 var(--display);
  color: var(--cream);
  text-shadow: 0 3px 0 var(--ink);
}
.site .mr .climb {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.site .mr .climb .track {
  height: 16px;
  margin-top: 2px;
}
.site .mr .chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gold);
  color: var(--ink);
  border: var(--outline);
  border-radius: var(--r);
  box-shadow: 0 3px 0 #7d6dac;
  padding: 9px 10px;
  margin-bottom: 3px;
}
.site .mr .chip svg {
  flex: none;
  width: 26px;
  height: 26px;
}
.site .mr .chip div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.site .mr .chip small {
  font: 400 10px / 1.2 var(--display);
  letter-spacing: 0.04em;
}
.site .mr .chip b {
  font-weight: 700;
  font-size: var(--fs);
}
.site .mr .chip em {
  font-style: normal;
  font-weight: 700;
  opacity: 0.65;
}
.site .mr .row2 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.site .mr .row2 strong {
  color: var(--green);
  font-weight: 800;
}
.site .mr .streak {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}
.site .mr .streak svg {
  flex: none;
  width: 22px;
  height: 22px;
}
.site .mr .ok {
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: 48px;
  background: var(--orange);
  color: var(--ink);
  border: var(--outline);
  border-radius: var(--r);
  box-shadow: var(--edge);
  font: 400 16px / 1 var(--display);
  letter-spacing: 0.06em;
}
@media (prefers-reduced-motion: no-preference) {
  .site .mr.run .track i {
    animation: mr-f 1s steps(10, end) var(--d) both;
  }
  .site .mr.run .bar .bh b,
  .site .mr.run .bar .m {
    animation: mr-in 0.2s steps(2, end) calc(var(--d) + 0.9s) both;
  }
  /* As in the app: the XP number is gold while its bar fills, cream once it lands. */
  .site .mr.run .num {
    animation:
      mr-pop 0.4s steps(4, end) 2s both,
      mr-gold 1s steps(1, end) 2s both;
  }
  @keyframes mr-gold {
    from {
      color: var(--gold);
    }
    to {
      color: var(--cream);
    }
  }
  .site .mr.run .chip {
    animation: mr-pop 0.4s steps(4, end) 3.5s both;
  }
  .site .mr.run .streak,
  .site .mr.run .row2 strong {
    animation: mr-in 0.3s steps(3, end) 4s both;
  }
  @keyframes mr-f {
    from {
      transform: translateX(-101%);
    }
    to {
      transform: none;
    }
  }
  @keyframes mr-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes mr-pop {
    0% {
      opacity: 0;
      transform: scale(0.7);
    }
    60% {
      opacity: 1;
      transform: scale(1.08);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
}

/* Front-page fit: the Mission report shows what got done and missed (the climb card and streak are in the app, not repeated here);
   narrow medal shelves show three medals with readable labels. */
.site .viz .mr .climb,
.site .viz .mr .streak,
.site .viz .mr .ok {
  display: none;
}
@container (max-width: 480px) {
  .site .cz.medals .m:nth-child(n + 4) {
    display: none;
  }
  .site .cz.medals .m {
    width: 28cqw;
  }
  .site .cz.medals .m span {
    font-size: 12px;
  }
}
.site .season-viz,
.site .season-viz .cz {
  width: 100%;
}
.site .cz.medals .stage {
  height: 270px;
}

@media (max-width: 520px) {
  .site .compare thead td {
    width: calc(100% - 152px);
  }
  .site .compare tbody th {
    hyphens: none;
    padding-left: 44px;
    font-size: 14px;
  }
  .site .compare thead th,
  .site .compare tbody td:not([colspan]) {
    width: 76px;
    padding-inline: 4px;
  }
}

/* Plans: a clean comparison table, and the four perk loops as cards beside it (two columns on a wide screen) or after it. */
.site .plans-grid {
  display: grid;
  gap: 22px;
}
.site .perks-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.site .perks-bar h3 {
  margin: 0;
  font: 400 18px / 1.2 var(--display);
  color: var(--orange);
}
.site .perks-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 700px) {
  .site .perks-track {
    grid-template-columns: 1fr 1fr;
  }
}
.site .perks-track li {
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: start;
}
.site .perks-track h3 {
  margin: 0;
  font: 400 14px / 1.2 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
}
.site .perks-track .box {
  container-type: inline-size;
  min-width: 0;
  position: relative;
}
@media (min-width: 1200px) {
  .site .plans-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    column-gap: 48px;
    align-items: start;
  }
  .site .plans-grid > .compare {
    grid-column: 1;
    grid-row: 1;
  }
  .site .plans-grid > .perks {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
  .site .plans-grid > .fine {
    grid-column: 1;
    grid-row: 2;
  }
  .site .plans-grid > .levelup {
    grid-column: 1;
    grid-row: 3;
    margin: 4px 0 0;
  }
  .site .perks-track {
    grid-template-columns: 1fr;
  }
}

/* Plans table: labels stay whole words, the Plus tag stays on the label's line, the headers stay on one line. */
.site .compare tbody th {
  hyphens: none;
  overflow-wrap: normal;
}
.site .compare .bonus-mark {
  white-space: nowrap;
}
.site .compare thead th .tier,
.site .compare .plus-name {
  white-space: nowrap;
}
/* A Pause/Play in each loop's corner, the hero's button look: always visible, inside the card, a 44px hit area. */
.site .loop-pause {
  position: absolute;
  z-index: 3;
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cream);
  cursor: pointer;
  border-radius: var(--r);
}
.site .loop-pause svg {
  width: 16px;
  height: 16px;
}
.site .loop-pause:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -4px;
}
.site .levelup {
  position: relative;
}
/* Very narrow (200% zoom): the celebration's title fills the card, so Replay sits under it. */
@media (max-width: 359px) {
  .site .levelup .lvl-replay {
    position: static;
    margin: 4px 0 0 auto;
  }
}
/* The loop's own caption leaves room for the button. */
.site .perks-track [class$="-caps"] {
  box-sizing: border-box;
  padding-right: 44px;
}
.site .levelup {
  padding-top: 22px;
}
@media (prefers-reduced-motion: reduce) {
  .site .rr-loop *,
  .site .ach-loop *,
  .site .rr-loop,
  .site .ach-loop {
    animation: none !important;
  }
}

@media (min-width: 1200px) {
  .site .plans-grid .compare thead .tier {
    font-size: 20px;
  }
  .site .plans-grid .compare .plus-name {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .site .plans-grid .compare .plus-mark {
    width: 40px;
  }
}

/* Pixel sparks off a bar's leading end as its fill lands (motion.js builds them; the card clips them). */
.site .mr .mr-sparks {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.site .mr .mr-sparks i {
  position: absolute;
  display: block;
}

/* Each perk card says what the perk does, in the body face under its heading. */
.site .perks-track .perk-sub {
  margin: 0;
  color: var(--mute);
  font:
    400 14px / 1.4 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  text-transform: none;
  letter-spacing: 0;
  max-width: 56ch;
}
.site .appshot .zoom {
  max-width: none;
}