/* 书架页和阅读页共用的外壳：底色、标题栏、按钮、木扣、加载画面。--accent 强调色、--card 卡纸色，book.json 的 theme 能换 */
:root { --ink: #f4ead6; --dim: #b9a98c; --bar: rgba(28, 20, 14, .82); --accent: #f4c879; --card: #f6eedb; }
* { box-sizing: border-box; user-select: none; -webkit-user-select: none; }
html, body { margin: 0; height: 100%; background: #2a1c13; color: var(--ink);
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif; overflow: hidden; }
canvas { display: block; touch-action: none; }
header { position: fixed; inset: 0 0 auto 0; height: 44px; display: flex; align-items: center;
  gap: 12px; padding: 0 16px; background: var(--bar); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.08); z-index: 2; }
header h1 { font-size: 17px; letter-spacing: .2em; margin: 0; font-weight: 600; }
header h1:lang(en) { letter-spacing: .04em; font-family: Georgia, "Times New Roman", serif; }
header small { color: var(--dim); font-size: 12px; letter-spacing: .1em; }
header small:lang(en) { letter-spacing: .03em; font-family: Georgia, "Times New Roman", serif; }
button { background: rgba(255,255,255,.08); color: var(--ink); border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px; height: 32px; min-width: 36px; padding: 0 10px; font: inherit; font-size: 14px;
  cursor: pointer; transition: background .2s, transform .12s, opacity .2s; }
button:hover:not(:disabled) { background: rgba(255,255,255,.18); }
button:active:not(:disabled) { transform: scale(.95); }
button:disabled { opacity: .3; cursor: default; }

/* 木扣：浅木色的圆角木片，选中的那颗颜色深、压进去；手指点得到，至少 44 像素高 */
.knobs { display: flex; gap: 6px; }
.knobs[hidden] { display: none; }
.knobs button { height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid #8f6a3c; color: #3d2a1a;
  font-size: 17px; letter-spacing: .1em; background: linear-gradient(#e6c896, #c99d62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 0 #8f6a3c; }
.knobs button:lang(en) { letter-spacing: 0; font-family: Georgia, "Times New Roman", serif; }
.knobs button:hover:not(:disabled) { background: linear-gradient(#eed4a8, #d4aa70); }
.knobs button[aria-pressed="true"], .knobs button[aria-pressed="true"]:hover {
  background: linear-gradient(#8a5d33, #6d4725); color: var(--card); box-shadow: inset 0 2px 4px rgba(0,0,0,.35); }

/* 加载画面；从另一页跳过来时盖着上一页的最后一帧（engine/arrive.js），这一页画好了再淡出 */
#loading { position: fixed; inset: 0; display: grid; place-items: center; color: var(--dim);
  letter-spacing: .3em; z-index: 3; background: #2a1c13; transition: opacity .6s; }
#loading > img { position: absolute; }
/* 盖着的是上一页的最后一帧、跟这一页第一帧一样：很快揭开，书架放回书时不会看到两本书叠着动 */
#loading:has(> img) { transition-duration: .15s; }
#loading.error { white-space: pre-line; color: #f0a890; letter-spacing: .08em; line-height: 1.9;
  text-align: center; padding: 0 24px; }