:root {
  --eco-on-bright: var(--on-gold);
  --eco-on-deep: #ffffff;
  --eco-glass-deep: rgba(0, 0, 0, 0.22);
  --eco-glass: rgba(255, 255, 255, 0.55);
  --eco-glass-strong: rgba(255, 255, 255, 0.78);
  --eco-glass-dim: rgba(255, 255, 255, 0.22);
  --eco-shine: rgba(255, 255, 255, 0.6);
  --eco-shine-soft: rgba(255, 255, 255, 0.2);
  --eco-sub-shine: rgba(255, 255, 255, 0.06);
  --eco-shadow-ink: rgba(0, 0, 0, 0.18);
  --eco-gem-glow: rgba(63, 184, 217, 0.35);
  --eco-gem-soft: rgba(63, 184, 217, 0.16);
  --eco-gold-glow: rgba(247, 197, 72, 0.5);
  --eco-day-glow: var(--eco-gold-glow);
  --eco-pop-glow: rgba(255, 138, 115, 0.4);
  --eco-accent-glow: rgba(95, 191, 106, 0.35);
  --eco-ray: rgba(247, 197, 72, 0.4);
  --eco-sheet-h: var(--sheet-max);
  --eco-hero-art: 88px;
  --eco-pile-w: 108px;
  --eco-pile-h: 60px;
  --eco-pack-btn: var(--target);
  --eco-tile: 4.75rem;
  --mt-node: 30px;
  --ph-badge: 4.25rem;
  --mt-bar-h: 64px;
  --eco-tile-l: 84px;
  --eco-cell-h: max(84px, 4.25rem);
  --eco-cell-w: max(88px, 4.5rem);
  --eco-label-w: 3.625rem;
  --eco-node: max(44px, 2.25rem);
  --eco-dot: 12px;
  --eco-badge: 26px;
  --eco-ms-min: 84px;
  --eco-shop-min: 112px;
  --eco-ware-min: 150px;
  --eco-track-line: 6px;
  --eco-day-h: 104px;
  --eco-ribbon-off: -9px;
  --eco-bump: 0.45s;
  --eco-pulse: 2.8s;
  --eco-glow-t: 1.6s;
  --eco-float-t: 7s;
  --eco-confetti-t: 1.5s;
  --eco-confetti-step: 45ms;
  --eco-rays-t: 16s;
  --eco-stagger: 70ms;
  --wheel-size: min(78vw, 320px);
  --wheel-spin: 4.4;
  --wheel-spin-calm: 0.9;
  --eco-season-glow-a: #b35a0d;
  --eco-season-glow-b: #7f3606;
  --eco-season-bloom-a: #b8417f;
  --eco-season-bloom-b: #6e2a8f;
  --eco-season-ember-a: #c23b26;
  --eco-season-ember-b: #7f1a16;
  --eco-season-cosmos-a: #5b4fd6;
  --eco-season-cosmos-b: #2a1c78;
  --eco-ev-halloween-a: #c2501a;
  --eco-ev-halloween-b: #5a2fb0;
  --eco-ev-winter-a: #2a73b0;
  --eco-ev-winter-b: #3a3fae;
  --eco-ev-eco-a: #2b7f44;
  --eco-ev-eco-b: #1d5e4a;
}

.is-dark {
  --eco-day-glow: rgba(247, 197, 72, 0.22);
}

.s-shop,
.s-pass,
.s-calendar,
.s-event,
.s-spin,
.s-offers,
.s-subs {
  overflow: hidden;
}

.sheet.s-shop,
.sheet.s-pass,
.sheet.s-event {
  height: var(--eco-sheet-h);
}

.s-shop .scroll,
.s-pass .scroll,
.s-calendar .scroll,
.s-event .scroll,
.s-spin .scroll,
.s-offers .scroll,
.s-subs .scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
}

.e-wallet {
  display: flex;
  gap: var(--gap-xs);
}

.e-wallet {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.text-l .s-shop .sheet-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.text-l .s-shop .e-wallet {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-content: flex-start;
}

@media (max-width: 400px) {
  .s-shop .sheet-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .s-shop .e-wallet {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }
}

.e-wallet .price {
  min-height: 36px;
  padding: 0 var(--sp-3) 0 var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--font-display);
  font-weight: var(--fw-dx);
  font-size: var(--fs-s);
  font-variant-numeric: tabular-nums;
}

.s-shop .tabs {
  position: sticky;
  top: 0;
  z-index: 3;
  --tabs-pad: var(--pad-sheet);
  margin: 0 calc(var(--pad-sheet) * -1) var(--gap-xs);
  padding: var(--gap-xs) var(--pad-sheet) var(--gap-s);
  background: var(--surface);
}

.e-fine {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  line-height: 1.3;
}

.e-center {
  text-align: center;
}

.tab-intro {
  color: var(--ink-soft);
  font-size: var(--fs-s);
  margin: var(--gap-xs) 0 var(--gap-m);
}

.e-have {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  font-size: var(--fs-s);
  font-weight: var(--fw-x);
  color: var(--good-ink);
  min-height: var(--target);
}

.e-cd {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-x);
  color: var(--pop-ink);
  font-variant-numeric: tabular-nums;
}

.e-chev {
  display: grid;
  place-items: center;
  color: var(--ink-soft);
}

.eco-card {
  background: var(--surface-2);
  border-radius: var(--r-l);
  padding: var(--gap-m);
  box-shadow: var(--clay);
  position: relative;
}

.buy-btn {
  gap: var(--gap-xs);
}

.buy-btn b {
  font-weight: var(--fw-x);
  font-variant-numeric: tabular-nums;
}

.buy-btn span {
  font-weight: var(--fw-b);
  opacity: 0.92;
}

.buy-btn .bb-label::after {
  content: '·';
  margin-left: var(--sp-1);
}

.buy-btn.busy {
  cursor: progress;
}

.e-spinner {
  width: 18px;
  height: 18px;
  border-radius: var(--r-pill);
  border: 3px solid var(--eco-glass-dim);
  border-top-color: currentColor;
  animation: spin 0.8s linear infinite;
}

.rewards.labeled {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--eco-tile), 1fr));
  gap: var(--gap-xs);
}

.rewards.labeled .reward {
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-width: 0;
  padding: var(--gap-xs) var(--sp-1);
  border-radius: var(--r-m);
  background: var(--surface);
  text-align: center;
}

.reward b {
  font-weight: var(--fw-x);
  font-variant-numeric: tabular-nums;
}

