:root{color-scheme:light;--bg:#faf9f6;--panel:#fffdfa;--panel2:#f1eee7;--text:#292824;--muted:#858179;--line:#e7e3db;--accent:#d96b4b;--accent2:#e8a18d;--shadow:0 3px 12px rgba(45,38,28,.045)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;line-height:1.6;min-height:100vh;overflow-x:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit}.ambient{display:none}
.topbar{height:76px;display:flex;align-items:center;max-width:1120px;padding:0 24px;margin:auto;gap:36px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;font-family:Georgia,"Songti SC",serif;font-weight:700;font-size:20px;letter-spacing:-.3px}.brand-mark{width:30px;height:30px;display:grid;place-items:center;color:var(--accent);flex-shrink:0}.brand-mark svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.brand-mark .book-sparkle{fill:currentColor;stroke:none}.brand small{display:none}.topbar nav{display:flex;gap:28px;margin-left:20px;font-size:13px;color:var(--muted)}.topbar nav a{padding:26px 0 22px}.topbar nav a:hover,.topbar nav .nav-active{color:var(--text)}.nav-active{position:relative}.nav-active:after{content:"";position:absolute;bottom:15px;left:0;right:0;height:2px;background:var(--text);border-radius:2px}.icon-btn{width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--text);cursor:pointer;font-size:19px;margin-left:auto}.icon-btn:hover{background:var(--panel2)}
main{max-width:1120px;margin:auto;padding:0 24px}.hero{min-height:330px;display:grid;grid-template-columns:1.3fr .7fr;align-items:center;padding:48px 0 38px;gap:20px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:650;color:var(--muted);display:flex;align-items:center;gap:9px}.hero h1{font-family:Georgia,"Songti SC","Noto Serif SC",serif;font-size:clamp(30px,3.4vw,43px);line-height:1.3;letter-spacing:-1px;margin:13px 0;font-weight:500}.hero h1 span{color:var(--accent)}.hero-copy>p{color:var(--muted);font-family:Georgia,"Songti SC",serif;font-size:14px;line-height:1.9;margin:0 0 25px}.search-box{height:43px;max-width:560px;display:flex;align-items:center;background:var(--panel);border:1px solid #dedbd3;border-radius:7px;padding:4px 9px 4px 12px;box-shadow:0 1px 2px #00000004}.search-icon{font-size:22px;color:#777;margin-right:9px;transform:rotate(-20deg)}.search-box input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--text);font-size:13px}.search-box input::placeholder{color:#aaa69e}.search-box button{border:0;border-radius:5px;padding:6px 8px;background:transparent;color:var(--text);font-size:17px;cursor:pointer}.search-box button:hover{color:var(--accent)}.search-box button span{display:none}.hero-meta{display:flex;gap:9px;align-items:center;margin-top:13px;color:#98938b;font-size:10px}
.hero-art{height:250px;position:relative;display:flex;align-items:center;justify-content:center;perspective:900px}.orbit{position:absolute;border:1px solid #d7a8ff20;border-radius:50%;transform:rotate(-24deg)}.orbit-one{width:390px;height:220px}.orbit-two{width:320px;height:270px;transform:rotate(35deg)}.art-card{position:absolute;width:150px;height:195px;border-radius:5px;overflow:hidden;padding:15px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:none;border:1px solid #e4d9cc}.art-card:before{content:"";position:absolute;inset:0;background:linear-gradient(155deg,#f4e8d8 0%,#d8c4b2 45%,#b6b0a2 100%);z-index:-2}.art-card:after{content:"";position:absolute;width:150px;height:150px;right:-55px;top:35px;border:1px solid #fff8;border-radius:50%;box-shadow:0 0 0 18px #ffffff17,0 0 0 36px #ffffff10;z-index:-1}.art-card span,.art-card i{font-size:7px;letter-spacing:1.5px;font-style:normal}.art-card b{font-family:Georgia,"Songti SC",serif;font-size:22px;line-height:1.45;letter-spacing:1px;color:#3e3935}.art-card i{color:#645b55}.art-card-back{transform:translate(-35px,5px) rotate(-8deg);opacity:.72}.art-card-front{transform:translate(40px,-2px) rotate(5deg);background:linear-gradient(145deg,#e6d7c8,#b5aa99)}.art-card-front:before{background:linear-gradient(155deg,#f0e5d6,#d4c1ad 50%,#b6b0a2)}.art-sun{position:absolute;width:65px;height:65px;right:15px;top:38px;border-radius:50%;background:#fff7e6a6;z-index:-1}.floating-tag{position:absolute;bottom:0;right:0;font-size:8px;letter-spacing:1.3px;padding:7px 10px;border:1px solid var(--line);border-radius:4px;background:#faf9f6;color:#8b8174}
.catalog{padding:20px 0 50px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}.section-heading h2{font-family:Georgia,"Songti SC",serif;font-size:25px;font-weight:500;margin:5px 0 1px;letter-spacing:-.5px}.section-heading p{margin:0;color:var(--muted);font-size:12px}.outline-btn{border:1px solid var(--line);background:transparent;color:var(--text);border-radius:6px;padding:7px 11px;font-size:11px;cursor:pointer;transition:background .15s,border-color .15s}.outline-btn:hover{border-color:#c9bfb1;background:#f3f0e9}.status{text-align:center;padding:42px 10px;color:var(--muted);font-size:13px}.loader{display:inline-block;width:15px;height:15px;border:2px solid #7774;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle;margin-right:9px}@keyframes spin{to{transform:rotate(360deg)}}.game-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.game-card{min-width:0;cursor:pointer;transition:transform .18s}.game-card:hover{transform:translateY(-3px)}.cover-wrap{height:215px;position:relative;overflow:hidden;border-radius:7px 7px 0 0;background:#eee8df;border:1px solid var(--line);border-bottom:0}.cover-wrap img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}.cover-fallback[hidden]{display:none}.game-card:hover .cover-wrap img{transform:scale(1.025)}.cover-fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;background:radial-gradient(circle at 70% 25%,#e8c7b333,transparent 45%),linear-gradient(145deg,#e9e0d4,#d9d1c5);font-family:Georgia,"Songti SC",serif;font-size:22px;color:#786c60}.cover-badge{position:absolute;top:9px;left:9px;padding:4px 7px;border-radius:4px;background:#faf9f0e8;font-size:8px;color:#6d665d}.card-info{padding:11px 12px 10px;border:1px solid var(--line);border-radius:0 0 7px 7px;background:var(--panel);box-shadow:var(--shadow)}.card-title{font-family:Georgia,"Songti SC",serif;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}.card-subtitle{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-tags{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}.tag{font-size:9px;padding:3px 7px;border-radius:99px;background:#f1eee7;color:#777065}.pagination{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:28px;color:var(--muted);font-size:12px}.about{display:flex;gap:15px;align-items:center;padding:18px 0;border-top:1px solid var(--line);margin:0 0 25px}.about-symbol{flex-shrink:0;width:35px;height:35px;display:grid;place-items:center;color:var(--accent)}.about-symbol svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.about-symbol .book-sparkle{fill:currentColor;stroke:none}.about h3{font-family:Georgia,"Songti SC",serif;font-size:13px;margin:0 0 3px;font-weight:600}.about p{font-size:10px;color:var(--muted);margin:0;max-width:730px}.about>a{margin-left:auto;white-space:nowrap;color:#8b7463;font-size:10px}footer{display:flex;justify-content:space-between;gap:15px;padding:18px 0 25px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}footer span:first-child{font-family:Georgia,serif;font-weight:700;color:var(--text)}
.detail-dialog{width:min(760px,calc(100% - 28px));max-height:88vh;overflow:auto;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);padding:24px;box-shadow:0 18px 60px #2b241b20}.detail-dialog::backdrop{background:#24211dc9;backdrop-filter:blur(4px)}.dialog-close{float:right;width:30px;height:30px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--text);font-size:21px;cursor:pointer}.detail-layout{display:grid;grid-template-columns:170px 1fr;gap:22px;clear:both;padding-top:8px}.detail-cover{width:100%;max-height:270px;object-fit:cover;border-radius:5px;background:var(--panel2)}.detail-title{font-family:Georgia,"Songti SC",serif;font-size:23px;line-height:1.3;margin:4px 0 6px}.detail-original{font-size:11px;color:var(--muted)}.detail-description{font-size:12px;line-height:1.9;color:#6f6b63;white-space:pre-line;margin:18px 0}.detail-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.fact{padding:9px;border:1px solid var(--line);border-radius:5px;background:#ffffff40}.fact small{display:block;color:var(--muted);font-size:10px}.fact b{font-size:11px}.link-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.link-btn{display:inline-flex;padding:8px 11px;background:var(--text);color:#fffdfa;border-radius:5px;font-size:10px;font-weight:600}.link-btn.secondary{background:transparent;color:var(--text);border:1px solid var(--line)}.empty{grid-column:1/-1;text-align:center;padding:50px 12px;color:var(--muted);font-size:13px}
body.light{color-scheme:light}body.dark{color-scheme:dark;--bg:#20201e;--panel:#292824;--panel2:#35332e;--text:#f2eee7;--muted:#aaa49a;--line:#403d36;--accent:#e5a08b;--shadow:0 3px 12px rgba(0,0,0,.08)}body.dark .hero-copy>p,body.dark .detail-description{color:var(--muted)}body.dark .cover-fallback{background:linear-gradient(145deg,#45413b,#302e2a);color:#d4c8b8}body.dark .card-info{background:var(--panel)}body.dark .tag{background:#3a3731;color:#c9c0b2}body.dark .floating-tag{background:#292824}body.dark .art-card b{color:#3e3935}
@media(max-width:900px){.hero{grid-template-columns:1fr .65fr}.hero-art{transform:scale(.85);margin:0 -35px}.game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.cover-wrap{height:210px}}@media(max-width:650px){.topbar{height:64px;padding:0 17px;gap:12px}.brand{font-size:17px}.brand-mark{width:26px;height:26px}.topbar nav{gap:16px;margin-left:auto;font-size:12px}.topbar nav a{padding:21px 0 18px}.nav-active:after{bottom:10px}.icon-btn{width:30px;height:30px;margin-left:0}main{padding:0 17px}.hero{display:block;padding:35px 0 20px;min-height:0}.hero h1{font-size:32px;letter-spacing:-.7px;margin-top:12px}.hero-copy>p{font-size:12px;line-height:1.9}.search-box{height:44px}.hero-meta{font-size:9px;gap:6px;flex-wrap:wrap}.hero-art{height:160px;transform:scale(.72);margin:-5px 0 -4px}.art-card{width:130px;height:165px}.art-card b{font-size:19px}.orbit-one{width:280px;height:160px}.orbit-two{width:240px;height:190px}.floating-tag{right:0;bottom:-4px}.catalog{padding:15px 0 35px}.section-heading h2{font-size:23px}.section-heading p{font-size:10px}.outline-btn{padding:7px 9px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 11px}.cover-wrap{height:auto;aspect-ratio:1.12/1;border-radius:6px 6px 0 0}.card-info{padding:9px 9px 8px}.card-title{font-size:12px}.card-subtitle{font-size:9px}.card-tags{gap:4px;margin-top:7px}.tag{font-size:8px;padding:3px 6px}.about{align-items:flex-start;padding:16px 0;gap:10px;flex-wrap:wrap}.about-symbol{width:28px;height:30px}.about>div:nth-child(2){flex:1;min-width:0}.about p{line-height:1.8}.about>a{margin-left:38px}footer{font-size:9px;flex-direction:column;gap:5px}.detail-dialog{padding:16px}.detail-layout{grid-template-columns:95px 1fr;gap:12px}.detail-title{font-size:18px}.detail-cover{max-height:160px}.detail-description{grid-column:1/-1;margin-top:5px}.detail-facts{gap:6px}.fact{padding:7px}.fact b{font-size:10px}}

/* 统一功能图标的盒子、笔画和对齐方式，避免字符字体造成的视觉偏移。 */
.icon-btn,.search-icon,.search-box button span,.outline-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;vertical-align:middle}
.icon-btn svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.search-icon{width:22px;height:22px;flex:0 0 22px;margin-right:9px;transform:none;color:#777}
.search-icon svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.search-box button span{width:16px;height:16px}
.search-box button span svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.inline-icon{display:block;width:15px;height:15px;flex:0 0 15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.outline-btn{min-height:34px;line-height:1.2;white-space:nowrap}
.pagination{gap:12px;flex-wrap:wrap}
.pagination .outline-btn:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:650px){.pagination{gap:8px}.pagination .outline-btn{padding:7px 9px}.pagination #pageLabel{min-width:58px;text-align:center}}

/* 最终统一三个易错位的 SVG 图标：固定 viewBox 比例、尺寸与按钮行高。 */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:0;flex:0 0 34px}
.icon-btn svg{width:20px;height:20px;flex:0 0 20px;overflow:visible}
.search-box button{display:inline-flex;align-items:center;justify-content:center;gap:5px;line-height:1;white-space:nowrap}
.search-box button span{display:inline-flex;align-items:center;justify-content:center;flex:0 0 16px;width:16px;height:16px;line-height:0}
.search-box button span svg{width:16px;height:16px;flex:0 0 16px}
#randomBtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1.2}
#randomBtn .inline-icon{width:16px;height:16px;flex:0 0 16px}
#randomBtn span{display:inline-block;line-height:1.2}
@media(max-width:650px){.icon-btn{flex-basis:30px}.icon-btn svg{width:19px;height:19px;flex-basis:19px}}

/* Icon alignment and complete cover framing */
.icon-btn{padding:0;line-height:0;display:inline-flex;align-items:center;justify-content:center}
.icon-btn svg{display:block;width:20px;height:20px;flex:0 0 20px;overflow:visible}
.icon-btn svg[hidden]{display:none}
.dialog-close{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:0}
.dialog-close svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cover-wrap img.game-cover{object-fit:contain;background:var(--panel2)}
.detail-cover{width:100%;height:auto;max-height:360px;object-fit:contain;object-position:top center;display:block}


/* Theme icon: switch explicitly by theme class, independent of SVG hidden attribute. */
#themeToggle .theme-sun, body:not(.dark) #themeToggle .theme-sun{display:block}
#themeToggle .theme-moon, body:not(.dark) #themeToggle .theme-moon{display:none}
body.dark #themeToggle .theme-sun{display:none}
body.dark #themeToggle .theme-moon{display:block}
#themeToggle svg{width:20px;height:20px;flex:0 0 20px}

/* Complete cover display with a larger, consistent portrait frame. */
.cover-wrap{height:auto;aspect-ratio:3/4;background:var(--panel2)}
.cover-wrap img.game-cover{width:100%;height:100%;object-fit:contain;object-position:center;background:var(--panel2)}
@media(max-width:900px){.cover-wrap{height:auto;aspect-ratio:3/4}}
@media(max-width:650px){.cover-wrap{height:auto;aspect-ratio:3/4}}


/* Cover frames adapt to the actual artwork orientation: landscape art gets a wider frame. */
.cover-wrap{aspect-ratio:3/4;transition:aspect-ratio .15s ease}
.cover-wrap.cover-landscape{aspect-ratio:4/3}
.cover-wrap.cover-portrait{aspect-ratio:3/4}
.cover-wrap img.game-cover{width:100%;height:100%;object-fit:contain;object-position:center}
.detail-cover{width:100%;height:auto;max-height:360px;object-fit:contain;object-position:center}
@media(max-width:650px){.cover-wrap.cover-landscape{aspect-ratio:4/3}.cover-wrap.cover-portrait{aspect-ratio:3/4}}

/* Remove the persistent shadow/tap glow from the theme switch; retain a clear keyboard focus outline. */
#themeToggle{box-shadow:none!important;filter:none!important;-webkit-tap-highlight-color:transparent;outline:none}
#themeToggle:hover,#themeToggle:active,#themeToggle:focus{box-shadow:none!important;filter:none!important}
#themeToggle:hover{background:transparent}
#themeToggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}


/* Stable landscape-first card frames: prevent portrait placeholder flash before image loads. */
.cover-wrap{height:auto;aspect-ratio:4/3;transition:none}
.cover-wrap.cover-landscape{aspect-ratio:4/3}
.cover-wrap.cover-portrait{aspect-ratio:4/3}
@media(max-width:900px){.cover-wrap{height:auto;aspect-ratio:4/3}}
@media(max-width:650px){.cover-wrap,.cover-wrap.cover-landscape,.cover-wrap.cover-portrait{height:auto;aspect-ratio:4/3}}
.cover-wrap img.game-cover{width:100%;height:100%;object-fit:contain;object-position:center}
