/* Official collection layout adapted for the local China card data. */
@font-face{font-family:Oswald;src:url('ui/oswald-600.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}
:root{--bg:#1f1f1f;--panel:#181818;--line:#ebebdc4d;--cream:#ebebdc;--muted:#b1b1a6;--orange:#dba122;--ink:#323232}
html{scroll-padding-top:30px}body{background:#1f1f1f;color:#ebebdc;font-size:16px;line-height:1.5;margin:0}button,input,select{border-radius:0}button{font-weight:600}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #dba122;outline-offset:4px}[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.header{position:absolute;top:0;left:0;right:0;height:117px;background:linear-gradient(#0008,transparent);border:0;gap:65px;padding:0 40px;z-index:3}.brand b{letter-spacing:0;display:block}.brand img{display:block;width:143px;height:65px;object-fit:contain}.header nav{gap:40px;align-self:center}.header nav a,.header nav button{height:auto;display:block;font-size:18px;font-weight:600;color:#ebebdc;padding:0;position:relative}.header nav a:after,.header nav button:after{content:"";position:absolute;bottom:-4px;left:50%;width:0;height:2px;background:#ebebdc;transition:width .2s,left .2s}.header nav a.active:after,.header nav a:hover:after,.header nav button:hover:after{left:0;width:100%;bottom:-4px;background:#ebebdc;height:2px}.header-right{margin-left:auto;display:flex;align-items:center;gap:30px}.expansion-label{font-size:12px;letter-spacing:3px;color:#ebebdcb3}.official{display:flex;align-items:center;justify-content:center;gap:20px;height:50px;min-width:150px;border:2px solid #ebebdc;color:#ebebdc;font-size:15px;font-weight:600;position:relative;isolation:isolate;overflow:hidden}.official:before{content:"";position:absolute;inset:0;background:#ebebdc;transform:translateY(-101%);transition:transform .2s;z-index:-1}.official:hover{color:#323232}.official:hover:before{transform:translateY(0)}#favoriteCount{color:#dba122;font-family:Oswald,sans-serif}
main{width:100%;max-width:1370px;margin:auto;padding:0 40px}.hero{position:relative;isolation:isolate;display:block;min-height:clamp(300px,calc(114px + 38.75vw),610px);padding:clamp(200px,calc(140px + 12.5vw),300px) 0 50px;margin-bottom:clamp(-150px,calc(26px - 13.75vw),-40px)}.hero-image{position:absolute;top:0;left:calc((100% - 100vw)/2);width:100vw;height:clamp(420px,calc(114px + 38.75vw),610px);background:url('ui/collection-hero.jpg') center top/cover no-repeat;mask-image:linear-gradient(#000 45%,#00000019 85%,transparent 98%);-webkit-mask-image:linear-gradient(#000 45%,#00000019 85%,transparent 98%);z-index:-1}.hero-image:after{content:"";position:absolute;inset:0;background:linear-gradient(#1212124d,transparent)}.hero-content{position:relative}h1{font-size:clamp(32px,calc(9px + 4vw),60px);line-height:1.3;letter-spacing:1px;font-weight:700;margin:0;background:url('ui/grunge.png') 0 0/10.15em auto;-webkit-background-clip:text;background-clip:text;color:transparent}.hero-tagline{font-size:22px;letter-spacing:0;margin:12px 0 0;font-weight:600;color:#ebebdc}.collection-total{display:none}
.workspace{position:relative;border:0;padding:0}.filter-panel{position:relative;padding:40px;background:#181818 url('ui/pattern.jpg');box-shadow:0 4px 100px #00000059,inset 0 1px #ffffff19;margin:0 0 0}.filter-layout{display:flex;flex-wrap:wrap;column-gap:30px;row-gap:20px;align-items:flex-start}.filter-row{display:block;min-width:0;min-height:0;margin:0}.filter-label{display:block;margin:0 0 5px;font-size:16px;font-weight:600;line-height:24px;color:#ebebdc;min-width:0}.pills{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.pill{display:inline-flex;align-items:center;justify-content:center;position:relative;border:0;border-radius:0;background:none;color:#ebebdc;padding:0;min-width:0;height:40px;cursor:pointer;transition:color .15s}.pill:hover,.pill.selected{color:#dba122;background:none;font-weight:600}.control-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.control-icon{display:block;fill:currentColor;width:40px;height:40px}.control-icon path,.control-icon rect,.control-icon polygon{fill:currentColor}#typeFilters{gap:10px}#typeFilters .control-icon{width:40px;height:40px}#rarityFilters{gap:10px}#rarityFilters .pill[data-value="铁"] .control-icon{width:70px;height:40px}#rarityFilters .pill[data-value="铜"] .control-icon{width:57px;height:40px}#rarityFilters .pill[data-value="银"] .control-icon{width:39px;height:40px}#rarityFilters .pill[data-value="金"] .control-icon{width:48px;height:40px}
#costFilters{gap:5px;flex-wrap:nowrap}#costFilters .pill{width:45px;height:40px;border:2px solid #ebebdc;color:#ebebdc;overflow:hidden}#costFilters .pill:hover{border-color:#dba122}#costFilters .pill.selected{border-color:#dba122;color:#dba122}.kredit-icon{display:block;width:41px;height:36px;overflow:visible;font-family:Oswald,sans-serif;fill:currentColor}.kredit-primary{font-size:30px;font-weight:600;letter-spacing:-3px}.kredit-k{font-size:12px;font-weight:600}.kredit-plus{font-size:18px;font-weight:600}
.filter-search{flex:1 1 200px}.search{display:block;position:relative;border:2px solid #ebebdc;height:40px;width:100%;min-width:180px;background:none;padding:0;color:#ebebdc}.search input{width:100%;height:100%;border:0;border-radius:0;padding:8px 40px 8px 10px;font-size:15px;font-weight:700;color:#ebebdc;background:none;outline:none}.search input:focus-visible{outline:none}.search input::placeholder{color:#ebebdc80}.search:hover,.search:focus-within{border-color:#dba122}.search-icon{position:absolute;right:8px;top:2px;width:32px;height:32px;pointer-events:none}.search-icon:before{content:"";position:absolute;top:50%;left:50%;width:14px;height:14px;border:2px solid currentColor;border-radius:50%;transform:translate(-50%,-50%)}.search-icon:after{content:"";position:absolute;top:50%;left:50%;width:6px;border-bottom:2px solid currentColor;transform:translate(4px,4px) rotate(45deg);transform-origin:0 0}.search:hover .search-icon{color:#dba122}
.favorite-filter,#roleFilters .pill{position:relative;height:40px;padding:0 10px 0 30px;min-width:0;font-size:15px;font-weight:600;color:#ebebdc;background:none;border:0;text-align:left}.favorite-filter:before,#roleFilters .pill:before{content:"";position:absolute;top:10px;left:0;width:20px;height:20px;border:2px solid #ebebdc;box-sizing:border-box}.favorite-filter:hover:before,#roleFilters .pill:hover:before{border-color:#dba122}.favorite-filter[aria-pressed=true]:after,#roleFilters .pill.selected:after{content:"";position:absolute;top:12px;left:7px;width:7px;height:11px;border-bottom:2px solid #dba122;border-right:2px solid #dba122;transform:rotate(45deg)}#roleFilters{gap:10px}#roleFilters .control-label{position:static;clip:auto;width:auto;height:auto;white-space:normal}#roleFilters .pill.selected{color:#ebebdc}
.results-bar{display:flex;align-items:flex-start;gap:20px;justify-content:space-between;padding:15px 0 30px;font-size:14px;min-height:85px}.results-bar>p{margin:7px 0 0;white-space:nowrap;color:#ebebdc;font-size:14px;font-weight:600}.results-bar strong{font-family:Oswald,sans-serif;font-weight:600;color:#ebebdc}.active-filter-wrap{display:flex;align-items:flex-start;justify-content:flex-end;gap:10px;flex:1;min-width:0}#activeFilters{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}.filter-tag{display:block;position:relative;background:#333;border:0;padding:5px 30px 5px 10px;height:30px;color:#ebebdc;letter-spacing:.01em;font-size:12px;font-weight:400;box-shadow:0 0 5px #0003;text-align:left}.filter-tag:hover{background:#404040}.filter-tag:before,.filter-tag:after{content:"";position:absolute;top:15px;right:10px;width:12px;height:1px;background:#ebebdc;transform:rotate(45deg)}.filter-tag:after{transform:rotate(-45deg)}
.outline-button,.primary,.empty button,.detail-nav button{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;border:2px solid #ebebdc;border-radius:0;padding:0 20px;height:50px;min-width:130px;background:none;color:#ebebdc;font-size:16px;font-weight:600;transition:color .2s;white-space:nowrap}.outline-button:before,.primary:before,.empty button:before,.detail-nav button:before{content:"";position:absolute;inset:0;background:#ebebdc;transform:translateY(-101%);transition:transform .2s;z-index:-1}.outline-button:hover,.primary:hover,.empty button:hover,.detail-nav button:hover{color:#323232}.outline-button:hover:before,.primary:hover:before,.empty button:hover:before,.detail-nav button:hover:before{transform:translateY(0)}.results-bar .small-button{min-width:90px;height:30px;padding:0 10px;font-size:12px;color:#ebebdc;text-decoration:none}.results-bar .small-button:hover{color:#323232}.sort-label{display:flex;align-items:center;gap:0;margin:0}.sort-label select{border:0;background:transparent;color:#ebebdc;font-size:12px;padding:5px 24px 5px 8px;height:30px;max-width:150px;border-radius:0;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='m1 1 5 5 5-5' stroke='%23ebebdc' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center}.sort-label select:hover{color:#dba122}.sort-label option{color:#ebebdc;background:#181818}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;align-items:start}.card{position:relative;min-width:0;max-width:400px}.card-open{display:block;width:100%;padding:0;background:none}.card-visual{display:block;aspect-ratio:1448/2034;background:transparent;border-radius:3.5%/2.8%;box-shadow:0 0 10px 5px #0003;overflow:hidden;transition:transform .1s;transform:scale(1.0001)}.card-visual img{display:block;width:100%;height:100%;object-fit:contain}.card-open:hover .card-visual{transform:scale(1.025);filter:none}.card-caption,.card-meta{display:none}.save-card{position:absolute;top:0;right:0;width:44px;height:44px;border:0;border-radius:0 8px 0 8px;background:#ebebdc;color:#323232;font-size:25px;box-shadow:0 0 10px #0008;opacity:0;transition:opacity .2s;z-index:1}.card:hover .save-card,.card:focus-within .save-card,.save-card[aria-pressed=true]{opacity:1}.save-card[aria-pressed=true]{color:#9a6d10}.save-card:hover{color:#dba122}.missing-card{border:3px solid #ebebdc40;background:transparent;border-radius:3.5%/2.8%;box-shadow:none;position:relative;overflow:hidden;padding:22px}.missing-card:before{content:"";position:absolute;inset:0;background:url('ui/kards-logo.svg') center 30%/45% auto no-repeat;opacity:.12;pointer-events:none}.missing-card .missing-mark{display:none}.missing-card .missing-cost{top:10px;left:10px;font-family:Oswald,sans-serif;font-size:25px;background:none;color:#ebebdc}.missing-card strong{font-size:24px;line-height:1.5;margin-top:60px}.missing-card p,.missing-card>small{color:#ebebdc80;font-size:12px}.empty{text-align:center;padding:75px 0 100px}.empty h2{font-size:30px;letter-spacing:3px;font-weight:400;margin:0 0 30px}.empty button{margin:0}
dialog{color:#ebebdc;background:#181818 url('ui/pattern.jpg');border:0;padding:60px 45px 45px;max-width:1050px;width:calc(100% - 60px);max-height:94dvh;overflow:auto;box-shadow:0 10px 100px #0008}dialog::backdrop{background:#000c;backdrop-filter:blur(5px)}.close{position:absolute;right:8px;top:8px;width:48px;height:48px;padding:0;font-size:0;color:#ebebdc}.close:before,.close:after{content:"";position:absolute;top:23px;left:10px;width:28px;height:2px;background:currentColor;transform:rotate(45deg)}.close:after{transform:rotate(-45deg)}.close:hover{color:#dba122}.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:50px}.detail-image{position:relative;width:100%;max-height:none;aspect-ratio:1448/2034}.detail-image img{width:100%;height:100%;object-fit:contain;border-radius:3.5%/2.8%;display:block}.detail-copy h2{font-family:"Microsoft YaHei",sans-serif;font-size:32px;line-height:1.3;font-weight:700;margin:0}.detail-copy .eyebrow{font-size:14px;letter-spacing:1px;color:#dba122}.detail-sub{font-size:14px;color:#b1b1a6;margin:15px 0 25px}.detail-copy dl{display:grid;grid-template-columns:1fr 1fr;gap:0 25px;border-top:1px solid #ebebdc4d;padding-top:0;margin:0 0 25px}.detail-copy dl div{padding:14px 0;border-bottom:1px solid #ebebdc4d}.detail-copy dt{font-size:12px;color:#b1b1a6;margin-bottom:5px}.detail-copy dd{font-size:17px;margin:0}.primary{width:100%;background:#ebebdc;color:#323232}.primary:before{background:#1f1f1f}.primary:hover{color:#ebebdc}.detail-note{font-size:12px;line-height:1.8;color:#b1b1a6;margin:20px 0 30px}.detail-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0;border:0}.detail-nav button{height:40px;font-size:12px;padding:0 12px;min-width:0}.detail-nav span{font-family:Oswald,sans-serif;font-size:14px;color:#b1b1a6}.detail-nav button:disabled{pointer-events:none;opacity:.2}.source-copy p:not(.eyebrow){font-size:14px;line-height:1.9}.source-copy a{font-size:13px;color:#dba122}
footer{display:flex;flex-wrap:wrap;align-items:center;gap:35px;padding:50px 0 65px;border-top:1px solid #ebebdc30;margin-top:80px;font-size:12px;color:#b1b1a6}footer div{margin-right:auto}footer b{display:block;font-size:16px;font-weight:600;margin:0;color:#ebebdc}footer p{margin:5px 0 0;font-size:12px}footer button{color:#dba122;text-decoration:none;font-size:12px}footer button:hover{text-decoration:underline}footer>span{font-size:10px}.footer-logo img{display:block;width:100px;height:46px}.toast{border-radius:0;background:#ebebdc;color:#323232}
.mobile-filter-button,.mobile-filter-apply{display:none}#filterDialog{max-width:650px}#filterDialogTitle{margin:0 0 30px;font-size:28px}#filterDialog .filter-panel{padding:0;background:none;box-shadow:none}#filterDialog .filter-layout{display:flex;flex-direction:column;gap:25px}#filterDialog .filter-search{flex:none;width:100%}#filterDialog .mobile-filter-apply{display:flex;width:100%;margin-top:35px}#filterDialog b{font-family:Oswald,sans-serif}#filterDialog .filter-panel{margin:0}
@media(min-width:1600px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1279px){.header{gap:45px;height:90px}.brand img{width:123px}.header nav{gap:25px}.header nav a,.header nav button{font-size:15px}.header-right{gap:20px}.expansion-label{display:none}.official{height:42px;min-width:130px;font-size:14px}.filter-panel{padding:30px}.filter-layout{column-gap:25px;row-gap:22px}.filter-search{flex:1 1 200px}.results-bar{flex-wrap:wrap}.sort-label{margin-left:auto}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.header{padding-inline:25px;gap:30px}.header nav{gap:25px}.official{min-width:110px;gap:10px}.hero{padding-top:180px;min-height:420px;margin-bottom:-70px}.hero-image{min-height:420px}.hero-tagline{font-size:19px}main{padding-inline:25px}.filter-panel{padding:25px}.filter-search{flex:1 1 220px}.results-bar{gap:12px}.active-filter-wrap{flex:1 1 50%}.detail-layout{gap:30px}.detail-copy h2{font-size:25px}}
@media(max-width:650px){.header{height:80px;padding-inline:20px;gap:24px}.brand img{width:90px;height:50px}.header nav{gap:20px}.header nav a,.header nav button{font-size:13px}.header nav #aboutNav{display:none}.header-right{display:none}.hero{padding:150px 0 50px;min-height:300px;margin-bottom:0}.hero-image{height:420px;min-height:0;background-position:60% top}.hero h1{font-size:36px;line-height:1.3}.hero-tagline{font-size:17px;margin:8px 0 0}main{padding-inline:25px}.workspace>.mobile-filter-button{display:inline-flex;height:40px;font-size:14px;padding:0 15px;min-width:0}.mobile-filter-button svg{width:20px}.mobile-filter-button #filterCount:empty{display:none}#filterHome>.filter-panel{display:none}.results-bar{padding:20px 0;min-height:0;gap:15px;align-items:start}.results-bar>p{font-size:12px;margin-top:5px}.sort-label{order:1}.sort-label select{max-width:130px;padding-top:0;padding-bottom:0;font-size:11px}.active-filter-wrap{order:2;flex:1 1 100%;justify-content:start}.active-filter-wrap:has(#activeFilters:empty){display:none}#activeFilters{justify-content:start;gap:8px}.filter-tag{font-size:11px;height:28px;padding:5px 25px 5px 8px}.filter-tag:before,.filter-tag:after{right:8px;width:10px;top:14px}.results-bar .small-button{font-size:11px;height:28px;min-width:75px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.save-card{width:30px;height:30px;font-size:20px;opacity:0}.save-card[aria-pressed=true]{opacity:1}.card:focus-within .save-card{opacity:1}.missing-card{padding:12px}.missing-card strong{font-size:18px}.missing-card .missing-cost{font-size:20px}.missing-card p,.missing-card>small{font-size:9px}.empty h2{font-size:25px}.empty{padding:60px 0}.detail-layout{grid-template-columns:1fr;gap:25px}.detail-image{width:min(100%,310px);margin:auto}.detail-copy h2{font-size:27px}.detail-copy dt{font-size:12px}.detail-copy dd{font-size:16px}dialog{padding:50px 25px 30px;width:calc(100% - 30px);max-height:95dvh}.detail-note{margin-bottom:25px}.detail-nav button{height:40px}.source-copy a{font-size:12px}footer{margin-top:55px;padding:35px 0 45px;gap:25px;font-size:11px}footer div{margin:0}.footer-logo img{width:85px;height:40px}footer>span{width:100%;margin:0}footer button{margin-left:auto;font-size:11px}#filterDialog{width:100%;max-width:none;max-height:100dvh;height:100dvh;padding:65px 25px 35px;margin:0}#filterDialog .filter-layout{gap:25px}#filterDialogTitle{font-size:28px}#filterDialog #costFilters{gap:5px}#filterDialog #costFilters .pill{width:calc((100vw - 85px)/8);max-width:45px;height:40px}#filterDialog .filter-label{font-size:15px}#filterDialog #rarityFilters{gap:15px}}
/* Cost: same text positioning and type fallback as the official Cost component. */
.kredit-icon{font-family:"Gotham Narrow","Segoe UI",sans-serif}.kredit-primary{font-size:26px;font-weight:700;transform:translateX(-.1em)}.kredit-k{font-size:10px;font-weight:700;letter-spacing:-.1em;fill:#dba022}.kredit-plus{font-size:17px;font-weight:700;letter-spacing:-.1em}#costFilters .pill.selected{background:#1c1f26}
body:has(dialog[open]){overflow:hidden}
#detail{width:100%;max-width:1290px;max-height:100dvh;background:transparent;box-shadow:none;padding:100px 40px 50px}#detail .close{position:fixed;top:25px;right:25px;width:50px;height:50px}#detail .detail-layout{grid-template-columns:minmax(0,4fr) minmax(0,5fr);gap:8.333%;padding-inline:8.333% 0;align-items:start}#detail .detail-copy h2{font-size:clamp(32px,4vw,55px);line-height:1.1;margin:0 0 25px;overflow-wrap:anywhere}#detail .detail-copy .eyebrow{font-size:24px;font-weight:300;letter-spacing:0;color:#ebebdc;margin:0 0 12px}#detail .detail-sub{font-size:18px;margin:0 0 30px}#detail .detail-note{font-size:12px}#detail::backdrop{background:#000d;backdrop-filter:blur(5px)}
@media(max-width:900px){#detail{padding-top:85px}#detail .detail-layout{padding:0;gap:30px;grid-template-columns:minmax(0,4fr) minmax(0,5fr)}#detail .detail-copy h2{font-size:32px}#detail .detail-copy .eyebrow{font-size:20px}#detail .detail-sub{font-size:15px}}
@media(max-width:650px){#detail{padding:70px 25px 35px}#detail .detail-layout{grid-template-columns:1fr;gap:35px}#detail .close{top:12px;right:12px}#detail .detail-copy h2{font-size:32px}#detail .detail-image{max-width:310px}#detail .detail-copy .eyebrow{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}