.reward small {
  font-size: var(--fs-2xs);
  line-height: var(--lh-tight);
  color: var(--ink-soft);
  font-weight: var(--fw-b);
}

.reward.thing {
  flex-direction: column;
  gap: 2px;
  border-radius: var(--r-m);
  padding: var(--gap-xs) var(--gap-s);
  max-width: 108px;
  text-align: center;
}

.eco-banner {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  padding: var(--gap-m);
  margin-bottom: var(--gap-m);
  border-radius: var(--r-l);
  color: var(--on-gem);
  background: linear-gradient(135deg, var(--gem), var(--gem-2));
  box-shadow: var(--btn-shine), var(--elev-2);
}

.eco-banner .grow {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.eco-banner .e-cd {
  color: inherit;
  opacity: 0.9;
}

.e-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-m);
  padding: var(--gap-l);
  margin-bottom: var(--gap-s);
  border-radius: var(--r-xl);
  color: var(--on-hero);
  background: radial-gradient(circle at 85% 0%, var(--hero-shine), transparent 55%), linear-gradient(155deg, var(--hero-1), var(--hero-2) 55%, var(--hero-3));
  box-shadow: inset 0 0 0 2px var(--hero-ring), var(--btn-shine), var(--elev-3);
  overflow: hidden;
  text-align: center;
}

.e-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, var(--eco-shine-soft) 45%, transparent 60%);
  transform: translateX(-100%);
  animation: eco-sheen 5s var(--ease) 1s infinite;
  pointer-events: none;
}

.e-hero-art {
  position: relative;
  height: var(--eco-hero-art);
  display: grid;
  place-items: center;
}

.e-hero-art::before {
  content: '';
  position: absolute;
  width: calc(var(--eco-hero-art) * 1.2);
  height: calc(var(--eco-hero-art) * 1.2);
  border-radius: var(--r-pill);
  background: radial-gradient(circle, var(--hero-shine), transparent 68%);
  animation: eco-pulse var(--eco-pulse) ease-in-out infinite;
}

.e-hero-art .thumb {
  position: relative;
  filter: drop-shadow(0 8px 10px var(--eco-shadow-ink));
  animation: eco-bob 3.2s ease-in-out infinite;
}

.e-orbit canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  filter: drop-shadow(0 4px 6px var(--eco-shadow-ink));
  animation: eco-bob 2.6s ease-in-out infinite;
}

.e-orbit canvas:nth-child(1) { transform: translate(-150%, -110%) rotate(-12deg); }
.e-orbit canvas:nth-child(2) { transform: translate(90%, -120%) rotate(14deg); animation-delay: -0.8s; }
.e-orbit canvas:nth-child(3) { transform: translate(110%, 30%) rotate(8deg); animation-delay: -1.6s; }

.e-hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-xs);
  justify-items: center;
}

.e-hero-copy h3 {
  font-size: var(--fs-xl);
}

.e-hero.starter {
  grid-template-columns: var(--eco-hero-art) minmax(0, 1fr);
  align-items: center;
  text-align: left;
}

.e-hero.starter > :not(.e-hero-art, .e-hero-copy) {
  grid-column: 1 / -1;
}

.e-hero.starter .e-hero-copy {
  justify-items: start;
}

.text-l .e-hero.starter {
  grid-template-columns: minmax(0, 1fr);
  text-align: center;
}

.text-l .e-hero.starter .e-hero-copy {
  justify-items: center;
}

.e-hero-copy p {
  font-size: var(--fs-s);
}

.e-hero .rewards {
  justify-content: center;
}

.e-hero .rewards.labeled .reward {
  background: var(--hero-glass);
  color: var(--on-hero);
  box-shadow: 0 2px 0 var(--eco-glass-dim);
}

.e-hero .reward small,
.e-hero .e-fine {
  color: var(--on-hero);
}

.e-hero .btn.gold {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  color: var(--ink);
  min-height: calc(var(--btn-h) + var(--sp-1));
  font-size: var(--fs-l);
}

.pack-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-m) var(--gap-s);
  padding-top: var(--gap-s);
}

.e-pack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xs);
  padding: var(--gap-m) var(--gap-s) var(--gap-s);
  border-radius: var(--r-l);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--clay);
  border: 2px solid var(--line);
  min-width: 0;
}

.e-pack::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 14px;
  width: 92px;
  height: 92px;
  transform: translateX(-50%);
  border-radius: var(--r-pill);
  background: radial-gradient(circle, var(--eco-gem-glow), transparent 70%);
  pointer-events: none;
}

.e-pack.is-popular {
  border-color: var(--pop);
  box-shadow: var(--clay), 0 8px 22px var(--eco-pop-glow);
}

.e-pack.is-best {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  text-align: left;
  gap: var(--gap-m);
  padding: calc(var(--gap-l) * var(--text-scale)) var(--gap-m) var(--gap-m);
  border-color: var(--gold);
  background: radial-gradient(circle at 15% 50%, var(--eco-gold-glow), transparent 60%), linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--clay), 0 10px 26px var(--eco-gold-glow);
}

.e-pack.is-best::before {
  display: none;
}

.e-pack.is-best .pack-info {
  align-items: flex-start;
}

.e-pack.is-best .buy-btn {
  grid-column: 1 / -1;
}

.e-ribbon {
  position: absolute;
  top: var(--eco-ribbon-off);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px var(--gap-xs);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--pop), var(--pop-2));
  color: var(--on-pop);
  font-size: var(--fs-xs);
  font-weight: var(--fw-x);
  white-space: nowrap;
  max-width: calc(100% - var(--sp-4));
  box-shadow: var(--elev-1);
  z-index: 1;
}

.is-best .e-ribbon,
.e-pb.plus .e-ribbon {
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  color: var(--on-gold);
  box-shadow: var(--elev-1);
}

.e-pile {
  position: relative;
  width: var(--eco-pile-w);
  height: var(--eco-pile-h);
  flex: none;
}

.e-pile canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate(var(--px, 0px), var(--py, 0px)) rotate(var(--pr, 0deg)) scale(var(--ps, 1));
  filter: drop-shadow(0 4px 5px var(--eco-shadow-ink));
}

