/* Badge unlock celebration — global styles (the DOM is built by badge-unlock.js, so scoped .razor.css
   can't reach it). Ported from docs/new-features/assets/badge-unlock-prototype.html, prefixed cfbu- and
   nested under the themed root .cf-badge-unlock. Metal vars (--cfbu-m1..5, --cfbu-glow) are set per badge
   by the JS; theme vars are set by the .t-dark/.t-light/.t-original modifier. */

.cf-badge-unlock {
    position: fixed;
    inset: 0;
    z-index: 1400;
    overflow: hidden;
    font-family: var(--mud-typography-default-family, "Segoe UI", system-ui, -apple-system, sans-serif);
    color: var(--cfbu-ink);
    background: radial-gradient(1100px 640px at 50% -12%, var(--cfbu-world-top) 0%, transparent 58%), var(--cfbu-world);
    padding: env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);
    -webkit-font-smoothing: antialiased;
}

.cf-badge-unlock.cfbu-off { display: none; }
.cfbu-hidden { display: none !important; }

.cf-badge-unlock.t-dark {
    --cfbu-world:#0b0d13; --cfbu-world-top:#1c2334; --cfbu-ink:#E6E1E5; --cfbu-ink-soft:#CAC4D0; --cfbu-ink-mute:#938F99;
    --cfbu-line:rgba(255,255,255,.09); --cfbu-accent:#A8C7FA; --cfbu-eyebrow:var(--cfbu-m2); --cfbu-ray-op:.55; --cfbu-halo-op:.9;
    --cfbu-coin-shadow:rgba(0,0,0,.75); --cfbu-coin-ring:rgba(255,255,255,.06); --cfbu-btn-ink:#241a05; --cfbu-close-bg:rgba(255,255,255,.05);
}
.cf-badge-unlock.t-light {
    --cfbu-world:#F1F3F4; --cfbu-world-top:#FFFFFF; --cfbu-ink:#1F1F1F; --cfbu-ink-soft:#5F6368; --cfbu-ink-mute:#9AA0A6;
    --cfbu-line:rgba(0,0,0,.10); --cfbu-accent:#1A73E8; --cfbu-eyebrow:var(--cfbu-m4); --cfbu-ray-op:.32; --cfbu-halo-op:.55;
    --cfbu-coin-shadow:rgba(60,50,20,.28); --cfbu-coin-ring:rgba(0,0,0,.09); --cfbu-btn-ink:#241a05; --cfbu-close-bg:rgba(0,0,0,.04);
}
.cf-badge-unlock.t-original {
    --cfbu-world:#FAEBD6; --cfbu-world-top:#FFF6E4; --cfbu-ink:#431B20; --cfbu-ink-soft:#7B5544; --cfbu-ink-mute:#A98672;
    --cfbu-line:rgba(67,27,32,.14); --cfbu-accent:#B85B22; --cfbu-eyebrow:#B85B22; --cfbu-ray-op:.5; --cfbu-halo-op:.72;
    --cfbu-coin-shadow:rgba(120,70,20,.34); --cfbu-coin-ring:rgba(67,27,32,.10); --cfbu-btn-ink:#3a1508; --cfbu-close-bg:rgba(67,27,32,.05);
}

.cfbu-confetti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.cfbu-close { position: absolute; top: calc(env(safe-area-inset-top,0) + 14px); right: 18px; z-index: 8; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--cfbu-line); background: var(--cfbu-close-bg); color: var(--cfbu-ink-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; }
.cfbu-close:hover { color: var(--cfbu-ink); }
.cfbu-qind { position: absolute; top: calc(env(safe-area-inset-top,0) + 20px); left: 0; right: 0; z-index: 8; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--cfbu-ink-mute); }

.cfbu-stage { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 30px; text-align: center; }
.cfbu-eyebrow { display: flex; align-items: center; gap: 12px; color: var(--cfbu-eyebrow); font-size: 12.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; margin-bottom: 26px; }
.cfbu-eyebrow.cfbu-show { opacity: 1; transform: none; }
.cfbu-rule { height: 1px; width: 26px; background: linear-gradient(90deg, transparent, var(--cfbu-m3)); }
.cfbu-rule-r { background: linear-gradient(90deg, var(--cfbu-m3), transparent); }

