.new-badge {
  display: flex; align-items: center; gap: var(--s3); max-width: none; margin: var(--s5) 0 0;
  padding: var(--s3) var(--s4); background: var(--sun); border: var(--ink); border-radius: 18px; font-weight: 700;
  animation: dialog-in 400ms var(--ease-pop);
}
@keyframes dialog-in { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }
.badge-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--navy); background: var(--snow); flex: none; }
.badge-ico svg { width: 26px; height: 26px; }

/* member strip */
.club-top { padding-top: var(--s6); }
.member {
  display: grid; gap: var(--s4); align-items: center; padding: var(--s5);
  background: var(--snow); border: var(--ink); border-radius: var(--r-tile); box-shadow: var(--lift);
}
@media (min-width: 860px) { .member { grid-template-columns: auto 1.3fr auto; gap: var(--s6); } }
.member__coins { display: flex; align-items: center; gap: var(--s3); font-weight: 700; }
.member__coins .coin { width: 54px; height: 54px; }
.member__coins strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 2.4rem; line-height: 1; }
.member__level p { margin: 0 0 var(--s2); font-family: var(--font-display); font-size: 1.3rem; }
.member__level .member__next { font-family: var(--font-body); font-weight: 700; font-size: 1rem; margin: var(--s2) 0 0; }
.meter { height: 18px; background: var(--mist); border: 2px solid var(--navy); border-radius: 18px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--meadow); border-right: 2px solid var(--navy); }
.member__badges p { margin: 0 0 var(--s2); font-weight: 700; }
.member__badges strong { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; }

.joinbox {
  display: grid; gap: var(--s5); align-items: center; padding: var(--s6);
  background: var(--sun); border: var(--ink); border-radius: var(--r-tile); box-shadow: var(--lift);
}
@media (min-width: 860px) { .joinbox { grid-template-columns: 1.4fr auto; } }
.joinbox h2 { font-size: var(--text-2xl); }
.joinbox__perks { list-style: none; display: grid; gap: var(--s2); font-weight: 700; font-size: var(--text-lg); }
.joinbox__perks li { display: flex; gap: var(--s3); align-items: center; }
.joinbox__perks li::before { content: ""; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--navy); background: var(--snow); }
.joinbox__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* today's adventure */
.today { padding-top: var(--s7); }
.today__card {
  display: grid; overflow: hidden; text-decoration: none; color: var(--snow);
  background: var(--navy); border: var(--ink); border-radius: var(--r-tile); box-shadow: 0 6px 0 var(--sun-dark);
  transition: transform var(--t-med) var(--ease-pop);
}
.today__card:hover { transform: translateY(-4px) rotate(-.3deg); }
@media (min-width: 860px) { .today__card { grid-template-columns: 1.1fr 1fr; } }
.today__art { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--lake); }
.today__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.today__art img.is-cutout { object-fit: contain; object-position: bottom; padding-top: 6%; }
.today__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); padding: var(--s6); justify-content: center; }
.today__kicker { color: var(--sun); font-weight: 700; font-size: var(--text-lg); }
.today h2 { font-size: var(--text-2xl); margin: 0; }
.today__blurb { font-size: var(--text-lg); }

.doors { padding: var(--s8) 0 var(--s7); }

/* badge wall */
.badgewall { background: var(--navy); color: var(--snow); padding: var(--s8) 0; border-block: var(--ink); }
.badgewall .section-title { color: var(--sun); }
.badgewall__grid { list-style: none; display: grid; gap: var(--s5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .badgewall__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bdg { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s2); padding: var(--s4); border-radius: var(--r-tile); background: var(--navy-2); }
.bdg__medal {
  display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%;
  background: var(--sun); border: 4px solid var(--snow); box-shadow: 0 0 0 4px var(--navy), 0 6px 0 4px rgba(0,0,0,.3);
}
.bdg__medal svg { width: 52px; height: 52px; }
.bdg__medal--lake { background: #cfe6ff; } .bdg__medal--meadow { background: #c9f1da; }
.bdg__medal--fox { background: #ffd9bd; } .bdg__medal--tie { background: #ffd0d1; }
.bdg__name { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.1; }
.bdg__how { font-size: .92rem; line-height: 1.35; opacity: .9; }
.bdg.is-earned { background: #2b3a8f; }
.bdg.is-earned .bdg__how { color: var(--sun); font-weight: 700; opacity: 1; }
.bdg.is-locked .bdg__medal { filter: grayscale(1) brightness(.8); opacity: .55; }

/* how to earn */
.howto { padding: var(--s8) 0; }
.howto__grid { list-style: none; display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.howto__item {
  --tone: var(--lake);
  display: flex; flex-direction: column; gap: var(--s1); padding: var(--s5);
  background: var(--snow); border: var(--ink); border-radius: var(--r-tile); box-shadow: var(--lift); border-top: 12px solid var(--tone);
}
.howto__item--fox { --tone: var(--fox); } .howto__item--meadow { --tone: var(--meadow); } .howto__item--sun { --tone: var(--sun); }
.howto__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--mist); border: 2px solid var(--navy); margin-bottom: var(--s2); }
.howto__ico svg { width: 32px; height: 32px; }
.howto__item strong { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; }

/* case club+ band */
.plusband { background: var(--lake); color: var(--snow); padding: var(--s8) 0; border-top: var(--ink); }
.plusband__inner { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 760px) { .plusband__inner { grid-template-columns: 240px 1fr; } }
.plusband__cover { width: 220px; justify-self: center; border: var(--ink); border-radius: 6px 18px 18px 6px; box-shadow: 10px 10px 0 var(--navy); transform: rotate(-3deg); }
.plusband__tag { display: inline-block; padding: 0.3rem 0.9rem; background: var(--sun); color: var(--navy); border: 2px solid var(--navy); border-radius: var(--r-pill); font-family: var(--font-display); }
.plusband h2 { font-size: var(--text-2xl); text-shadow: 0 4px 0 var(--navy); -webkit-text-stroke: 1.5px var(--navy); paint-order: stroke fill; }
.plusband p { font-size: var(--text-lg); font-weight: 700; }