.e-pile.p1 canvas { --ps: 1.5; }
.e-pile.p2 canvas:nth-child(1) { --px: -13px; --py: 6px; --pr: -14deg; --ps: 1.25; }
.e-pile.p2 canvas:nth-child(2) { --px: 13px; --py: 2px; --pr: 10deg; --ps: 1.35; }
.e-pile.p3 canvas:nth-child(1) { --px: -20px; --py: 10px; --pr: -16deg; --ps: 1.15; }
.e-pile.p3 canvas:nth-child(2) { --px: 20px; --py: 10px; --pr: 16deg; --ps: 1.15; }
.e-pile.p3 canvas:nth-child(3) { --px: 0px; --py: -4px; --ps: 1.4; }
.e-pile.p4 canvas:nth-child(1) { --px: -26px; --py: 14px; --pr: -18deg; --ps: 1.05; }
.e-pile.p4 canvas:nth-child(2) { --px: 26px; --py: 14px; --pr: 18deg; --ps: 1.05; }
.e-pile.p4 canvas:nth-child(3) { --px: -10px; --py: -4px; --pr: -6deg; --ps: 1.25; }
.e-pile.p4 canvas:nth-child(4) { --px: 14px; --py: -8px; --pr: 10deg; --ps: 1.35; }
.e-pile.p6 canvas:nth-child(1) { --px: -34px; --py: 16px; --pr: -20deg; --ps: 1; }
.e-pile.p6 canvas:nth-child(2) { --px: 34px; --py: 16px; --pr: 20deg; --ps: 1; }
.e-pile.p6 canvas:nth-child(3) { --px: -16px; --py: 14px; --pr: -8deg; --ps: 1.15; }
.e-pile.p6 canvas:nth-child(4) { --px: 16px; --py: 14px; --pr: 8deg; --ps: 1.15; }
.e-pile.p6 canvas:nth-child(5) { --px: -9px; --py: -8px; --pr: -6deg; --ps: 1.3; }
.e-pile.p6 canvas:nth-child(6) { --px: 11px; --py: -14px; --pr: 12deg; --ps: 1.45; }

.pack-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.e-amt {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-dx);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.e-was {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

.e-value {
  font-size: var(--fs-xs);
  font-weight: var(--fw-x);
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: var(--r-pill);
  padding: 2px var(--sp-2);
  text-align: center;
}

.e-value.none {
  color: var(--ink-soft);
  background: none;
}

.e-pack .buy-btn {
  width: 100%;
  min-height: var(--eco-pack-btn);
  margin-top: var(--sp-1);
}

.jar-card {
  display: flex;
  gap: var(--gap-m);
  align-items: center;
}

.jar-card.ready {
  box-shadow: var(--clay), 0 0 0 2px var(--gem);
}

.jar-lock {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  align-self: flex-start;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-x);
}

.jar-art {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: var(--r-pill);
  background: radial-gradient(circle, var(--eco-gem-glow), transparent 70%);
}

.jar-n {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px var(--gap-s);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--gem), var(--gem-2));
  color: var(--on-gem);
  font-family: var(--font-display);
  font-size: var(--fs-s);
  font-weight: var(--fw-dx);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--surface-2);
}

.jar-card .grow {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.jar-card .grow > small {
  color: var(--ink-soft);
  font-size: var(--fs-s);
}

.jar-meter {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  font-size: var(--fs-xs);
  font-weight: var(--fw-x);
  font-variant-numeric: tabular-nums;
}

.jar-card .jar-inside {
  color: var(--gem-ink);
  font-weight: var(--fw-x);
}

.jar-card .btn {
  align-self: flex-start;
}

.shop-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--fs-xs);
}

.e-link-btn {
  color: var(--accent-ink);
}

.e-bundle {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-s);
  padding: var(--gap-m);
  margin-bottom: var(--gap-m);
  border-radius: var(--r-l);
  background: var(--surface-2);
  box-shadow: var(--clay);
  overflow: hidden;
  --b-tint: var(--gem);
}

.e-bundle::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 74px;
  background: linear-gradient(180deg, var(--b-tint), transparent);
  opacity: 0.28;
  pointer-events: none;
}

.e-bundle.rescue { --b-tint: var(--pop); }
.e-bundle.medkit { --b-tint: var(--accent); }
.e-bundle.seasonal { --b-tint: var(--ev-a, var(--gold)); }

.e-bundle.rescue {
  box-shadow: var(--clay), 0 0 0 2px var(--pop);
}

.b-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap-m);
}

.b-head .grow {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.b-head b {
  font-family: var(--font-display);
  font-size: var(--fs-l);
  font-weight: var(--fw-dx);
  line-height: var(--lh-tight);
}

.b-head .tag {
  flex: none;
}

.b-head small {
  color: var(--ink-soft);
  font-size: var(--fs-s);
}

.b-head canvas {
  filter: drop-shadow(0 4px 6px var(--eco-shadow-ink));
}

.pass-buy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-s);
  padding-top: var(--gap-s);
  margin-bottom: var(--gap-xs);
}

.e-pb {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-xs);
  padding: var(--gap-m) var(--gap-s) var(--gap-s);
  border-radius: var(--r-l);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--clay);
  border: 2px solid var(--line);
}

.e-pb.plus {
  border-color: var(--gold);
  box-shadow: var(--clay), 0 8px 22px var(--eco-gold-glow);
}

.e-pb b {
  font-family: var(--font-display);
  font-size: var(--fs-m);
  font-weight: var(--fw-dx);
}

.e-pb small {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  flex: 1;
}

.e-pb .btn {
  width: 100%;
  min-height: var(--eco-pack-btn);
  margin-top: var(--sp-1);
}

.pass-done {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  background: var(--accent-soft);
  margin-bottom: var(--gap-s);
}

.pass-done .grow {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pass-done small {
  color: var(--ink-soft);
  font-size: var(--fs-s);
}

.pd-check,
.ss-ok,
.ms-ok,
.mt-dot {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  box-shadow: var(--btn-shine);
}

.sub-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  width: 100%;
  margin-bottom: var(--gap-m);
  padding: var(--gap-l) var(--gap-m);
  border-radius: var(--r-xl);
  text-align: left;
  color: var(--on-accent);
  background: radial-gradient(circle at 90% 10%, var(--eco-sub-shine), transparent 50%), linear-gradient(150deg, var(--accent), var(--accent-2));
  box-shadow: var(--clay), 0 10px 26px var(--eco-accent-glow);
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease);
}

.sub-card:active {
  transform: scale(var(--press));
}

.sub-card.garden {
  color: var(--on-gem);
  background: radial-gradient(circle at 90% 10%, var(--eco-sub-shine), transparent 50%), linear-gradient(150deg, var(--gem), var(--gem-2));
  box-shadow: var(--clay), 0 10px 26px var(--eco-gem-glow);
}

.sub-art {
  position: relative;
  flex: none;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--eco-glass-dim);
  box-shadow: inset 0 2px 0 var(--eco-shine-soft);
}

