/* 像素小动物的图鉴：动画是主角，文字只做标签，舞台底色可切换 */
@font-face{font-family:"ZCOOL QingKe HuangYou";src:url(fonts/qingke.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Pixelify Sans";src:url(fonts/pixelify.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/mono.woff2) format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"Noto Sans SC";src:url(fonts/noto-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0020-02FF,U+2000-206F}
@font-face{font-family:"Noto Sans SC";src:url(fonts/noto-cjk.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+2E80-9FFF,U+F900-FAFF,U+FF00-FFEF}

:root{--bg:#eef0f4;--fg:#1d2230;--muted:#5d6577;--line:#d3d7e0;--accent:#b4532f;--stage:#262a33;--panel:#fff;--hover:#eef0f4;
--sys:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;--body:"Noto Sans SC",var(--sys);--mono:"JetBrains Mono",ui-monospace,Menlo,var(--body)}
:root[lang="zh"]{--display:"ZCOOL QingKe HuangYou",var(--body)}
:root[lang="en"]{--display:"Pixelify Sans",var(--body)}
@media (prefers-color-scheme:dark){:root{--bg:#14161c;--fg:#e8eaf0;--muted:#9aa2b3;--line:#2c313c;--accent:#e08a66;--panel:#1e2129;--hover:#2a2e38;color-scheme:dark}}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);line-height:1.5}
main{max-width:1180px;margin:0 auto;padding-block:40px 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

header{display:flex;gap:16px 32px;align-items:start;justify-content:space-between}
h1{font:400 clamp(40px,7vw,64px)/1 var(--display);margin:0;letter-spacing:.02em}
h1 b{font-weight:400;color:var(--accent)}
.lead{margin:10px 0 0;color:var(--muted);font-size:15px}
.langs{display:flex;gap:12px;flex:none;font-size:14px;padding-top:6px}
.langs span{color:var(--fg);font-weight:700}
.langs a{color:var(--muted);text-decoration:none}
.langs a:hover{color:var(--accent)}
.sys{font-family:var(--sys)}

.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:8px 16px;margin-top:20px;padding:10px 0;background:var(--bg);border-bottom:1px solid var(--line)}
.search{display:flex;align-items:center;gap:8px;flex:1 1 auto;max-width:400px;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:2px;background:var(--panel);color:var(--muted);transition:border-color .15s}
.search:focus-within{border-color:var(--accent)}
.search svg{flex:none}
.search input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--fg);font:16px/1 var(--body);padding:0}
.search input::placeholder{color:var(--muted);opacity:1}
#count{flex:none;font-size:13px;color:var(--muted);white-space:nowrap}
.swatches{display:flex;gap:8px;align-items:center;margin-left:auto;flex:none;font-size:13px;color:var(--muted)}
.swatches button{width:26px;height:26px;padding:0;border:1px solid var(--line);border-radius:2px;cursor:pointer;background:var(--c)}
.swatches button[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:2px}

.sections{display:grid;gap:48px;margin-top:32px}
section{display:grid;gap:16px;min-width:0}
h2{font:400 28px/1.2 var(--display);margin:0;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
h2 small{font:400 13px var(--body);color:var(--muted)}
.grid{display:grid;gap:20px 16px}
.big{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.small{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px 10px}
@media (min-width:1000px){.big{grid-template-columns:repeat(3,1fr)}.grid.emoji{grid-template-columns:repeat(7,1fr)}.grid.pet{grid-template-columns:repeat(8,1fr)}}

figure{margin:0;min-width:0;display:grid;gap:6px;align-content:start}
.stage{background:var(--stage);transition:background .15s}
.card .stage{aspect-ratio:3/2}
.tile .stage{aspect-ratio:1}
.stage img{width:100%;height:100%;object-fit:contain;display:block;image-rendering:pixelated}
figcaption{position:relative;min-width:0;display:flex;gap:4px;align-items:start;justify-content:space-between}
.cap{min-width:0}
.card .cap{display:grid;gap:1px;font-size:13px;color:var(--muted)}
.card strong{font-size:16px;font-weight:700;color:var(--fg)}
.spec{font:12px/1.5 var(--mono);font-variant-numeric:tabular-nums}
.tile .cap{font-size:13px;color:var(--muted);padding-top:5px}

.dl{flex:none}
.dl summary{display:grid;place-items:center;width:32px;height:32px;color:var(--muted);cursor:pointer;list-style:none;border-radius:2px;transition:color .15s,background .15s}
.dl summary::-webkit-details-marker{display:none}
.dl summary:hover{color:var(--accent)}
.dl[open] summary{color:var(--accent);background:var(--hover)}
.menu{position:absolute;right:0;top:calc(100% + 2px);z-index:20;width:min(300px,calc(100vw - 32px));padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:2px;box-shadow:0 10px 28px rgb(16 20 32/.2)}
.menu.up{top:auto;bottom:calc(100% + 2px)}
.menu a{display:grid;grid-template-columns:1fr auto;gap:0 12px;padding:7px 9px;color:var(--fg);text-decoration:none;border-radius:2px}
.menu a:hover,.menu a:focus-visible{background:var(--hover);outline-offset:-2px}
.menu b{font-size:14px;font-weight:700}
.menu i{font:12px/21px var(--mono);color:var(--muted);text-align:right}
.menu span{grid-column:1/-1;font-size:12px;line-height:1.4;color:var(--muted)}

.empty{margin:24px 0;color:var(--muted);font-size:15px}
footer{margin-top:64px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}

@media (max-width:560px){
main{padding-top:28px}
.swatches span{display:none}
h2{font-size:24px}
.bar{gap:8px 10px}
#count{display:none}
}
@media (pointer:coarse){.dl summary{width:40px;height:40px}.menu a{padding:10px}}
@media (prefers-reduced-motion:reduce){.stage,.search,.dl summary{transition:none}}