/* Figma 5876:3110; scoped to the existing achievement dialog. */
#s .achievement-backdrop { display: none; position: fixed; inset: 0; z-index: 229; background: rgba(0,0,0,.3); }
#s.achievement-list-open .achievement-backdrop { display: block; }
#s .game-wrapper.ui-flat-v2 #pane-achievement.achievement-panel {
    position: fixed; z-index: 230; top: 5%; left: 1.6rem; right: auto; bottom: auto;
    width: 98rem; max-width: calc(100% - 48.2rem); height: calc(95% - 11rem); max-height: 58.5rem;
    margin: 0; padding: 0; box-sizing: border-box; overflow: hidden;
    border: .2rem solid #50b5cb; border-radius: 16px; background: #f2f2f7;
    box-shadow: 0 8px 24px rgba(0,80,112,.15); text-align: left;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif; color: #000;
    display: none; grid-template-rows: 5rem minmax(0,1fr);
}
#s .game-wrapper.ui-flat-v2 #pane-achievement.achievement-panel.is-open { display: grid; }
#s #pane-achievement[hidden], #s #pane-achievement [role="tabpanel"][hidden] { display: none !important; }
#s #pane-achievement .achievement-header { display: flex; align-items: center; gap: .9rem; padding: 0 5.6rem 0 1.3rem; background: #50b5cb; min-width: 0; }
#s #pane-achievement .achievement-heading-icon { width: 3.4rem; height: 3.4rem; object-fit: contain; flex: 0 0 auto; }
#s #pane-achievement .achievement-header h1 { margin: 0; padding: 0; color: #fff; font-size: 2rem; font-weight: 600; line-height: 1.2; }
#s #pane-achievement .achievement-close { position: absolute; top: .8rem; right: .8rem; width: 3.4rem; height: 3.4rem; padding: 0; margin: 0; border: 0; border-radius: 0; background: url('../images/new/utility/close-frame.svg') center / contain no-repeat; box-shadow: none; cursor: pointer; }
#s #pane-achievement .achievement-close::before { content: ''; position: absolute; left: 50%; top: 50%; width: 2rem; height: 2rem; transform: translate(-50%,-50%); background: url('../images/new/utility/close-icons.png') -2.8077rem -1.4231rem / 15.7538rem 5.2513rem no-repeat; pointer-events: none; }
#s #pane-achievement .achievement-body { display: grid; grid-template-columns: 11.4rem minmax(0,1fr); min-width: 0; min-height: 0; overflow: hidden; }
#s #pane-achievement .achievement-categories { display: flex; flex-direction: column; gap: .6rem; overflow-y: auto; min-height: 0; padding: 1.2rem .8rem; background: rgba(229,229,234,.9); scrollbar-width: thin; }
#s #pane-achievement .achievement-category { flex: 0 0 auto; width: 100%; min-height: 4rem; margin: 0; padding: 1rem .4rem; border: 0; border-radius: .7rem; background: transparent; box-shadow: none; color: #00507b; font: inherit; font-size: 14px; font-weight: 600; line-height: 20px; white-space: nowrap; text-align: center; cursor: pointer; }
#s #pane-achievement .achievement-category[aria-selected="true"] { background: #fff; }
#s #pane-achievement .achievement-category:not([aria-selected="true"]):hover { background: rgba(255,255,255,.5); }
#s #pane-achievement .achievement-panels { container-type: inline-size; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; overscroll-behavior: contain; }
#s #pane-achievement .achievement-category-panel { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 36px 0; padding: 24px 8px; min-width: 0; }
#s #pane-achievement .achievement-card { display: flex; flex-direction: column; align-items: center; min-width: 0; margin: 0; padding: 0 8px; text-align: center; }
#s #pane-achievement .achievement-badge { display: block; flex: 0 0 auto; width: 92.8px; height: 100px; max-width: 100%; object-fit: contain; }
#s #pane-achievement .is-earned .achievement-badge { filter: drop-shadow(0 4px 4px rgba(127,124,168,.25)); }
#s #pane-achievement .is-locked .achievement-badge { opacity: .5; }
#s #pane-achievement .achievement-card-title { width: 100%; max-width: 191.633px; margin: 12px 0 0; padding: 0; color: #000; font-size: 13px; font-weight: 600; line-height: 18px; overflow-wrap: anywhere; }
#s #pane-achievement .achievement-card-description { width: 100%; max-width: 177.891px; margin: 8px 0 0; padding: 0; color: rgba(60,60,67,.6); font-size: 12px; font-weight: 400; line-height: 16px; overflow-wrap: anywhere; }
#s #pane-achievement .achievement-card-date { max-width: 100%; margin: 8px 0 0; color: rgba(60,60,67,.3); font-size: 12px; line-height: 16px; overflow-wrap: anywhere; }
#s #pane-achievement .is-locked .achievement-card-title, #s #pane-achievement .is-locked .achievement-card-description { color: rgba(60,60,67,.3); }
#s #pane-achievement .achievement-empty { grid-column: 1 / -1; margin: 0; padding: 32px; color: #8e8e93; font-size: 14px; }
#s #pane-achievement button:focus-visible, #s #pane-achievement [role="tabpanel"]:focus-visible { outline: 2px solid #00507b; outline-offset: -2px; }
@media (max-width: 1100px), (max-height: 760px) {
    #s .game-wrapper.ui-flat-v2 #pane-achievement.achievement-panel { max-width: calc(100% - 42rem); }
}
@media (max-width: 760px) {
    #s .game-wrapper.ui-flat-v2 #pane-achievement.achievement-panel { left: 1rem; top: 17rem; width: calc(100% - 2rem); max-width: none; height: calc(100% - 18rem); max-height: none; }
    #s #pane-achievement .achievement-body { grid-template-columns: 9rem minmax(0,1fr); }
    #s #pane-achievement .achievement-category { font-size: 12px; }
}
@container (max-width: 580px) {
    #s #pane-achievement .achievement-category-panel { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@container (max-width: 280px) {
    #s #pane-achievement .achievement-category-panel { grid-template-columns: minmax(0,1fr); }
}