.sub-crown {
  position: absolute;
  top: -12px;
  right: -8px;
  transform: rotate(18deg);
  filter: drop-shadow(0 3px 4px var(--eco-shadow-ink));
}

.sub-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.sub-copy > b {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-dx);
  line-height: var(--lh-tight);
}

.sub-perks {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sub-perks span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-s);
  font-weight: var(--fw-b);
}

.sub-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

.sub-price > b {
  font-size: var(--fs-l);
}

.sub-more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-s);
  font-weight: var(--fw-x);
}

.sub-card .tag.good {
  background: var(--surface);
  color: var(--ink);
}

.sub-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-s);
  padding: var(--gap-xl) var(--gap-l) var(--gap-l);
  border-radius: var(--r-xl);
  color: var(--on-accent);
  text-align: center;
  background: linear-gradient(160deg, var(--accent), var(--accent-2));
  box-shadow: var(--clay), 0 12px 30px var(--eco-accent-glow);
  overflow: hidden;
}

.sub-hero.garden {
  color: var(--on-gem);
  background: linear-gradient(160deg, var(--gem), var(--gem-2));
  box-shadow: var(--clay), 0 12px 30px var(--eco-gem-glow);
}

.sh-glow {
  position: absolute;
  top: -40px;
  left: 50%;
  width: 240px;
  height: 240px;
  transform: translateX(-50%);
  border-radius: var(--r-pill);
  background: radial-gradient(circle, var(--eco-shine), transparent 65%);
  animation: eco-pulse var(--eco-pulse) ease-in-out infinite;
  --eco-pulse-x: -50%;
}

.sh-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  border-radius: var(--r-pill);
  background: var(--eco-glass-dim);
  box-shadow: inset 0 3px 0 var(--eco-shine-soft);
}

.sh-art > canvas {
  animation: eco-bob 3.2s ease-in-out infinite;
}

.sh-art .sub-crown {
  top: -14px;
  right: -4px;
}

.sub-hero h3 {
  position: relative;
  font-size: var(--fs-xl);
  line-height: 1.15;
  text-shadow: 0 2px 0 var(--eco-shadow-ink);
}

.sh-price {
  position: relative;
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-l);
}

.sub-perks-list {
  list-style: none;
  margin: var(--gap-l) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

.sub-perks-list li {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  padding: var(--gap-s) var(--gap-m);
  border-radius: var(--r-m);
  background: var(--surface-2);
}

.sub-perks-list li span {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sub-perks-list li small {
  color: var(--ink-soft);
  font-size: var(--fs-s);
}

.sub-perks-list li.lead {
  padding: var(--sp-3);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.sub-perks-list.garden li.lead {
  background: var(--info-soft);
  box-shadow: inset 0 0 0 2px var(--gem);
}

.sub-buy {
  min-height: calc(var(--btn-h) + var(--sp-1));
  font-size: var(--fs-l);
}

.sub-status {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  padding: var(--gap-m);
  border-radius: var(--r-l);
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent);
}

.sub-status .grow {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sub-status small {
  color: var(--ink-soft);
  font-size: var(--fs-s);
}

.sub-legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-s);
  margin-top: var(--gap-l);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

.sub-legal b {
  color: var(--ink);
}

.boost-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-s);
  margin-bottom: var(--gap-s);
  background: radial-gradient(circle at 92% 20%, var(--eco-accent-glow), transparent 45%), var(--surface-2);
}

.bb-head {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
}

.bb-head .grow {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.bb-head small {
  color: var(--ink-soft);
  font-size: var(--fs-s);
}

.bb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.bb-row .btn {
  flex: 1 1 auto;
}

.bb-row .btn.ad small {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  margin-left: var(--sp-1);
}

.bb-left {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  font-weight: var(--fw-b);
}

.bb-head small .i {
  vertical-align: -3px;
  color: var(--warn-ink);
}

.ware-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--eco-ware-min)), 1fr));
  gap: var(--sp-2);
}

.e-ware {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xs);
  padding: var(--gap-m) var(--gap-s) var(--gap-s);
  border-radius: var(--r-l);
  background: var(--surface-2);
  box-shadow: var(--clay);
  text-align: center;
}

.e-ware > b {
  font-size: var(--fs-s);
  font-weight: var(--fw-x);
}

.e-ware > small {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  line-height: 1.25;
  flex: 1;
}

.e-ware.bump {
  animation: eco-bump var(--eco-bump) var(--ease-bounce);
}

.w-ic {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: inset 0 -3px 0 var(--line);
}

.w-n {
  position: absolute;
  right: -6px;
  bottom: -2px;
  min-width: 26px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-x);
  box-shadow: 0 0 0 2px var(--surface-2);
}

.w-buy {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

.w-buy .btn {
  padding: 0 var(--sp-3);
  min-width: 80px;
}

.looks-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-s);
  padding: var(--gap-l);
  border-radius: var(--r-xl);
  text-align: center;
  background: radial-gradient(circle at 50% 0%, var(--accent-soft), transparent 70%), var(--surface-2);
  box-shadow: var(--clay);
}

.looks-hero p {
  color: var(--ink-soft);
  font-size: var(--fs-s);
}

.looks-row {
  margin-bottom: var(--gap-m);
  display: flex;
  gap: var(--gap-s);
  justify-content: center;
  flex-wrap: wrap;
}

.looks-row .thumb {
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: var(--clay);
}

.looks-row .thumb:nth-child(odd) { transform: rotate(-4deg); }
.looks-row .thumb:nth-child(even) { transform: rotate(4deg) translateY(6px); }

.ev-link {
  width: 100%;
  margin-top: var(--sp-3);
  text-align: left;
  font-weight: var(--fw-x);
}

.ev-link small {
  font-weight: var(--fw-b);
}

.eco-cel .cel-art {
  position: relative;
  width: 170px;
  height: 150px;
  display: grid;
  place-items: center;
}

.eco-cel .cel-art > canvas {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 8px 12px var(--eco-shadow-ink));
  animation: eco-pop-in 0.6s var(--ease-bounce) both;
}

