/* /products/gamification/badges (partials/sp-badges.hbs, bd-hero-medal.hbs, bd-book-medal.hbs,
   bd-play.hbs, bd-collect.hbs; loaded by bd-assets.hbs): the hero (an avatar with badges flying in), the badge book and
   the frames of the two Vibe Studio widgets, the trophy cabinet and the season collection (they bring their own look).
   Dark navy game panels as on the Avatars page. */
:root {
  --bd-bg: #10131f;
  --bd-panel: #181c2c;
  --bd-line: #2a3150;
  --bd-text: #c9cee3;
  --bd-muted: #8d93b0;
  --bd-cyan: #11ced7;
  --bd-gold: #f9c440;
  --bd-red: #f15851;
}

/* ------------------------------------------------ level chip (×2, ×3) and stars, shared */
.bd-tier { position: absolute; right: -4%; top: -4%; z-index: 2; min-width: 1.6em; padding: .1em .35em; border-radius: 999px; background: linear-gradient(180deg, #ffe58a, #e0a314); color: #2b1d00; font: 800 .72rem/1.2 "Lexend Deca", sans-serif; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.bd-tier[hidden] { display: none; }
.bd-stars { display: inline-flex; gap: 3px; }
.bd-stars i { width: 9px; height: 9px; background: #3a4166; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.bd-stars-1 i:nth-child(-n+1), .bd-stars-2 i:nth-child(-n+2), .bd-stars-3 i { background: var(--bd-gold); }

/* ------------------------------------------------ hero: an avatar, badges fly in from outside to the orbit and show their name */
.bd-hero { position: relative; container-type: inline-size; width: 100%; max-width: 36rem; aspect-ratio: 1 / .92; margin: 0 auto; border-radius: 1.25rem; overflow: hidden; background: var(--bd-bg); box-shadow: 0 2rem 4rem rgba(10, 12, 24, .35); }
.bd-hero_bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.bd-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 50%, transparent, rgba(10, 12, 24, .75)); pointer-events: none; }
/* sizes follow the hero's own width (cqw), so the ring fits in a narrow column too */
.bd-orbit { position: absolute; left: 50%; top: 50%; z-index: 2; width: 0; height: 0; --r: min(13rem, 36cqw); --ava: min(11rem, 30cqw); --m: min(5.2rem, 14.5cqw); }
.bd-orbit_ring { position: absolute; left: calc(var(--r) * -1); top: calc(var(--r) * -1); width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; border: 2px dashed rgba(249, 196, 64, .35); animation: bdTurn 60s linear infinite; }
.bd-orbit_ava { position: absolute; left: calc(var(--ava) / -2); top: calc(var(--ava) / -2); width: var(--ava); height: var(--ava); border-radius: 50%; padding: .35rem; background: conic-gradient(var(--bd-gold), var(--bd-cyan), #b56cff, var(--bd-gold)); box-shadow: 0 0 40px rgba(17, 206, 215, .35); }
.bd-orbit_img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #1b2140; display: block; }
.bd-orbit_m { position: absolute; left: calc(var(--m) / -2); top: calc(var(--m) / -2); width: var(--m); height: var(--m); z-index: 3; --a: calc(var(--i) * 45deg - 90deg); animation: bdFlyIn 16s cubic-bezier(.3, 1.1, .5, 1) infinite; animation-delay: calc(var(--i) * 1.4s); opacity: 0; }
/* the name: a pill under the badge (above it for the lower badges) for a few seconds after it lands; the side badges
   move it toward the middle (cos³: the diagonal ones only a little, or it would cover the avatar) */
.bd-orbit_n { --ny: .35rem; position: absolute; left: 50%; top: 100%; z-index: 4; margin-left: calc(cos(var(--a)) * cos(var(--a)) * cos(var(--a)) * -1.5rem); padding: .25rem .65rem; border-radius: 999px; background: rgba(10, 12, 24, .88); border: 1px solid rgba(249, 196, 64, .7); box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .45); color: #fff; font: normal 600 clamp(.62rem, 2.3cqw, .78rem)/1.2 "Lexend Deca", sans-serif; white-space: nowrap; opacity: 0; transform: translate(-50%, -.2rem) scale(.6); animation: bdName 16s ease-out infinite; animation-delay: calc(var(--i) * 1.4s); }
.bd-orbit_n.is-up { --ny: -.35rem; top: auto; bottom: 100%; }
.bd-orbit_mimg { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; filter: drop-shadow(0 .5rem .9rem rgba(0, 0, 0, .6)); }
@keyframes bdFlyIn {
  0% { opacity: 0; transform: rotate(var(--a)) translate(calc(var(--r) * 1.9)) rotate(calc(var(--a) * -1)) scale(.7); }
  2% { opacity: 1; }
  7% { opacity: 1; transform: rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1)) scale(1.25); }
  10% { opacity: 1; transform: rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1)) scale(1); }
  82% { opacity: 1; transform: rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1)) scale(1); }
  90%, 100% { opacity: 0; transform: rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1)) scale(.6); }
}
@keyframes bdName {
  0%, 8% { opacity: 0; transform: translate(-50%, -.2rem) scale(.6); }
  10% { opacity: 1; transform: translate(-50%, var(--ny)) scale(1.08); }
  12%, 25% { opacity: 1; transform: translate(-50%, var(--ny)) scale(1); }
  28%, 100% { opacity: 0; transform: translate(-50%, var(--ny)) scale(.9); }
}
@keyframes bdTurn { to { transform: rotate(360deg); } }

