@font-face{font-family:PixelUI;src:url('/fonts/fusion-pixel/fusion-pixel-12px-proportional-ja.otf.woff2') format('woff2');font-display:swap}
@font-face{font-family:AchievementTitle;src:url('/fonts/collection-pixel-retro-2026-09-24/tiny5/Tiny5-Regular.ttf') format('truetype');font-display:swap}
.ach-page,.ach-detail{box-sizing:border-box;--ach-bg:#f0e5fa;--ach-panel:#faf3ff;--ach-edge:#b3a1c2;--ach-ink:#352844;--ach-muted:#82768e;--ach-active:#dfccf6;--ach-active-edge:#a186c3;--ach-track:#e1d8e8;--ach-track-edge:#776883;--ach-mint:#80e2b0;--ach-green:#288557;--ach-focus:#7950a7;color:var(--ach-ink);font:18px/1.4 PixelUI,monospace}
html[data-ui-theme=dark] :is(.ach-page,.ach-detail){--ach-bg:#1b1d1f;--ach-panel:#222528;--ach-edge:#454b50;--ach-ink:#e8e9e7;--ach-muted:#a8afb7;--ach-active:#3d414b;--ach-active-edge:#8e91a3;--ach-track:#434a50;--ach-track-edge:#68717a;--ach-mint:#67dfa3;--ach-green:#7be4ad;--ach-focus:#bda0eb}
.ach-page{position:absolute;inset:var(--home-banner-space,70px) 0 0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--ach-edge) transparent;background:var(--ach-bg) url('/assets/interface-v2/pastel-ui/background-lilac.png') repeat;background-size:192px 192px}
.ach-page{background-size:96px 96px;image-rendering:pixelated}
html[data-ui-theme=dark] .ach-page{background-image:none}
:is(.ach-page,.ach-detail) *{box-sizing:border-box}:is(.ach-page,.ach-detail) button,:is(.ach-page,.ach-detail) input{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}:is(.ach-page,.ach-detail) button{cursor:pointer;text-shadow:none;letter-spacing:0;background:none;border:0;box-shadow:none;padding:0}:is(.ach-page,.ach-detail) button:focus-visible,.ach-page input:focus-visible,.ach-page summary:focus-visible{outline:3px solid var(--ach-focus);outline-offset:3px}.ach-page [hidden]{display:none!important}
.ach-content{max-width:1016px;margin:0 auto;padding:20px 20px calc(var(--main-height,110px) + env(safe-area-inset-bottom,0px) + 26px)}
.ach-total{margin:0 6px 18px;font-size:22px}.ach-total>.ach-track{margin-top:10px;height:15px;border:2px solid var(--ach-track-edge)}
.ach-track{height:11px;background:var(--ach-track);border:1px solid var(--ach-track-edge);border-radius:20px;overflow:hidden}.ach-track>span{display:block;height:100%;min-width:0;background:var(--ach-mint);border-radius:20px}
.ach-family-navigation{display:flex;align-items:center;gap:6px;margin:0 -6px 18px;min-width:0}.ach-family-strip{display:flex;position:relative;flex:1;gap:6px;justify-content:space-between;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x proximity;padding:4px}.ach-family-strip::-webkit-scrollbar{display:none}
.ach-page .ach-family-strip button{flex:0 0 108px;min-width:0;height:108px;display:flex;align-items:center;justify-content:center;padding:4px;border:2px solid transparent;border-radius:15px;scroll-snap-align:start}.ach-family-strip .ach-icon{width:96px;height:96px}.ach-page .ach-family-strip button[aria-pressed=true]{background:var(--ach-active);border-color:var(--ach-active)}html[data-ui-theme=dark] .ach-page .ach-family-strip button[aria-pressed=true]{background:var(--ach-panel);border-color:var(--ach-track-edge)}
.ach-page .ach-scroll{flex:0 0 24px;height:64px;display:grid;place-items:center}.ach-chevron{display:inline-block;width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);flex:none}.ach-left{transform:rotate(-135deg)}
.ach-icon{display:block;position:relative;width:64px;height:64px;flex:none}.ach-icon img{display:block;position:absolute;left:var(--ach-art-left,0px);top:var(--ach-art-top,0px);width:var(--ach-art-size,100%);height:var(--ach-art-size,100%);max-width:none;image-rendering:pixelated;object-fit:contain}.ach-art-dark{display:none!important}html[data-ui-theme=dark] .ach-art-dark{display:block!important}html[data-ui-theme=dark] .ach-art-pastel{display:none!important}
.ach-icon-rounded img{left:0;top:0;width:100%;height:100%;image-rendering:auto}
.ach-section-heading{display:flex;align-items:center;gap:12px;margin:0 0 12px}.ach-section-heading h3{flex:1;margin:0;font:30px/1.15 AchievementTitle,PixelUI,monospace;font-weight:400;outline:none}.ach-section-heading>span{font-size:19px;white-space:nowrap}.ach-page .ach-search-toggle{width:36px;height:36px;display:grid;place-items:center;border-radius:8px}.ach-search-toggle>i{display:block;width:15px;height:15px;border:2px solid var(--ach-muted);border-radius:50%;position:relative}.ach-search-toggle>i:after{content:'';position:absolute;width:7px;height:2px;right:-5px;bottom:-3px;background:var(--ach-muted);transform:rotate(45deg)}.ach-search-toggle[aria-expanded=true]{background:var(--ach-active)}
.ach-search{display:block;margin-bottom:12px}.ach-search input{appearance:none;width:100%;min-height:46px;border:2px solid var(--ach-edge);border-radius:10px;background:var(--ach-panel);padding:9px 12px;font-size:17px}.ach-search input::placeholder{color:var(--ach-muted);opacity:1}
.ach-filters{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 18px}.ach-page .ach-filters button{min-height:47px;border:2px solid var(--ach-edge);border-radius:11px;background:var(--ach-panel);font-size:19px;padding:6px}.ach-page .ach-filters button[aria-pressed=true]{background:var(--ach-active);border-color:var(--ach-active-edge)}
.ach-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.ach-card{min-width:0;display:flex;border:2px solid var(--ach-edge);border-radius:12px;background:var(--ach-panel);overflow:hidden}.ach-page .ach-card-button{display:flex;align-items:center;gap:14px;min-width:0;width:100%;min-height:124px;padding:18px 12px;text-align:left;border-radius:9px}.ach-card-button:active{background:var(--ach-active)}.ach-page .ach-card-button:focus-visible{outline-offset:-4px}.ach-card-copy{display:flex;flex-direction:column;gap:10px;min-width:0;flex:1}.ach-card-title{display:block;font-size:18px;line-height:1.25;overflow-wrap:anywhere}.ach-card-copy>.ach-muted{font-size:14px}.ach-muted,.ach-unknown{color:var(--ach-muted)}.ach-unknown{font-size:14px;line-height:1.2}.ach-obtained{display:flex;align-items:center;gap:9px;color:var(--ach-green);font-size:16px}.ach-tick{display:inline-block;width:9px;height:15px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(40deg);margin:0 4px 4px 3px;flex:none}.ach-progress{display:flex;flex-direction:column;gap:7px;min-width:0}.ach-count{display:block;font-size:16px;line-height:1.2}.ach-count small{font:inherit;color:var(--ach-muted)}
.ach-group{margin-top:18px;border-top:1px solid var(--ach-edge);padding-top:6px}.ach-group>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:pointer;min-height:52px;font-size:19px}.ach-group>summary::-webkit-details-marker{display:none}.ach-group>summary>span:last-child{display:flex;align-items:center;gap:16px;color:var(--ach-muted);font-size:16px}.ach-group[open]>summary .ach-chevron{transform:rotate(135deg);margin-bottom:5px}.ach-group>.ach-card-grid{padding-top:6px}.ach-hint,.ach-data-note{margin:24px 0 0;text-align:center;color:var(--ach-muted);font-size:15px}.ach-empty{text-align:center;padding:28px 12px}.ach-empty>.ach-icon{margin:auto}.ach-empty h4{font-weight:400;font-size:22px;margin:16px 0 8px}.ach-empty p{font-size:16px;color:var(--ach-muted)}.ach-empty button{padding:10px 14px;border:2px solid var(--ach-edge);border-radius:10px;background:var(--ach-panel)}
.ach-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ach-detail .ach-detail-done{min-height:44px;width:100%;margin-top:20px;border:2px solid var(--ach-edge);border-radius:10px;background:var(--ach-active);padding:8px 12px}
.ach-detail{width:min(460px,calc(100vw - 28px));max-height:calc(100dvh - 40px);padding:28px 24px 24px;margin:auto;border:2px solid var(--ach-active-edge);border-radius:18px;background:var(--ach-panel);overflow:auto;overscroll-behavior:contain;box-shadow:0 8px 30px #10111730;text-align:center}.ach-detail::backdrop{background:#15101d99}.ach-detail-close{position:absolute;right:8px;top:4px;width:40px;height:40px;font-size:32px!important;line-height:1}.ach-detail-icon{display:flex;justify-content:center}.ach-detail-icon .ach-icon{width:96px;height:96px}.ach-detail-family{font-size:15px;color:var(--ach-muted);margin:12px 0 6px}.ach-detail h3{margin:0;font:32px/1.1 AchievementTitle,PixelUI,monospace;font-weight:400}.ach-description{font-size:18px;line-height:1.45;margin:18px 0}.ach-detail>.ach-obtained{justify-content:center;margin:16px 0}.ach-detail .ach-progress{margin:20px 0;text-align:left}.ach-detail .ach-track{height:14px}.ach-detail .ach-count{font-size:19px}.ach-detail h4{font-weight:400;font-size:21px;margin:24px 0 14px}.ach-tier-list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:0;margin:0}.ach-tier-list li{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;border:2px solid var(--ach-edge);border-radius:9px;font-size:18px;color:var(--ach-muted)}.ach-tier-list .is-earned{color:var(--ach-green);border-color:var(--ach-green)}.ach-tier-list .is-next{color:var(--ach-ink);background:var(--ach-active);border-color:var(--ach-active-edge)}.ach-tier-list .ach-tick{width:5px;height:9px;border-width:2px;margin:0 0 3px 6px}.ach-tier-count{color:var(--ach-muted);font-size:15px;margin:16px 0 0}
@media(hover:hover){.ach-page .ach-card-button:hover{background:color-mix(in srgb,var(--ach-active) 30%,var(--ach-panel))}.ach-page .ach-family-strip button:hover{border-color:var(--ach-edge)}}
@media(max-width:760px){.ach-content{max-width:600px;padding:18px 16px calc(var(--main-height,110px) + env(safe-area-inset-bottom,0px) + 24px)}.ach-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ach-card-button{gap:10px!important;min-height:124px!important;padding:15px 10px!important}.ach-family-navigation{gap:2px;margin-bottom:14px}.ach-family-strip{gap:4px}.ach-page .ach-scroll{flex-basis:18px}.ach-total{font-size:21px}.ach-section-heading h3{font-size:29px}}
@media(max-width:420px){.ach-content{padding-inline:12px}.ach-total{margin-inline:2px}.ach-card-title{font-size:16px}.ach-card-button{gap:6px!important;padding:12px 7px!important}.ach-card-copy{gap:8px}.ach-card-copy>.ach-muted{font-size:13px}.ach-obtained,.ach-count{font-size:14px}.ach-filters{gap:7px}.ach-filters button{font-size:17px!important}.ach-group>summary{font-size:17px}}
@media(max-width:420px){.ach-content{padding-top:12px}.ach-total{margin-bottom:10px}.ach-family-navigation{margin-bottom:8px}.ach-family-strip{gap:3px}.ach-section-heading{margin-bottom:8px}.ach-filters{margin-bottom:12px}.ach-card-button{min-height:96px!important}}
@media(max-width:360px){.ach-card-button{flex-direction:column;justify-content:flex-start;text-align:center!important;gap:8px!important;min-height:170px!important}.ach-card-copy{width:100%;align-items:center}.ach-card-copy .ach-progress{width:100%}.ach-card-title{font-size:17px}.ach-content{padding-inline:10px}.ach-detail{padding:28px 16px 20px}.ach-tier-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.ach-family-strip{scroll-behavior:auto}}

/* An earned goal and a collected reward are distinct states. */
.ach-card{flex-direction:column}.ach-card-button{flex:1}
.ach-page,.ach-detail{--ach-reward-ink:#926018;--ach-reward-edge:#d9b455;--ach-reward-bg:#fff9e6;--ach-claim-bg:#79eda5;--ach-claim-ink:#174a32;--ach-claim-edge:#39885a;--ach-claim-shadow:#276341}
html[data-ui-theme=dark] :is(.ach-page,.ach-detail){--ach-reward-ink:#ffe075;--ach-reward-edge:#a9863c;--ach-reward-bg:#302d25;--ach-claim-bg:#72e9a2;--ach-claim-ink:#163e2c;--ach-claim-edge:#43875c;--ach-claim-shadow:#1c4d33}
.ach-card[data-state=claimable]{border-color:var(--ach-reward-edge);background:var(--ach-reward-bg)}
.ach-ready{color:var(--ach-reward-ink);font-size:15px;line-height:1.25}
:is(.ach-page,.ach-detail) .ach-claim{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 12px;border:2px solid var(--ach-claim-edge);border-radius:8px;background:var(--ach-claim-bg);box-shadow:0 3px 0 var(--ach-claim-shadow);color:var(--ach-claim-ink);font-size:18px;line-height:1.1}
.ach-card>.ach-claim{margin:0 12px 14px;width:calc(100% - 24px)}
.ach-detail>.ach-claim{width:100%;margin:20px 0}
:is(.ach-page,.ach-detail) .ach-claim:enabled:active{translate:0 2px;box-shadow:0 1px 0 var(--ach-claim-shadow)}
:is(.ach-page,.ach-detail) .ach-claim:disabled{cursor:default;opacity:.65}
.ach-claim-count{display:grid;place-items:center;min-width:23px;min-height:23px;border-radius:5px;background:#174a3220;font-size:14px}
.ach-claim-error{margin:0 12px 12px;font-size:14px;color:#bd445c;text-align:center}
html[data-ui-theme=dark] .ach-claim-error{color:#ff9ba9}
.ach-claim-notice{color:var(--ach-green);text-align:center;font-size:16px;margin:16px 0 0;min-height:0}.ach-claim-notice:empty{margin:0}
.ach-tier-list .is-claimable{border-color:var(--ach-reward-edge);background:var(--ach-reward-bg);color:var(--ach-reward-ink)}
.ach-tier-list .is-claimable:after{content:'';width:6px;height:6px;background:currentColor;border-radius:50%;position:absolute;right:4px;top:4px}
@media(max-width:420px){.ach-ready{font-size:13px}.ach-card>.ach-claim{margin:0 8px 12px;width:calc(100% - 16px);font-size:17px}}

@media(max-width:360px){.ach-card>.ach-claim{font-size:16px;padding-inline:6px;gap:5px}}