.cfbu-scene { position: relative; width: 186px; height: 186px; display: flex; align-items: center; justify-content: center; perspective: 900px; }
.cfbu-rays { position: absolute; width: 410px; height: 410px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--cfbu-glow) 60%, transparent) 0deg 6deg, transparent 6deg 16deg); -webkit-mask: radial-gradient(closest-side, #000 8%, rgba(0,0,0,.35) 30%, transparent 68%); mask: radial-gradient(closest-side, #000 8%, rgba(0,0,0,.35) 30%, transparent 68%); opacity: 0; transition: opacity .8s ease; animation: cfbu-spin 26s linear infinite; z-index: 0; }
.cfbu-halo { position: absolute; width: 290px; height: 290px; border-radius: 50%; background: radial-gradient(closest-side, var(--cfbu-glow) 0%, rgba(0,0,0,0) 70%); opacity: 0; transition: opacity .7s ease; z-index: 0; filter: blur(6px); }
.cfbu-landed .cfbu-rays { opacity: var(--cfbu-ray-op); }
.cfbu-landed .cfbu-halo { opacity: var(--cfbu-halo-op); animation: cfbu-halo-pulse 2.6s ease-out; }

.cfbu-coin { position: relative; width: 168px; height: 168px; transform-style: preserve-3d; transform: rotateY(0deg); z-index: 2; will-change: transform; }
.cfbu-face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; overflow: hidden; box-shadow: 0 18px 34px -14px var(--cfbu-coin-shadow), 0 0 0 1px var(--cfbu-coin-ring); }
.cfbu-front { background: conic-gradient(from 210deg, var(--cfbu-m5), var(--cfbu-m1) 18%, var(--cfbu-m3) 38%, var(--cfbu-m1) 56%, var(--cfbu-m4) 76%, var(--cfbu-m1) 90%, var(--cfbu-m5)); }
.cfbu-back { transform: rotateY(180deg); background: conic-gradient(from 30deg, var(--cfbu-m5), var(--cfbu-m3) 20%, var(--cfbu-m2) 50%, var(--cfbu-m4) 78%, var(--cfbu-m5)); }
.cfbu-disc { position: absolute; inset: 11px; border-radius: 50%; background: radial-gradient(circle at 36% 28%, var(--cfbu-m1) 0%, var(--cfbu-m2) 30%, var(--cfbu-m3) 62%, var(--cfbu-m4) 100%); box-shadow: inset 0 3px 8px rgba(255,255,255,.4), inset 0 -8px 16px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; }
.cfbu-disc svg { width: 80px; height: 80px; color: var(--cfbu-m5); filter: drop-shadow(0 1.5px 0 color-mix(in srgb, var(--cfbu-m1) 75%, transparent)) drop-shadow(0 -1px 1px rgba(0,0,0,.35)); }
.cfbu-disc-back .cfbu-ico { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cfbu-gloss { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: linear-gradient(125deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 32%); mix-blend-mode: screen; opacity: .7; }
.cfbu-gloss::after { content: ""; position: absolute; top: -40%; left: -60%; width: 60%; height: 180%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); transform: rotate(18deg); opacity: 0; }
.cfbu-landed .cfbu-gloss::after { animation: cfbu-sweep 1s ease-out .05s; }

.cfbu-title { font-size: 27px; font-weight: 800; letter-spacing: -.01em; margin: 24px 0 0; line-height: 1.1; text-wrap: balance; color: var(--cfbu-ink); opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.cfbu-desc { font-size: 14.5px; line-height: 1.5; color: var(--cfbu-ink-soft); margin: 10px 0 0; max-width: 20rem; opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.cfbu-tier { margin-top: 15px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cfbu-m5); background: linear-gradient(180deg, var(--cfbu-m1), var(--cfbu-m2)); box-shadow: 0 3px 10px -3px var(--cfbu-glow); opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.cfbu-gem { width: 9px; height: 9px; border-radius: 2px; background: var(--cfbu-m4); transform: rotate(45deg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.cfbu-earned { margin-top: 12px; font-size: 12.5px; color: var(--cfbu-ink-mute); opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.cfbu-actions { margin-top: 26px; display: flex; flex-direction: column; gap: 11px; width: 100%; max-width: 19rem; opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.cfbu-revealed .cfbu-title { opacity: 1; transform: none; }
.cfbu-revealed .cfbu-desc { opacity: 1; transform: none; transition-delay: .08s; }
.cfbu-revealed .cfbu-tier { opacity: 1; transform: none; transition-delay: .16s; }
.cfbu-revealed .cfbu-earned { opacity: 1; transform: none; transition-delay: .22s; }
.cfbu-revealed .cfbu-actions { opacity: 1; transform: none; transition-delay: .3s; }

.cfbu-btn { height: 50px; border-radius: 15px; border: 0; font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; transition: transform .12s ease, filter .2s ease; }
.cfbu-btn:active { transform: scale(.97); }
.cfbu-primary { color: var(--cfbu-btn-ink); background: linear-gradient(180deg, var(--cfbu-m1) 0%, var(--cfbu-m2) 45%, var(--cfbu-m3) 100%); box-shadow: 0 12px 26px -10px var(--cfbu-glow), inset 0 1px 0 rgba(255,255,255,.6); }
.cfbu-ghost { color: var(--cfbu-ink-soft); background: transparent; border: 1px solid var(--cfbu-line); height: 44px; font-size: 15px; }
.cfbu-ghost:hover { color: var(--cfbu-ink); }
.cfbu-sharebar { display: flex; justify-content: center; gap: 12px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s ease, opacity .3s ease; }
.cfbu-sharebar.cfbu-open { max-height: 60px; opacity: 1; margin-top: 10px; }
.cfbu-sharebar button { width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; display: flex; align-items: center; justify-content: center; }
.cfbu-sharebar svg { width: 20px; height: 20px; }

@keyframes cfbu-spin { to { transform: rotate(360deg); } }
@keyframes cfbu-sweep { from { left: -60%; opacity: .9; } to { left: 130%; opacity: 0; } }
@keyframes cfbu-halo-pulse { 0% { transform: scale(.6); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1.15); opacity: var(--cfbu-halo-op); } }
@media (prefers-reduced-motion: reduce) {
    .cfbu-rays { animation: none; }
    .cfbu-coin { transition: none; }
    .cfbu-landed .cfbu-halo, .cfbu-landed .cfbu-gloss::after { animation: none; }
}