/* ------------------------------------------------ side panels (#badges book, #rewards flow) */
.bd-panel { width: 100%; max-width: 34rem; margin: 0 auto; padding: 1.25rem; border-radius: 1rem; background: radial-gradient(120% 90% at 50% 0%, #20263d 0%, var(--bd-bg) 65%); border: 1px solid var(--bd-line); box-shadow: 0 1.5rem 3rem rgba(24, 27, 43, .18); font-family: "Lexend Deca", sans-serif; color: #fff; }
.bd-panel_title { font-size: .8125rem; color: var(--bd-muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; }
.bd-book_grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem .5rem; }
.bd-bk { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; min-width: 0; }
.bd-bk_m { position: relative; width: 4.6rem; height: 4.6rem; }
.bd-bk_img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; filter: drop-shadow(0 0 10px rgba(249, 196, 64, .25)); }
.bd-bk.is-off .bd-bk_img { filter: grayscale(1) brightness(.4); }
.bd-bk_n { font-size: .78rem; font-weight: 600; line-height: 1.2; }
.bd-bk.is-off .bd-bk_n { color: var(--bd-muted); }
.bd-bk_s { font-size: .68rem; color: var(--bd-muted); min-height: 9px; line-height: 9px; }
.bd-flow { display: grid; grid-template-columns: auto 2.5rem minmax(0, 1fr); align-items: center; gap: .5rem; }
.bd-flow_src { display: flex; flex-direction: column; align-items: center; gap: .4rem; font-size: .875rem; }
.bd-flow_medal { width: 6.5rem; height: 6.5rem; border-radius: 50%; object-fit: cover; }
.bd-flow_line { height: 2px; background: linear-gradient(90deg, var(--bd-gold), var(--bd-cyan)); position: relative; }
.bd-flow_line::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left-color: var(--bd-cyan); }
.bd-flow_out { display: grid; gap: .5rem; }
.bd-flow_chip { padding: .45rem .7rem; border-radius: .6rem; font-size: .8125rem; font-weight: 600; border: 1px solid var(--k); color: var(--k); background: rgba(255, 255, 255, .04); }
.bd-flow_chip.is-points { --k: #f9c440; }
.bd-flow_chip.is-bonus { --k: #6be39b; }
.bd-flow_chip.is-game { --k: #ff8ad8; }
.bd-flow_chip.is-avatar { --k: #b79cff; }
.bd-flow_chip.is-journey { --k: #11ced7; }
.bd-fresh { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.bd-fresh li { display: flex; flex-direction: column; gap: .4rem; padding: 1.25rem; border-radius: .875rem; background: #fff; border: 1px solid var(--sp-line, #e3e6f0); }
.bd-fresh b { font-weight: 600; }

/* ------------------------------------------------ live sections */
.bd-sec { position: relative; z-index: 2; background: radial-gradient(90% 60% at 50% 0%, #1b2140 0%, #0d1019 70%); color: #fff; overflow: hidden; }
.bd-sec::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; }
.bd-sec > * { position: relative; }
.bd-sec_head { max-width: 50rem; margin: 0 auto 2.5rem; text-align: center; display: grid; gap: 1rem; }
.bd-sec_head .section_title { margin: 0; color: #fff; }
.bd-sec_head .title_sub { margin: 0; color: var(--bd-text); opacity: 1; }
.bd-note { max-width: 50rem; margin: 1.5rem auto 0; color: var(--bd-text); font-size: .875rem; line-height: 1.5; text-align: center; opacity: .9; }

/* ------------------------------------------------ season collection (the widget brings its own look) */
.bd-coll { background: #071510; }
.bd-coll_bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.bd-coll::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 20, 14, .55) 0%, rgba(8, 10, 22, .78) 50%, rgba(8, 10, 22, .95) 100%); pointer-events: none; }
.bd-coll > .padding-global { position: relative; z-index: 1; }
.bd-coll::before { z-index: 1; }
.bd-widget { width: 100%; max-width: 64rem; min-height: 30rem; margin: 0 auto; }
.bd-widget_err { padding: 3rem 1rem; text-align: center; color: var(--bd-red); }

@media screen and (max-width: 991px) {
  .bd-fresh { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 600px) {
  .bd-book_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bd-fresh { grid-template-columns: minmax(0, 1fr); }
  .bd-flow { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .bd-flow_line { width: 2px; height: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bd-hero *, .bd-sec * { animation: none !important; transition: none !important; }
  .bd-orbit_m { opacity: 1; transform: rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1)); }
  .bd-orbit_n { display: none; }
}