.e-rays {
  position: absolute;
  inset: -24px;
  border-radius: var(--r-pill);
  background: repeating-conic-gradient(from 0deg, var(--eco-ray) 0deg 10deg, transparent 10deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 70%);
  mask: radial-gradient(circle, #000 25%, transparent 70%);
  animation: spin var(--eco-rays-t) linear infinite;
}

.e-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.e-confetti i {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  background: var(--gold);
  opacity: 0;
  animation: eco-confetti var(--eco-confetti-t) var(--ease) both;
  animation-delay: calc(var(--d) * var(--eco-confetti-step));
}

.e-confetti i:nth-child(4n + 1) { background: var(--pop); }
.e-confetti i:nth-child(4n + 2) { background: var(--gem); }
.e-confetti i:nth-child(4n + 3) { background: var(--accent); border-radius: var(--r-pill); }

.eco-cel h3 {
  font-size: var(--fs-xl);
}

.eco-cel .rewards .reward {
  animation: eco-pop-in 0.5s var(--ease-bounce) both;
}

.eco-cel .rewards .reward:nth-child(2),
.cal-claimed .reward:nth-child(2) { animation-delay: calc(var(--eco-stagger) * 1); }
.eco-cel .rewards .reward:nth-child(3),
.cal-claimed .reward:nth-child(3) { animation-delay: calc(var(--eco-stagger) * 2); }
.eco-cel .rewards .reward:nth-child(4),
.cal-claimed .reward:nth-child(4) { animation-delay: calc(var(--eco-stagger) * 3); }
.eco-cel .rewards .reward:nth-child(5),
.cal-claimed .reward:nth-child(5) { animation-delay: calc(var(--eco-stagger) * 4); }
.eco-cel .rewards .reward:nth-child(n + 6),
.cal-claimed .reward:nth-child(n + 6) { animation-delay: calc(var(--eco-stagger) * 5); }

.eco-cel .rewards.labeled,
.cal-claimed .rewards.labeled {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.eco-cel .rewards.labeled .reward,
.cal-claimed .rewards.labeled .reward {
  flex: 0 1 auto;
  min-width: var(--eco-tile-l);
}

.eco-cel .rewards.labeled .reward {
  background: var(--surface-2);
}

.pass-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-s);
  padding: var(--gap-l);
  border-radius: var(--r-xl);
  color: var(--eco-on-deep);
  background: radial-gradient(circle at 85% 0%, var(--eco-shine-soft), transparent 50%), linear-gradient(150deg, var(--s-a), var(--s-b));
  box-shadow: var(--btn-shine), var(--elev-3);
  overflow: hidden;
  --s-a: var(--eco-season-glow-a);
  --s-b: var(--eco-season-glow-b);
}

.pass-hero.th-bloom { --s-a: var(--eco-season-bloom-a); --s-b: var(--eco-season-bloom-b); }
.pass-hero.th-ember { --s-a: var(--eco-season-ember-a); --s-b: var(--eco-season-ember-b); }
.pass-hero.th-cosmos { --s-a: var(--eco-season-cosmos-a); --s-b: var(--eco-season-cosmos-b); }

.ph-shine {
  position: absolute;
  right: -60px;
  top: -60px;
  width: 200px;
  height: 200px;
  border-radius: var(--r-pill);
  background: radial-gradient(circle, var(--eco-shine-soft), transparent 70%);
  animation: eco-pulse var(--eco-pulse) ease-in-out infinite;
}

.ph-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-s);
}

.ph-top {
  flex-wrap: wrap;
}

.ph-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--eco-glass-deep);
  font-size: var(--fs-s);
  font-weight: var(--fw-x);
  text-transform: capitalize;
}

.pass-hero .e-cd {
  color: inherit;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--eco-glass-deep);
}

.pass-hero h3 {
  position: relative;
  font-size: var(--fs-xxl);
  line-height: var(--lh-tight);
  text-shadow: 0 2px 0 var(--eco-shadow-ink);
}

.pass-hero p {
  position: relative;
  font-size: var(--fs-s);
}

.ph-tier {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  padding: var(--gap-s) var(--gap-m) var(--gap-s) var(--gap-s);
  border-radius: var(--r-l);
  background: var(--hero-glass);
  color: var(--on-hero);
}

.ph-tier .grow {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.ph-tier .bar {
  flex: none;
  width: 100%;
}

.ph-tier small {
  font-size: var(--fs-xs);
}

.ph-badge {
  color: var(--on-gold);
  width: var(--ph-badge);
  height: var(--ph-badge);
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  box-shadow: var(--clay);
  line-height: 1;
}

.ph-badge small {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-x);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
}

.ph-badge b {
  font-size: var(--fs-xl);
}

.ph-how {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
}

.ph-how .i {
  flex: none;
  margin-top: 1px;
}

.claim-all {
  margin-top: var(--gap-m);
  animation: eco-glow var(--eco-glow-t) ease-in-out infinite;
}

.ptrack {
  display: flex;
  gap: var(--gap-s);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scrollbar-width: none;
  margin: 0 calc(var(--pad-sheet) * -1);
  padding: var(--gap-s) var(--pad-sheet) var(--gap-m) 0;
}

.ptrack::-webkit-scrollbar {
  display: none;
}

.plabels {
  position: sticky;
  left: 0;
  z-index: 3;
  flex: none;
  min-width: calc(var(--eco-label-w) + var(--pad-sheet));
  max-width: 34vw;
  display: grid;
  grid-template-rows: var(--eco-cell-h) var(--eco-node) var(--eco-cell-h);
  gap: var(--gap-s);
  padding-left: var(--pad-sheet);
  background: var(--surface);
  box-shadow: 10px 0 12px -10px var(--eco-shadow-ink);
}

.plabels span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding-right: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-x);
  color: var(--ink-soft);
  text-align: center;
}

.plabels .pl-prem {
  color: var(--gold-ink);
}

.pcol {
  position: relative;
  flex: none;
  width: var(--eco-cell-w);
  display: grid;
  grid-template-rows: var(--eco-cell-h) var(--eco-node) var(--eco-cell-h);
  gap: var(--gap-s);
  justify-items: center;
}

.pcol::before {
  content: '';
  position: absolute;
  top: calc(var(--eco-cell-h) + var(--gap-s) + var(--eco-node) / 2);
  left: calc(var(--gap-s) * -1);
  right: 0;
  height: var(--eco-track-line);
  transform: translateY(-50%);
  background: var(--surface-3);
}

.pcol.reached::before {
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
}

.pcol .pcell {
  width: 100%;
}

.pnode {
  position: relative;
  z-index: 1;
  width: var(--eco-node);
  height: var(--eco-node);
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-dx);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 3px var(--surface);
}

.reached .pnode {
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  color: var(--on-gold);
}

.next .pnode {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 3px var(--gold), 0 0 16px var(--eco-gold-glow);
}

.pcell {
  position: relative;
  height: var(--eco-cell-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--r-m);
  background: var(--surface-2);
  box-shadow: var(--clay);
  transition: transform var(--t-fast) var(--ease);
}

