/* ── sticker badge ── */
.b-sticker {
  --frame: #e8a000; --inner: #006e6e; --frame-text: #0a3535;
  position: relative; background: var(--frame);
width: 280px; aspect-ratio: 1/1; padding: 24px;
}
.b-sticker.shape-rect { width: 360px; aspect-ratio: 1.45/1; }

.b-sticker.t-gold   { --frame: #F4C842; --inner: #006e6e; --frame-text: #0a3535; }
.b-sticker.t-silver { --frame: #D7DCE4; --inner: #0a3535; --frame-text: #0a3535; }
.b-sticker.t-bronze { --frame: #E8A574; --inner: #0a3535; --frame-text: #0a3535; }
.b-sticker.t-teal   { --frame: #e8a000; --inner: #006e6e; --frame-text: #0a3535; }

.b-sticker .inner { position: absolute; inset: 24px; background: var(--inner); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 12px; overflow: hidden; }
.b-sticker .inner.photo { background: #0a3535; }
.b-sticker .inner.photo .photo-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.b-sticker .inner.photo .photo-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,53,53,.45), rgba(10,53,53,.65)); z-index: 1; }
.b-sticker .inner.photo > *:not(.photo-bg):not(.photo-overlay) { position: relative; z-index: 2; }

.b-sticker .ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.b-sticker .ring text { fill: var(--frame-text); font-weight: 700; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }

.b-sticker .rank-num { font-weight: 900; font-size: 72px; line-height: .85; color: #fff; letter-spacing: -.04em; display: flex; align-items: flex-start; justify-content: center; }
.b-sticker .rank-num .hash { font-size: 36px; line-height: .95; margin-right: 2px; margin-top: 6px; font-weight: 800; }
.b-sticker .rank-label { font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .16em; margin-top: 8px; }
.b-sticker .rank-name { font-weight: 700; font-size: 12px; line-height: 1.2; margin-top: 5px; padding: 0 4px; max-width: 100%; }
.b-sticker .rank-divider { width: 34px; height: 2px; background: #fff; opacity: .5; margin: 7px 0; }
.b-sticker .rank-meta { font-size: 9px; font-weight: 700; opacity: .9; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3; }

.b-sticker.size-m { width: 190px; padding: 16px; }
.b-sticker.size-m .inner { inset: 16px; }
.b-sticker.size-m .rank-num { font-size: 44px; }
.b-sticker.size-m .rank-num .hash { font-size: 21px; margin-top: 4px; }
.b-sticker.size-m .rank-label { font-size: 8px; }
.b-sticker.size-m .rank-name { font-size: 9px; }
.b-sticker.size-m .rank-meta { font-size: 6.5px; }

.b-sticker.size-s { width: 135px; padding: 13px; }
.b-sticker.size-s .inner { inset: 13px; }
.b-sticker.size-s .rank-num { font-size: 30px; }
.b-sticker.size-s .rank-num .hash { font-size: 14px; margin-top: 3px; }
.b-sticker.size-s .rank-label { font-size: 6px; }
.b-sticker.size-s .rank-name { font-size: 6px; }
.b-sticker.size-s .rank-meta { font-size: 5px; font-weight: 700; }

.b-sticker.shape-rect .rank-num { font-size: 68px; }
.b-sticker.shape-rect .rank-num .hash { font-size: 32px; }
.b-sticker.shape-rect .rank-name { font-size: 13px; padding: 0 10px; }
.b-sticker.shape-rect.size-m { width: 245px; }
.b-sticker.shape-rect.size-m .rank-num { font-size: 48px; }
.b-sticker.shape-rect.size-s { width: 190px; }
.b-sticker.shape-rect.size-s .rank-num { font-size: 34px; }

/* ── award mode ── */
.b-sticker .rank-num.award-icon {
  font-size: 56px; line-height: 1; display: block;
  text-align: center; margin-bottom: 2px;
  font-weight: 400; letter-spacing: 0;
}
.b-sticker.size-m .rank-num.award-icon { font-size: 38px; }
.b-sticker.size-s .rank-num.award-icon { font-size: 26px; }