/* Badges shelf (v8) */
.bdg{position:relative;display:inline-grid;place-items:center;width:58px;height:66px}
.bdg-disc{position:relative;z-index:1;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:#fff8e8;background:radial-gradient(circle at 34% 28%,#fff 0%,#fff8e8 45%,color-mix(in srgb,var(--bc) 22%,#fff) 100%);
  border:4px solid var(--bc);box-shadow:0 0 0 3px #fff,0 4px 0 rgba(84,60,20,.12),0 6px 12px rgba(84,60,20,.18);overflow:hidden}
.bdg-e{font-size:27px;line-height:1}
.bdg-rib{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:34px;height:26px;z-index:0}
.bdg-rib i{position:absolute;bottom:0;width:15px;height:24px;background:var(--bc);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%)}
.bdg-rib i:first-child{left:1px;transform:rotate(14deg);filter:brightness(.9)}
.bdg-rib i:last-child{right:1px;transform:rotate(-14deg)}
.bdg.got .bdg-disc::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.8) 50%,transparent 58%);animation:bdgShine 4s ease-in-out infinite}
.bdg.off .bdg-disc{background:#efe9df;border-color:#ddd5c8;box-shadow:0 0 0 3px #f8f4ee}
.bdg.off .bdg-e{filter:grayscale(1);opacity:.3}
.bdg.off .bdg-rib i{background:#ddd5c8}
.bdg.big{width:132px;height:150px}
.bdg.big .bdg-disc{width:118px;height:118px;border-width:7px;box-shadow:0 0 0 5px #fff,0 8px 0 rgba(84,60,20,.12),0 12px 24px rgba(84,60,20,.22)}
.bdg.big .bdg-e{font-size:60px}
.bdg.big .bdg-rib{width:72px;height:56px}
.bdg.big .bdg-rib i{width:32px;height:52px}
@keyframes bdgShine{0%,60%{transform:translateX(-60%)}88%,100%{transform:translateX(60%)}}

.bshelf{margin:4px 0 20px;padding:14px 12px 10px;border-radius:var(--radius,18px);background:linear-gradient(180deg,#fff9ef,#fdf0dc);border:2px solid #f3e2c4}
.bshelf-h{display:flex;align-items:baseline;justify-content:space-between;margin:0 4px 6px}
.bshelf-h h2{margin:0;font-size:20px}
.bshelf-n{font-weight:700;font-size:13px;color:#a2783a;background:#fff;border-radius:999px;padding:3px 10px;border:1.5px solid #f0dcb8}
.bshelf-row{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px 2px 0;align-items:end}
.bshelf-plank{height:12px;margin:0 -2px 4px;border-radius:4px;background:linear-gradient(180deg,#d9a86a 0%,#c08a4a 55%,#9f6d35 100%);box-shadow:0 5px 8px rgba(120,80,30,.22)}
.bslot{display:flex;flex-direction:column;align-items:center;gap:3px;padding:2px 2px 0;background:none;border:0;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bslot-n{font-size:11.5px;font-weight:700;line-height:1.15;color:#6b5a44;text-align:center;min-height:2.3em;max-width:96px}
.bslot:not(.got) .bslot-n{color:#b5a891;font-weight:600}
.bslot .bdg{transition:transform .18s}
.bslot:active .bdg,.bslot.pop .bdg{transform:translateY(-4px) scale(1.08)}
.bslot.fresh .bdg::before{content:"NEW";position:absolute;top:-4px;right:-8px;z-index:3;font-size:9.5px;font-weight:800;letter-spacing:.04em;color:#fff;background:#ff5c7a;border:2px solid #fff;border-radius:999px;padding:1px 5px}
.bshelf-tip{margin:6px 6px 2px;min-height:2.6em;font-size:13.5px;color:#7a6a55;text-align:center}
@media (min-width:700px){.bslot-n{font-size:12.5px;max-width:130px}.bdg{width:66px;height:74px}.bdg-disc{width:62px;height:62px}.bdg-e{font-size:31px}}

/* new badge pop-up */
.bdg-new{text-align:center}
.bdg-stage{position:relative;height:196px;display:grid;place-items:center;margin:-6px 0 6px;overflow:hidden}
.bdg-rays{position:absolute;width:260px;height:260px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,201,60,.32) 0 12deg,rgba(255,201,60,0) 12deg 24deg);animation:spin 9s linear infinite;mask:radial-gradient(circle,#000 30%,transparent 70%);-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%)}
.bdg-drop{position:relative;z-index:2;margin-bottom:22px;animation:bdgDrop 1s cubic-bezier(.3,1.5,.5,1) both}
.bdg-plank{position:absolute;bottom:14px;width:190px;height:14px;border-radius:5px;background:linear-gradient(180deg,#d9a86a,#9f6d35);box-shadow:0 6px 10px rgba(120,80,30,.25);z-index:1;animation:bdgPlank .5s ease-out both}
@keyframes bdgDrop{0%{transform:translateY(-190px) rotate(-25deg) scale(.6);opacity:0}45%{opacity:1}70%{transform:translateY(6px) rotate(4deg) scale(1.02)}100%{transform:none;opacity:1}}
@keyframes bdgPlank{0%{transform:scaleX(.2);opacity:0}100%{transform:none;opacity:1}}
.bdg-k{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--orange,#ff7a3c)}
.bdg-new h2{margin:2px 0 4px}
.bdg-coins{display:inline-flex;align-items:center;gap:6px;margin:2px 0 0;padding:4px 12px;border-radius:999px;background:#fff6d6;font-weight:700;font-size:14px;color:#a2783a}
.bdg-coins .coin{width:18px;height:18px}
.bdg-also{font-size:14px;margin:6px 0 0}
@media (prefers-reduced-motion:reduce){.bdg-drop,.bdg-plank,.bdg-rays,.bdg.got .bdg-disc::after{animation:none}}