.pcell:active {
  transform: scale(var(--press));
}

.pcell.prem {
  background: linear-gradient(160deg, var(--surface-2), var(--surface-3));
  box-shadow: var(--clay), inset 0 0 0 2px var(--eco-gold-glow);
}

.pcell.ready {
  background: linear-gradient(180deg, var(--surface), var(--accent-soft));
  box-shadow: var(--clay), 0 0 0 3px var(--accent);
  animation: eco-ready var(--eco-glow-t) ease-in-out infinite;
}

.pcell.prem.ready {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--clay), 0 0 0 3px var(--gold);
}

.pcell.done {
  background: var(--surface-sunk);
  box-shadow: inset 0 0 0 1px var(--line);
}

.pcell.done .m-main,
.pcell.done .m-more canvas {
  opacity: 0.45;
}

.pcell.future .m-main,
.pcell.locked .m-main {
  opacity: 0.75;
}

.p-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: var(--eco-dot);
  height: var(--eco-dot);
  border-radius: var(--r-pill);
  background: var(--pop);
  box-shadow: 0 0 0 2px var(--surface);
}

.pcell.flash {
  animation: eco-bump var(--eco-bump) var(--ease-bounce);
}

.m-main {
  display: grid;
  place-items: center;
  height: 44px;
}

.m-n {
  font-family: var(--font-display);
  font-size: var(--fs-s);
  font-weight: var(--fw-dx);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.m-more {
  display: flex;
  align-items: center;
  gap: 1px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-x);
  color: var(--ink-soft);
}

.m-more i {
  font-style: normal;
  margin-right: 3px;
}

.p-check,
.p-lock {
  position: absolute;
  top: var(--sp-1);
  right: var(--sp-1);
  width: var(--eco-badge);
  height: var(--eco-badge);
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--elev-1), inset 0 0 0 1px var(--line);
}

.p-check {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
}

.wheel-stage {
  display: grid;
  place-items: center;
  padding: var(--gap-l) 0 var(--gap-m);
}

.wheel-wrap {
  position: relative;
  width: var(--wheel-size);
  height: var(--wheel-size);
}

.e-wheel {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--r-pill);
  box-shadow: 0 14px 30px var(--eco-shadow-ink);
  --wheel-a: var(--gold);
  --wheel-b: var(--accent);
  --wheel-c: var(--gem);
  --wheel-d: var(--pop);
  --wheel-rim: var(--pop);
  --wheel-rim-2: var(--pop-2);
  --wheel-line: #ffffff;
  --wheel-ink: #ffffff;
  --wheel-stroke: rgba(40, 25, 15, 0.38);
  --wheel-bulb: #fff6c8;
  --wheel-bulb-off: rgba(255, 255, 255, 0.35);
}

.wheel-halo {
  position: absolute;
  inset: -12%;
  border-radius: var(--r-pill);
  background: radial-gradient(circle, var(--eco-gold-glow), transparent 65%);
  opacity: 0.6;
  transition: opacity var(--t-slow) var(--ease);
}

.spinning .wheel-halo {
  opacity: 1;
  animation: eco-pulse 0.9s ease-in-out infinite;
}

.wheel-pointer {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 36px;
  height: 46px;
  margin-left: -18px;
  z-index: 2;
  background: linear-gradient(180deg, var(--surface), var(--surface-3));
  clip-path: polygon(50% 100%, 6% 22%, 22% 4%, 50% 0, 78% 4%, 94% 22%);
  filter: drop-shadow(0 4px 4px var(--eco-shadow-ink));
  transform-origin: 50% 20%;
}

.wheel-pointer::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 9px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: var(--r-pill);
  background: var(--pop);
}

.wheel-pointer.tick {
  animation: eco-flick var(--t-fast) var(--ease);
}

.wheel-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 27%;
  height: 27%;
  transform: translate(-50%, -50%);
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--surface), var(--surface-2));
  color: var(--pop-ink);
  font-family: var(--font-display);
  font-size: var(--fs-l);
  font-weight: var(--fw-dx);
  letter-spacing: 0.04em;
  min-width: var(--target);
  min-height: var(--target);
  box-shadow: var(--clay), 0 0 0 5px var(--gold), 0 6px 16px var(--eco-shadow-ink);
  transition: transform var(--t-fast) var(--ease);
}

button.wheel-hub:not([disabled]) {
  animation: eco-hub 2s ease-in-out infinite;
}

.wheel-hub[disabled],
.wheel-hub.off {
  color: var(--ink-soft);
}

.wheel-hub:active {
  transform: translate(-50%, -50%) scale(var(--press));
}

.prize-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-m);
  padding: var(--gap-m);
  margin-bottom: var(--gap-m);
  border-radius: var(--r-l);
  background: radial-gradient(circle at 12% 50%, var(--eco-gold-glow), transparent 55%), var(--surface-2);
  box-shadow: var(--clay), 0 0 0 2px var(--gold);
  animation: eco-pop-in 0.5s var(--ease-bounce) both;
}

.prize-card .grow {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.prize-card .grow small {
  color: var(--ink-soft);
}

.prize-card .grow b {
  font-family: var(--font-display);
  font-weight: var(--fw-dx);
  font-size: var(--fs-l);
}

.spin-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-s);
}

.spin-btn {
  min-height: calc(var(--btn-h) + var(--sp-1));
  font-size: var(--fs-l);
}

.spin-next,
.cal-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-l);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-weight: var(--fw-x);
  font-size: var(--fs-s);
  text-align: center;
}

.spin-next .e-cd,
.cal-next .e-cd {
  font-size: var(--fs-s);
  color: var(--accent-ink);
}

.spin-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  margin: var(--gap-m) 0;
  font-size: var(--fs-s);
  font-weight: var(--fw-x);
  color: var(--ink-soft);
  text-align: center;
}

.e-odds {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-xs);
}

.odds-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-m);
}

.odds-head b {
  font-weight: var(--fw-dx);
}

.odds-head small {
  color: var(--ink-soft);
  font-family: var(--font);
  font-weight: var(--fw-b);
  font-size: var(--fs-xs);
  letter-spacing: 0;
}

.odds-list,
.e-week,
.mt-rewards,
.e-ms-row,
.ev-how,
.ev-ms-list,
.ev-shop,
.ev-next-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.odds-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-s);
}

.odds-row span {
  flex: 1;
}

.odds-row b {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-dx);
}

