/* Earned badges wrap together and collect into the existing bottom menu entry. */
#s .achievement-celebration {
    position: fixed; inset: 0; z-index: 260; display: grid; place-items: center;
    padding: 24px; box-sizing: border-box; background: rgba(0, 0, 0, .42);
    color: #fff; font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    animation: achievement-celebration-enter 300ms ease-out both;
    transition: background-color 300ms;
}
#s .achievement-celebration-stage { width: min(1120px, 100%); max-height: calc(100vh - 48px); padding: 8px; box-sizing: border-box; overflow-y: auto; text-align: center; scrollbar-width: thin; }
#s .achievement-celebration-heading { margin: 0 0 24px; padding: 0; font: 600 24px/32px "PingFang SC", "Microsoft YaHei", sans-serif; color: #fff; }
#s .achievement-celebration-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 24px clamp(12px, 4vw, 44px); }
#s .achievement-celebration-card { display: flex; flex: 0 1 180px; flex-direction: column; align-items: center; width: 180px; max-width: 200px; min-width: 0; margin: 0; padding: 0; text-align: center; }
#s .achievement-celebration-badge { display: block; width: min(148px, 100%); height: auto; aspect-ratio: 232 / 250; object-fit: contain; }
#s .achievement-celebration-copy { width: 100%; margin-top: 12px; opacity: 1; transition: opacity 180ms ease; }
#s .achievement-celebration-title { margin: 0; padding: 0; min-height: 40px; color: #fff; font-size: 14px; font-weight: 600; line-height: 20px; overflow-wrap: anywhere; text-align: center; }
#s .achievement-celebration-description { margin: 6px 0 0; padding: 0; color: rgba(255,255,255,.85); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; text-align: center; }
#s .achievement-celebration-accept { display: inline-block; margin: 24px 0 0; padding: 8px 24px; border: 0; border-radius: 999px; background: #50b5cb; box-shadow: none; color: #fff; font: 400 14px/20px "PingFang SC", "Microsoft YaHei", sans-serif; cursor: pointer; }
#s .achievement-celebration-accept:hover { background: #41a7bd; }
#s .achievement-celebration-accept:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
#s .achievement-celebration-accept:disabled { cursor: default; }
#s .achievement-celebration-heading, #s .achievement-celebration-accept { transition: opacity 180ms ease; }
#s .achievement-celebration.is-collecting .achievement-celebration-copy,
#s .achievement-celebration.is-collecting .achievement-celebration-heading,
#s .achievement-celebration.is-collecting .achievement-celebration-accept { opacity: 0; }
#s .achievement-celebration.is-flying { background-color: transparent; }
#s .achievement-celebration-flight { position: fixed; z-index: 261; display: block; max-width: none; max-height: none; margin: 0; padding: 0; object-fit: contain; transform-origin: center; pointer-events: none; }
@keyframes achievement-celebration-enter { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 480px) {
    #s .achievement-celebration { padding: 16px; }
    #s .achievement-celebration-row { column-gap: 12px; }
    #s .achievement-celebration-card { flex-basis: calc((100% - 12px) / 2); max-width: 180px; }
    #s .achievement-celebration-heading { margin-bottom: 16px; font-size: 20px; }
    #s .achievement-celebration-title { font-size: 12px; line-height: 18px; }
    #s .achievement-celebration-description { font-size: 11px; line-height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    #s .achievement-celebration { animation: none; transition: none; }
    #s .achievement-celebration-copy, #s .achievement-celebration-heading, #s .achievement-celebration-accept { transition-duration: 120ms; }
}