html.achievement-celebration-open { overflow: hidden; scrollbar-gutter: stable; }
.achievement-celebration { --celebration-color: #e0b17d; --celebration-glow: #c77c43; width: min(620px, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid #c77c4370; border-radius: 12px; color: var(--text); background: radial-gradient(ellipse at 50% 0, #c77c4317, transparent 52%), linear-gradient(145deg, #201b25, #101119 78%); box-shadow: 0 30px 110px #0009, 0 0 70px #c77c4310; }
.achievement-celebration.is-promotion { --celebration-color: #d1c4f0; --celebration-glow: #afa0d9; border-color: #afa0d973; background: radial-gradient(ellipse at 50% 0, #afa0d91b, transparent 52%), linear-gradient(145deg, #24202e, #101119 78%); box-shadow: 0 30px 110px #0009, 0 0 70px #afa0d914; }
.achievement-celebration::backdrop { background: #05050ccc; backdrop-filter: blur(6px); }
.achievement-celebration[open] { animation: achievement-celebration-arrive 440ms cubic-bezier(.16, 1, .3, 1) both; }
.achievement-celebration[open]::backdrop { animation: achievement-celebration-backdrop 300ms ease-out both; }
.achievement-celebration-close-form { position: absolute; top: .6rem; right: .6rem; z-index: 1; margin: 0; }
.achievement-celebration-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; color: #c5bbcf; background: transparent; cursor: pointer; }
.achievement-celebration-close:hover { color: var(--heading); background: #ffffff09; }
.achievement-celebration-content { position: relative; padding: 2.2rem clamp(1.2rem, 5vw, 2.75rem) 2rem; text-align: center; }
.achievement-celebration-emblem { --spark-travel: 106px; position: relative; display: grid; place-items: center; width: 168px; height: 160px; margin: 0 auto 1.2rem; color: var(--celebration-color); pointer-events: none; }
.achievement-celebration-emblem::before { content: ''; position: absolute; inset: -28px; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--celebration-glow) 24%, transparent), transparent 70%); opacity: .65; }
.achievement-celebration-emblem > .achievement-icon { position: relative; width: 104px; height: 118px; filter: drop-shadow(0 7px 17px #0006); }
.achievement-celebration-orbit { position: absolute; inset: 3px; border: 1px solid color-mix(in srgb, var(--celebration-color) 16%, transparent); border-radius: 50%; }
.achievement-celebration-orbit::after { content: ''; position: absolute; inset: 12px; border: 1px solid color-mix(in srgb, var(--celebration-color) 9%, transparent); border-radius: 50%; }
.achievement-celebration-ripple { position: absolute; inset: 20px; border: 1px solid color-mix(in srgb, var(--celebration-color) 72%, transparent); border-radius: 50%; box-shadow: 0 0 14px color-mix(in srgb, var(--celebration-glow) 17%, transparent), inset 0 0 10px color-mix(in srgb, var(--celebration-glow) 10%, transparent); opacity: 0; }
.achievement-celebration-ripple.is-second { border-color: color-mix(in srgb, var(--celebration-color) 40%, transparent); }
.achievement-celebration-sparks { position: absolute; inset: 0; }
.achievement-celebration-spark { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--celebration-color); box-shadow: 0 0 9px 2px color-mix(in srgb, var(--celebration-color) 32%, transparent); opacity: 0; }
.achievement-celebration-spark:nth-child(3n) { width: 3px; height: 7px; border-radius: 3px; }
.achievement-celebration-spark:nth-child(4n) { width: 3px; height: 3px; }
.achievement-celebration[open] .achievement-celebration-emblem::before { animation: achievement-glow-reveal 1600ms ease-out both; }
.achievement-celebration[open] .achievement-celebration-emblem > .achievement-icon { animation: achievement-emblem-reveal 1100ms 40ms both; }
.achievement-celebration[open] .achievement-celebration-orbit { animation: achievement-orbit-reveal 1100ms cubic-bezier(.16, 1, .3, 1) 100ms both; }
.achievement-celebration[open] .achievement-celebration-ripple { animation: achievement-ripple-reveal 1550ms cubic-bezier(.12, .6, .25, 1) 150ms both; }
.achievement-celebration[open] .achievement-celebration-ripple.is-second { animation-delay: 340ms; }
.achievement-celebration[open] .achievement-celebration-spark { animation: achievement-spark-reveal 1200ms cubic-bezier(.12, .65, .3, 1) calc(220ms + var(--spark-order, 0) * 45ms) both; }
.achievement-celebration-eyebrow { margin: 0 0 .65rem; color: var(--celebration-color); font-size: .62rem; line-height: 1.7; text-transform: uppercase; letter-spacing: .19em; }
.achievement-celebration-heading h2 { margin: 0; color: #f4edf8; font: normal clamp(2rem, 6vw, 2.75rem)/1.15 var(--serif); text-wrap: balance; }
.achievement-celebration-heading > p:last-child { max-width: 28rem; margin: .85rem auto 0; color: #b8afc2; font-size: .84rem; line-height: 1.8; }
/* Text stays visible throughout; stagger only its small settling movements. */
.achievement-celebration[open] .achievement-celebration-eyebrow { animation: achievement-content-reveal 600ms cubic-bezier(.16, 1, .3, 1) 80ms both; }
.achievement-celebration[open] .achievement-celebration-heading h2 { animation: achievement-content-reveal 720ms cubic-bezier(.16, 1, .3, 1) 160ms both; }
.achievement-celebration[open] .achievement-celebration-heading > p:last-child { animation: achievement-content-reveal 650ms cubic-bezier(.16, 1, .3, 1) 260ms both; }
.achievement-celebration-collection { margin-top: 1.8rem; padding-top: 1.35rem; border-top: 1px solid #afa0d92a; text-align: left; }
.achievement-celebration-collection h3 { margin: 0 0 .8rem; color: #bcb0c9; font: 500 .63rem/1.7 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.achievement-celebration[open] .achievement-celebration-collection h3 { animation: achievement-content-reveal 620ms cubic-bezier(.16, 1, .3, 1) 350ms both; }
.achievement-celebration-awards { display: grid; gap: .65rem; list-style: none; margin: 0; padding: 0; }
.achievement-celebration-award { display: flex; align-items: center; gap: .8rem; padding: .85rem; border: 1px solid #c77c4338; border-radius: 6px; background: linear-gradient(110deg, #c77c430e, transparent); }
.achievement-celebration-award > .achievement-icon { width: 40px; height: 45px; color: #e0b17d; }
.achievement-celebration-award > div { flex: 1; min-width: 0; }
.achievement-celebration-award strong { display: block; color: #e8d8c7; font: normal 1rem/1.3 var(--serif); }
.achievement-celebration-award p { margin: .3rem 0 0; color: #afa4b6; font-size: .71rem; line-height: 1.6; }
.achievement-celebration-check { padding: 0 .15rem; color: #d7ab7c; font-size: .8rem; }
.achievement-celebration[open] .achievement-celebration-award { animation: achievement-award-reveal 740ms cubic-bezier(.16, 1, .3, 1) calc(430ms + var(--award-order, 0) * 80ms) both; }
.achievement-celebration[open] .achievement-celebration-award > .achievement-icon { animation: achievement-award-emblem-reveal 700ms calc(520ms + var(--award-order, 0) * 70ms) both; }
.achievement-celebration[open] .achievement-celebration-check { animation: achievement-check-reveal 650ms cubic-bezier(.16, 1, .3, 1) calc(660ms + var(--award-order, 0) * 80ms) both; }
.achievement-celebration-note { margin: 1.5rem 0 1.15rem; color: #aa9fb6; font: italic .88rem/1.7 var(--serif); }
.achievement-celebration[open] .achievement-celebration-note { animation: achievement-content-reveal 650ms cubic-bezier(.16, 1, .3, 1) 580ms both; }
.achievement-celebration-actions { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.achievement-celebration[open] .achievement-celebration-actions { animation: achievement-content-reveal 680ms cubic-bezier(.16, 1, .3, 1) 650ms both; }
.achievement-celebration-actions form { margin: 0; }
.achievement-celebration-actions .btn { min-width: 190px; min-height: 46px; }
.achievement-celebration-actions > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: var(--accent-soft); font-size: .77rem; }
.achievement-celebration :is(button, a):focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 4px; }
@keyframes achievement-celebration-arrive { from { transform: translateY(10px) scale(.99); } to { transform: translateY(0) scale(1); } }
@keyframes achievement-celebration-backdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes achievement-emblem-reveal {
    0% { opacity: 0; transform: translateY(18px) scale(.52) rotate(-8deg); animation-timing-function: cubic-bezier(.16, .75, .3, 1); }
    42% { opacity: 1; transform: translateY(-4px) scale(1.17) rotate(2deg); animation-timing-function: ease-in-out; }
    64% { transform: translateY(1px) scale(.965) rotate(-.7deg); animation-timing-function: ease-in-out; }
    82% { transform: translateY(0) scale(1.025) rotate(.2deg); animation-timing-function: ease-out; }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes achievement-glow-reveal { 0% { opacity: .2; transform: scale(.5); } 34% { opacity: 1; transform: scale(1.35); } 100% { opacity: .65; transform: scale(1); } }
@keyframes achievement-orbit-reveal { from { opacity: 0; transform: scale(.62) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes achievement-ripple-reveal { 0% { opacity: 0; transform: scale(.35); } 15% { opacity: .85; } 50% { opacity: .4; } 100% { opacity: 0; transform: scale(1.85); } }
@keyframes achievement-spark-reveal {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--spark-angle)) translateY(-34px) scale(.4); }
    18% { opacity: .95; }
    65% { opacity: .65; }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--spark-angle)) translateY(calc(-1 * var(--spark-travel))) scale(.2); }
}
@keyframes achievement-content-reveal { from { transform: translateY(8px); } to { transform: translateY(0); } }
@keyframes achievement-award-reveal { from { transform: translateY(14px) scale(.985); } to { transform: translateY(0) scale(1); } }
@keyframes achievement-award-emblem-reveal { 0% { transform: scale(.8) rotate(-5deg); } 55% { transform: scale(1.13) rotate(1deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes achievement-check-reveal { 0% { transform: scale(.7); } 55% { transform: scale(1.3); } 100% { transform: scale(1); } }
@media (max-width: 480px) {
    .achievement-celebration-content { padding-top: 2.3rem; padding-bottom: 1.4rem; }
    .achievement-celebration-emblem { --spark-travel: 90px; width: 138px; height: 136px; margin-bottom: 1rem; }
    .achievement-celebration-emblem > .achievement-icon { width: 88px; height: 100px; }
    .achievement-celebration-eyebrow { font-size: .57rem; }
    .achievement-celebration-heading > p:last-child { font-size: .78rem; }
    .achievement-celebration-award { gap: .65rem; padding: .7rem; }
    .achievement-celebration-award > .achievement-icon { width: 34px; height: 39px; }
    .achievement-celebration-award strong { font-size: .95rem; }
    .achievement-celebration-award p { font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) {
    .achievement-celebration[open], .achievement-celebration[open]::backdrop,
    .achievement-celebration[open] *, .achievement-celebration[open] *::before,
    .achievement-celebration[open] *::after { animation: none !important; transition: none !important; }
    .achievement-celebration-ripple, .achievement-celebration-sparks { display: none; }
    .achievement-celebration .btn:is(:hover, :focus-visible, :active) { transform: none; }
}
@media (forced-colors: active) {
    .achievement-celebration, .achievement-celebration-award { border-color: CanvasText; }
    .achievement-celebration-orbit, .achievement-celebration-ripple, .achievement-celebration-sparks { display: none; }
}