@font-face { font-family: "YS"; src: url("/font/site-hans.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "YT"; src: url("/font/site-hant.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "YHS"; src: url("/font/site-head-hans.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "YHT"; src: url("/font/site-head-hant.ttf") format("truetype"); font-display: swap; }
:root {
  --paper: #fce19a; --paper-soft: #fef6dc; --ink: #1c1608; --ink-soft: #5f4c18;
  --night: #070c22; --night-card: #0e1636; --brass: #c9973f; --gold: #e7bb62; --ivory: #efe3c8; --dim: #a3abc3;
  --serif: "YT", "Source Han Serif TC", "Noto Serif CJK TC", "Songti TC", "PMingLiU", serif;
  --head: "YHT";
}
html:lang(zh-Hans) { --serif: "YS", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif; --head: "YHS"; }
* { box-sizing: border-box; }
html { background: var(--paper-soft); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--serif); color: var(--ink); line-height: 1.7; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, .head { font-family: var(--head), var(--serif); font-weight: 900; line-height: 1.25; text-wrap: balance; }
:focus-visible { outline: 3px solid #b5541a; outline-offset: 3px; }

.top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 10px clamp(14px, 3vw, 32px); background: #fffaf0; border-bottom: 2px solid var(--ink); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.logo img { width: 42px; height: 42px; }
.logo b { font-family: var(--head), var(--serif); font-size: 20px; font-weight: 900; }
.logo small { font-size: 12px; color: var(--ink-soft); }
.nav { display: flex; gap: 2px; order: 3; }
.nav a { display: block; padding: 8px 12px; text-decoration: none; font-size: 16px; min-height: 40px; border-bottom: 3px solid transparent; }
.nav a:hover { border-bottom-color: var(--brass); }
.nav a[aria-current="page"] { border-bottom-color: var(--ink); font-weight: 700; }
.sw { order: 4; flex: none; min-height: 40px; padding: 4px 12px; background: none; border: 1.5px solid var(--ink); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
@media (max-width: 720px) { .nav { order: 5; width: 100%; justify-content: space-between; } .nav a { padding: 6px 4px; font-size: 15px; } }

.foot { background: #fffaf0; border-top: 2px solid var(--ink); padding: 18px 16px; text-align: center; font-size: 13px; color: var(--ink-soft); }
.foot p { margin: 2px 0; }
.foot a { color: var(--ink); }

/* 首页：翻开的书，左页白天，右页夜晚 */
.motto { margin: 0; padding: 14px 16px; text-align: center; background: #fffaf0; font-family: var(--head), var(--serif); font-weight: 900; font-size: clamp(19px, 3.2vw, 30px); line-height: 1.35; }
.motto span { display: inline-block; }
.open { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); position: relative; }
.open::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 6px; margin-left: -3px; background: var(--brass); }
.page { padding: clamp(22px, 4vw, 46px) clamp(18px, 4vw, 52px); display: flex; flex-direction: column; }
.day { background: var(--paper); color: var(--ink); }
.dark { background: var(--night); color: var(--ivory); }
.kick { margin: 0 0 4px; font-size: 14px; }
.day .kick { color: var(--ink-soft); }
.dark .kick { color: var(--gold); }
.page h2 { margin: 0 0 6px; font-size: clamp(30px, 4.2vw, 46px); }
.page > p.intro { margin: 0 0 18px; font-size: 17px; }
.btn { display: inline-block; align-self: flex-start; min-height: 46px; padding: 9px 26px; font-size: 17px; text-decoration: none; border: 2px solid currentColor; transition: background .15s, color .15s; }
.day .btn { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.day .btn:hover { background: #fffaf0; color: var(--ink); }
.dark .btn { color: var(--gold); }
.dark .btn:hover { background: var(--gold); color: var(--night); }
.shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
.shelf a { display: block; border: 2px solid var(--ink); background: #000; }
.shelf a:hover { transform: translateY(-2px); }
.shelf img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.feature { display: block; position: relative; margin: 0 0 20px; border: 1px solid var(--brass); text-decoration: none; overflow: hidden; }
.feature img { width: 100%; aspect-ratio: 16 / 8.4; object-fit: cover; object-position: 50% 66%; }
.feature div { padding: 12px 14px; background: var(--night-card); }
.feature b { display: block; font-family: var(--head), var(--serif); font-weight: 900; font-size: 24px; color: var(--gold); line-height: 1.3; }
.feature div > span { font-size: 15px; color: var(--ivory); }
@media (max-width: 760px) {
  .open { grid-template-columns: minmax(0, 1fr); }
  .open::after { display: none; }
  .dark { border-top: 6px solid var(--brass); }
}

/* 书单 */
.sheet { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: clamp(20px, 4vw, 40px) clamp(14px, 3vw, 28px) 48px; }
.sheet h1 { font-size: clamp(30px, 5vw, 44px); margin: 0 0 6px; }
.lead { font-size: 17px; color: var(--ink-soft); margin: 0 0 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.chips button { min-height: 42px; padding: 6px 16px; background: #fffaf0; border: 1.5px solid var(--ink); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.card { display: flex; flex-direction: column; height: 100%; background: #fffaf0; border: 1.5px solid var(--ink); text-decoration: none; transition: transform .15s; }
.card:hover { transform: translateY(-3px); }
.card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1.5px solid var(--ink); background: #111; }
.card div { padding: 12px 14px 14px; }
.card b { display: block; font-family: var(--head), var(--serif); font-size: 20px; font-weight: 900; line-height: 1.3; }
.card small { display: block; color: #8a5a10; font-size: 13px; margin: 2px 0 6px; }
.card div > span { font-size: 15px; line-height: 1.6; display: block; }
.note { margin: 24px 0 0; font-size: 13px; color: var(--ink-soft); }
.about p.note { font-size: 13px; margin-top: 14px; }
.after { margin-top: 12px; text-align: center; font-size: 16px; }

/* 书单页右侧的“玩游戏”栏；窄屏移到书单上方 */
.withside { flex: 1; width: 100%; max-width: 1720px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) clamp(380px, 36%, 620px); gap: 8px; align-items: start; padding-right: clamp(14px, 2vw, 28px); }
.withside .sheet { max-width: none; margin: 0; }
.side { position: sticky; top: 16px; padding-top: clamp(20px, 4vw, 40px); }
.side h2 { margin: 0 0 14px; font-size: clamp(30px, 5vw, 44px); }
.side h2 a { text-decoration: none; }
.gcard { display: block; background: var(--night); color: var(--ivory); text-decoration: none; border: 2px solid var(--ink); transition: transform .15s; }
.gcard:hover { transform: translateY(-3px); }
.gcard img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: 50% 66%; }
.gcard div { padding: 18px 22px 24px; }
.gcard b { display: block; font-family: var(--head), var(--serif); font-weight: 900; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.3; color: var(--gold); }
.gcard div > span { display: block; font-size: 18px; margin: 4px 0 16px; }
.gcard em { display: inline-block; font-style: normal; font-size: 18px; color: var(--gold); border: 2px solid var(--gold); padding: 9px 28px; }
.gnext { margin-top: 14px; padding: 34px 14px; text-align: center; font-size: 17px; color: var(--ink-soft); border: 1.5px dashed var(--ink-soft); }
.next { margin: 0 0 20px; padding: 12px 14px; text-align: center; font-size: 15px; color: var(--dim); border: 1px dashed rgba(201, 151, 63, .6); }
@media (max-width: 980px) {
  .withside { display: flex; flex-direction: column-reverse; align-items: stretch; padding-right: 0; gap: 0; }
  .side { position: static; padding: 18px clamp(14px, 3vw, 28px) 0; }
  .side h2 { font-size: 24px; margin-bottom: 8px; }
  .gcard { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
  .gcard img { width: 112px; height: 122px; aspect-ratio: auto; object-position: 50% 68%; }
  .gcard div { padding: 8px 12px 10px; }
  .gcard b { font-size: 20px; }
  .gcard div { padding: 8px 12px 10px; }
  .gcard div > span { font-size: 14px; margin: 0 0 6px; }
  .gcard em { padding: 2px 12px; font-size: 14px; border-width: 1.5px; }
  .gnext { display: none; }
  .withside .sheet { padding-top: 16px; }
}

/* 玩游戏 */
.nightpage { background: var(--night); color: var(--ivory); flex: 1; }
.nightpage .sheet h1 { color: var(--ivory); }
.nightpage .lead { color: var(--dim); }
.game { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 26px; align-items: center; padding: 18px; background: var(--night-card); border: 1px solid var(--brass); max-width: 860px; }
.game img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 62%; }
.game h2 { margin: 0 0 4px; font-size: 34px; color: var(--gold); }
.game .meta { margin: 0 0 10px; font-size: 14px; color: var(--dim); }
.game .hook { margin: 0 0 18px; font-size: 18px; }
.game .btn { color: var(--gold); }
.game .btn:hover { background: var(--gold); color: var(--night); }
.soon { margin-top: 22px; color: var(--dim); }
@media (max-width: 620px) { .game { grid-template-columns: 1fr; padding: 14px; } .game img { aspect-ratio: 16 / 10; object-position: 50% 70%; } }

/* 关于 */
.about { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: start; max-width: 780px; }
.about img { width: 180px; height: 180px; }
.about p { font-size: 18px; margin: 0 0 12px; }
.about .links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.about .btn { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.about .btn.alt { background: none; color: var(--ink); }
@media (max-width: 560px) { .about { grid-template-columns: 1fr; gap: 14px; } .about img { width: 120px; height: 120px; } }

@media (prefers-reduced-motion: reduce) { .card, .btn, .shelf a, .gcard { transition: none; } .card:hover, .shelf a:hover, .gcard:hover { transform: none; } }