.cal-hero {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  padding: var(--gap-m);
  margin-bottom: var(--gap-s);
  border-radius: var(--r-l);
  background: radial-gradient(circle at 12% 50%, var(--eco-pop-glow), transparent 55%), var(--surface-2);
  box-shadow: var(--clay);
}

.cal-hero .grow {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cal-hero .grow > b {
  font-family: var(--font-display);
  font-weight: var(--fw-dx);
  font-size: var(--fs-l);
}

.cal-hero .grow > small {
  font-size: var(--fs-s);
}

.e-flame {
  position: relative;
  flex: none;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  filter: grayscale(0.7);
  opacity: 0.7;
}

.e-flame.lit {
  filter: none;
  opacity: 1;
  animation: eco-bob 2.4s ease-in-out infinite;
}

.e-flame b {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 30px;
  padding: 0 var(--gap-xs);
  border-radius: var(--r-pill);
  background: var(--surface);
  text-align: center;
  font-size: var(--fs-m);
  box-shadow: var(--clay);
}

.freeze-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.freeze-row .grow {
  flex: 1 1 var(--row-text-min);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.freeze-row small {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

.e-week {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-s);
}

.e-day {
  position: relative;
  min-height: var(--eco-day-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--gap-xs);
  border-radius: var(--r-m);
  background: var(--surface-2);
  box-shadow: var(--clay);
  text-align: center;
}

.e-day-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.e-day small {
  font-size: var(--fs-xs);
  font-weight: var(--fw-x);
  color: var(--ink-soft);
}

.e-day > b {
  font-size: var(--fs-s);
  font-weight: var(--fw-x);
  font-variant-numeric: tabular-nums;
}

.d-ic {
  display: flex;
  align-items: center;
}

.d-more {
  display: flex;
  gap: 2px;
}

.e-day.big {
  grid-column: span 2;
  background: radial-gradient(circle at 50% 30%, var(--eco-day-glow), transparent 70%), var(--surface-2);
  box-shadow: var(--clay), inset 0 0 0 2px var(--gold);
}

.e-day.today {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  box-shadow: var(--btn-shine), 0 0 0 3px var(--accent-soft), var(--elev-2);
  animation: eco-bob 2.2s ease-in-out infinite;
}

.e-day.today small {
  color: var(--on-accent);
}

.e-day.done {
  background: var(--surface-sunk);
  box-shadow: inset 0 0 0 1px var(--line);
}

.e-day.done .d-ic,
.e-day.done .d-more {
  opacity: 0.45;
}

.d-check {
  position: absolute;
  top: calc(var(--sp-1) * -1);
  right: calc(var(--sp-1) * -1);
  width: var(--eco-badge);
  height: var(--eco-badge);
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  box-shadow: 0 0 0 2px var(--surface), var(--elev-1);
}

.cal-claim {
  margin-top: var(--sp-3);
  min-height: calc(var(--btn-h) + var(--sp-1));
  font-size: var(--fs-l);
  animation: eco-glow var(--eco-glow-t) ease-in-out infinite;
}

.cal-next {
  margin-top: var(--gap-m);
}

.month-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-s);
}

.mt-bar {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--mt-bar-h);
  margin: 0 var(--gap-l) var(--gap-m) var(--gap-s);
}

.mt-bar .bar {
  height: var(--bar-h);
}

.mt-node {
  position: absolute;
  top: calc((var(--mt-bar-h) - var(--mt-node)) / 2);
  left: calc(var(--f) * 100%);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.mt-ic,
.mt-node .mt-dot {
  width: var(--mt-node);
  height: var(--mt-node);
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
}

.mt-ic {
  background: var(--surface);
  box-shadow: var(--clay);
}

.mt-node small {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-x);
  color: var(--ink-soft);
  white-space: nowrap;
}

.mt-text {
  font-size: var(--fs-s);
  font-weight: var(--fw-b);
  color: var(--ink-soft);
  text-align: center;
}

.mt-rewards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  gap: var(--sp-1);
}

.mt-rewards > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--sp-1);
  border-radius: var(--r-m);
  background: var(--surface);
}

.mt-rewards > li.hit {
  background: var(--accent-soft);
}

.mt-rewards small {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-x);
  color: var(--ink-soft);
}

.mt-rewards li.hit small {
  color: var(--accent-ink);
}

.mt-rewards .rewards {
  gap: 2px;
}

.mt-rewards .reward {
  padding: 1px var(--gap-xs) 1px 1px;
  font-size: var(--fs-xs);
  background: none;
}

.e-ms-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--eco-ms-min), 1fr));
  gap: var(--sp-2);
}

.e-ms {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--gap-s) var(--gap-xs);
  border-radius: var(--r-m);
  background: var(--surface-2);
  box-shadow: var(--clay);
}

.e-ms b {
  font-size: var(--fs-s);
  text-align: center;
}

.ms-ok {
  width: 28px;
  height: 28px;
}

.e-ms small {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-x);
}

.e-ms.hit {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.cal-claimed {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-s);
  padding: var(--gap-l);
  margin: var(--gap-xs) 0 var(--gap-m);
  border-radius: var(--r-xl);
  text-align: center;
  background: radial-gradient(circle at 50% 0%, var(--eco-gold-glow), transparent 60%), var(--surface-2);
  box-shadow: var(--clay), 0 0 0 2px var(--gold);
  overflow: hidden;
  animation: eco-pop-in 0.5s var(--ease-bounce) both;
}

.cc-burst {
  position: absolute;
  top: -120px;
  left: 50%;
  width: 300px;
  height: 300px;
  margin-left: -150px;
  border-radius: var(--r-pill);
  background: repeating-conic-gradient(from 0deg, var(--eco-ray) 0deg 8deg, transparent 8deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%);
  mask: radial-gradient(circle, #000 20%, transparent 65%);
  animation: spin var(--eco-rays-t) linear infinite;
  pointer-events: none;
}

.cal-claimed > :not(.cc-burst) {
  position: relative;
}

.cal-claimed h3 {
  font-size: var(--fs-xl);
}

.cal-claimed .rewards {
  justify-content: center;
}

.cal-claimed .reward {
  animation: eco-pop-in 0.5s var(--ease-bounce) both;
}

.cc-streak {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  font-weight: var(--fw-x);
}

.notify-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-m);
  margin-bottom: var(--gap-m);
  box-shadow: var(--clay), 0 0 0 2px var(--accent);
}

.notify-ask .grow {
  flex: 1;
  min-width: 60%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notify-ask small {
  color: var(--ink-soft);
  font-size: var(--fs-s);
}

.notify-ask .row-btns {
  width: 100%;
  margin: 0;
  justify-content: flex-end;
}

.e-offers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-xs);
}

.e-offers.welcome .e-hero {
  --eco-hero-art: 104px;
}

.e-offers .btn.ghost.wide {
  margin-top: var(--gap-xs);
}

.ev-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-s);
  padding: var(--gap-xl) var(--gap-l) var(--gap-l);
  border-radius: var(--r-xl);
  color: var(--eco-on-deep);
  text-align: center;
  background: radial-gradient(circle at 50% 0%, var(--eco-shine-soft), transparent 60%), linear-gradient(160deg, var(--ev-a), var(--ev-b));
  box-shadow: var(--btn-shine), var(--elev-3);
  overflow: hidden;
}

.ev-halloween { --ev-a: var(--eco-ev-halloween-a); --ev-b: var(--eco-ev-halloween-b); }
.ev-winter { --ev-a: var(--eco-ev-winter-a); --ev-b: var(--eco-ev-winter-b); }
.ev-eco { --ev-a: var(--eco-ev-eco-a); --ev-b: var(--eco-ev-eco-b); }

.ev-floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ev-floats i {
  position: absolute;
  left: calc(var(--i) * 14% + 2%);
  top: 38%;
  opacity: 0.35;
  animation: eco-float var(--eco-float-t) ease-in-out infinite;
  animation-delay: calc(var(--i) * -1s);
}

.ev-floats i:nth-child(odd) {
  top: 64%;
}

.ev-floats i:nth-child(3n) {
  top: 14%;
}

.ev-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border-radius: var(--r-pill);
  background: var(--eco-glass-dim);
  box-shadow: inset 0 3px 0 var(--eco-shine-soft), 0 0 40px var(--eco-shine-soft);
}

.ev-badge canvas {
  animation: eco-bob 3s ease-in-out infinite;
}

.ev-hero h3 {
  position: relative;
  font-size: var(--fs-xxl);
  line-height: 1.05;
  text-shadow: 0 2px 0 var(--eco-shadow-ink);
}

.ev-hero p {
  position: relative;
  font-size: var(--fs-s);
  max-width: 34ch;
}

.ev-meta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-s);
}

.ev-pill,
.ev-bal {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 36px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-s);
  box-shadow: var(--elev-1);
}

.ev-pill .e-cd {
  color: var(--ink);
  font-size: var(--fs-s);
}

.ev-bal {
  padding-left: var(--sp-1);
  font-size: var(--fs-m);
}

.ev-how {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.ev-how li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2);
  border-radius: var(--r-m);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
  line-height: var(--lh-tight);
}

.ev-track,
.ev-ms-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
}

.et-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.et-head small {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

.ev-ms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  min-height: 64px;
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.ev-ms.ready {
  box-shadow: inset 0 0 0 2px var(--gold-2), var(--elev-2);
}

.ev-ms.done {
  background: var(--surface-sunk);
}

.ev-ms.done .rewards canvas {
  opacity: 0.5;
}

.ev-ms .rewards {
  flex: 1 1 120px;
  justify-content: flex-start;
  gap: var(--sp-1);
}

.ev-ms .reward {
  padding: 2px var(--gap-s) 2px 2px;
  font-size: var(--fs-xs);
}

.ev-ms .reward.thing {
  padding: 2px;
}

.ev-ms .reward.thing small {
  display: none;
}

.ms-n {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 72px;
  font-variant-numeric: tabular-nums;
}

.ev-need {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-soft);
}

.ev-shop {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--eco-shop-min)), 1fr));
  gap: var(--sp-2);
}

.ev-item .thumb {
  border-radius: var(--r-m);
}

.ev-item .btn {
  width: 100%;
  margin-top: auto;
}

.ev-item .btn.ghost {
  color: var(--ink);
}

.ev-empty {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
}

.ev-empty .grow {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ev-empty small {
  font-size: var(--fs-s);
  color: var(--ink-soft);
}

.ev-next {
  position: relative;
  overflow: hidden;
}

.ev-next::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, var(--ev-a), var(--ev-b));
}

.ev-next small {
  color: var(--ink-soft);
}

@keyframes eco-pulse {
  0%, 100% { transform: translateX(var(--eco-pulse-x, 0)) scale(0.94); opacity: 0.75; }
  50% { transform: translateX(var(--eco-pulse-x, 0)) scale(1.06); opacity: 1; }
}

@keyframes eco-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@keyframes eco-sheen {
  0% { transform: translateX(-100%); }
  40%, 100% { transform: translateX(100%); }
}

@keyframes eco-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

@keyframes eco-pop-in {
  from { transform: scale(0.6); opacity: 0; }
}

@keyframes eco-glow {
  0%, 100% { box-shadow: var(--clay), 0 0 0 0 var(--eco-gold-glow); }
  50% { box-shadow: var(--clay), 0 0 0 7px var(--eco-gold-glow); }
}

@keyframes eco-ready {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -2px; }
}

@keyframes eco-hub {
  0%, 100% { box-shadow: var(--clay), 0 0 0 5px var(--gold), 0 6px 16px var(--eco-shadow-ink); }
  50% { box-shadow: var(--clay), 0 0 0 8px var(--gold), 0 0 26px var(--eco-gold-glow); }
}

@keyframes eco-flick {
  0% { transform: rotate(0); }
  40% { transform: rotate(-16deg); }
  100% { transform: rotate(0); }
}

@keyframes eco-float {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-14px) rotate(8deg); }
}

@keyframes eco-confetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(0.4); }
  20% { opacity: 1; transform: translate(calc(var(--x) * 1.4px), -60px) rotate(calc(var(--r) * 0.5deg)) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--x) * 2.2px), 120px) rotate(calc(var(--r) * 1deg)) scale(0.8); }
}

@media (min-width: 720px) {
  :root {
    --eco-hero-art: 150px;
    --eco-cell-h: 92px;
    --eco-cell-w: 100px;
    --eco-day-h: 116px;
  }

  .e-hero {
    grid-template-columns: auto 1fr;
    text-align: left;
    align-items: center;
  }

  .e-hero-art {
    width: calc(var(--eco-hero-art) * 1.2);
    grid-row: span 2;
  }

  .e-hero-copy {
    justify-items: start;
  }

  .e-hero .rewards,
  .e-hero .btn,
  .e-hero .e-fine {
    grid-column: 1 / -1;
  }

  .e-hero .rewards {
    justify-content: center;
  }

  .e-hero .e-fine {
    text-align: center;
  }

  .pack-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .e-week {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .e-day.big {
    grid-column: span 1;
  }

  .ev-how {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}