/* =================================================================
   book.css — 古籍翻页书样式表
   响应策略：
   · > 620px  双页翻书模式（PageFlip）
   · ≤ 620px  单页卡片滚动模式
   两套 UI 同时存在于 DOM，由 CSS 控制显示/隐藏，JS 各自初始化
================================================================= */

/* ─── 基础重置 ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --parchment-light: #f5e9c8;
  --parchment-mid:   #ede0b0;
  --parchment-dark:  #d6c48a;
  --ink-dark:        #2a1a0e;
  --ink-mid:         #4a3020;
  --ink-faint:       #7a5c38;
  --cover-brown:     #3d1f0a;
  --cover-gold:      #b8922a;
  --cover-gold-lt:   #d4ae4a;
  --page-w: 420px;
  --page-h: 580px;
  --mobile-bp: 620px;
}

body {
  min-height: 100vh;
  background: radial-gradient(ellipse at center, #1a0f05 0%, #0d0804 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Georgia', 'Times New Roman', serif;
  overflow-x: hidden;
  padding: 20px;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(255,255,255,.01) 40px, rgba(255,255,255,.01) 41px),
    repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(255,255,255,.01) 40px, rgba(255,255,255,.01) 41px);
  pointer-events: none; z-index: 0;
}

/* ─── 书名题头 ─── */
#book-title-area {
  position: relative; z-index: 10;
  text-align: center; margin-bottom: 18px;
}
#book-title-area h1 {
  color: var(--cover-gold-lt);
  font-size: 1.5rem; font-weight: normal;
  letter-spacing: .25em;
  text-shadow: 0 0 20px rgba(184,146,42,.5), 0 2px 4px rgba(0,0,0,.8);
}
#book-title-area .subtitle {
  color: var(--cover-gold); font-size: .8rem;
  letter-spacing: .15em; margin-top: 4px; opacity: .75;
}


/* ══════════════════════════════════════════════════════════════
   ① 桌面翻页书（> 620px 可见）
══════════════════════════════════════════════════════════════ */

#book-container {
  position: relative; z-index: 5;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.8))
          drop-shadow(0 0 60px rgba(184,146,42,.08));
}
#book {
  width: calc(var(--page-w) * 2);
  height: var(--page-h);
  overflow: hidden;
}

/* 单页基础 */
.page {
  width: var(--page-w);
  height: var(--page-h);
  overflow: hidden;
  position: relative;
  background: var(--parchment-light);
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(210,180,120,.18) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(180,150,90,.12) 0%, transparent 55%),
    repeating-linear-gradient(107deg, transparent, transparent 2px, rgba(0,0,0,.012) 2px, rgba(0,0,0,.012) 4px);
  color: var(--ink-dark);
}
.page.--right .page-inner {
  border-left: 2px solid rgba(139,100,40,.3);
  background: linear-gradient(to right, rgba(0,0,0,.04) 0%, transparent 8%);
}
.page.--left .page-inner {
  border-right: 2px solid rgba(139,100,40,.3);
  background: linear-gradient(to left, rgba(0,0,0,.04) 0%, transparent 8%);
}
.page-inner {
  position: absolute; inset: 0;
  padding: 36px 32px 44px;
  display: flex; flex-direction: column;
}

/* 封面 / 封底 */
.page.cover-page,
.page.back-cover {
  background: var(--cover-brown);
  background-image: radial-gradient(ellipse at 50% 40%, #5a2e10 0%, #3d1f0a 50%, #2a1205 100%);
}
.page.cover-page .page-inner,
.page.back-cover .page-inner {
  border: none; background: none;
  align-items: center; justify-content: center;
}
.cover-border {
  position: absolute; inset: 14px;
  border: 2px solid var(--cover-gold); pointer-events: none;
}
.cover-border::before {
  content: ''; position: absolute; inset: 5px;
  border: 1px solid rgba(184,146,42,.4);
}
.cover-border::after {
  content: '✦'; position: absolute;
  top: -9px; left: -9px;
  width: 16px; height: 16px;
  background: var(--cover-brown);
  color: var(--cover-gold); font-size: 13px;
  text-align: center; line-height: 16px;
}
.cover-ornament        { color: var(--cover-gold); font-size: 2rem; line-height: 1; margin-bottom: 16px; }
.cover-title           { color: var(--cover-gold-lt); font-size: 1.45rem; letter-spacing: .2em; text-align: center; text-shadow: 0 0 20px rgba(184,146,42,.5); margin-bottom: 8px; }
.cover-divider         { width: 60%; height: 1px; background: linear-gradient(to right, transparent, var(--cover-gold), transparent); margin: 12px auto; }
.cover-subtitle        { color: rgba(212,174,74,.7); font-size: .8rem; letter-spacing: .15em; text-align: center; }
.cover-author          { color: rgba(212,174,74,.55); font-size: .72rem; letter-spacing: .1em; margin-top: 24px; text-align: center; }
.cover-bottom-ornament { color: var(--cover-gold); font-size: 1.2rem; opacity: .6; margin-top: 28px; }

/* 内页组件 */
.chapter-heading {
  text-align: center; margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(139,100,40,.3);
}
.chapter-heading::after { content: '❧'; display: block; color: var(--ink-faint); font-size: .9rem; margin-top: 6px; opacity: .6; }
.chapter-label  { font-size: .68rem; letter-spacing: .2em; color: var(--ink-faint); margin-bottom: 4px; }
.chapter-title  { font-size: 1.05rem; color: var(--ink-dark); font-weight: bold; letter-spacing: .05em; }

.page-text      { flex: 1; overflow: hidden; text-align: justify; hyphens: auto; }
.page-text p    { margin-bottom: .6em; color: var(--ink-mid); font-size: .88rem; line-height: 1.85; }
.page-text strong { color: var(--ink-dark); }
.page-text em   { font-style: italic; color: var(--ink-mid); }
.page-text ul,
.page-text ol   { margin: 6px 0 6px 1.5em; color: var(--ink-mid); font-size: .88rem; line-height: 1.8; }
.page-text li   { margin-bottom: .3em; }

.callout-box {
  border-left: 3px solid #8b3a2a;
  background: rgba(139,58,42,.06);
  padding: 8px 12px; margin: 10px 0;
  border-radius: 0 4px 4px 0;
}
.callout-box p        { color: #5a2010 !important; font-size: .84rem !important; }
.callout-label        { font-size: .7rem; font-weight: bold; letter-spacing: .1em; color: #8b3a2a; margin-bottom: 4px; }
.callout-box.green    { border-left-color: #2a5a3a; background: rgba(42,90,58,.06); }
.callout-box.green p  { color: #1a3a28 !important; }
.callout-box.green .callout-label { color: #2a5a3a; }

.ornament-divider { text-align: center; color: var(--ink-faint); font-size: .8rem; margin: 10px 0; opacity: .55; }

.section-title {
  font-size: .9rem; font-weight: bold; color: var(--ink-dark);
  text-align: center; margin: 10px 0 6px; letter-spacing: .08em;
}

.page-footer {
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid rgba(139,100,40,.2);
  display: flex; align-items: center; justify-content: space-between;
  font-size: .65rem; color: var(--ink-faint); opacity: .7;
}
.page-number    { letter-spacing: .1em; }
.page-chapter-ref { font-style: italic; }
.cover-page .page-footer,
.back-cover .page-footer { display: none; }

/* 导航控件 */
#controls {
  position: relative; z-index: 10;
  display: flex; align-items: center; gap: 16px; margin-top: 20px;
}
.btn-nav {
  background: none; border: 1px solid var(--cover-gold);
  color: var(--cover-gold); padding: 7px 20px;
  font-size: .78rem; letter-spacing: .12em;
  cursor: pointer; transition: background .2s, color .2s; font-family: inherit;
}
.btn-nav:hover          { background: var(--cover-gold); color: var(--cover-brown); }
.btn-nav:disabled       { opacity: .3; cursor: default; }
.btn-nav:disabled:hover { background: none; color: var(--cover-gold); }

#page-info { color: var(--cover-gold); font-size: .78rem; letter-spacing: .1em; min-width: 90px; text-align: center; opacity: .8; }
#hint      { position: relative; z-index: 10; color: rgba(184,146,42,.35); font-size: .65rem; letter-spacing: .08em; text-align: center; margin-top: 10px; }

/* 桌面尺寸缩进（保持双页不溢出） */
@media (max-width: 900px) {
  :root { --page-w: 320px; --page-h: 460px; }
  .page-inner { padding: 24px 20px 32px; }
  .page-text p { font-size: .82rem; }
}
@media (max-width: 680px) {
  :root { --page-w: 290px; --page-h: 430px; }
  .page-inner { padding: 20px 14px 26px; }
  .page-text p { font-size: .80rem; }
}

/* 手机时隐藏桌面组件 */
@media (max-width: 620px) {
  body { justify-content: flex-start; padding: 16px 12px 48px; }
  #book-title-area h1     { font-size: 1.15rem; letter-spacing: .18em; }
  #book-title-area        { margin-bottom: 14px; }
  #book-container         { display: none !important; }
  #controls               { display: none !important; }
  #hint                   { display: none !important; }
}
/* 桌面时隐藏手机组件 */
@media (min-width: 621px) {
  #mobile-pages { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   ② 手机单页卡片（≤ 620px 可见）
══════════════════════════════════════════════════════════════ */

#mobile-pages {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 500px;
  position: relative;
  z-index: 5;
}

/* 单张卡片 */
.mobile-card {
  width: 100%;
  border-radius: 4px;
  background: var(--parchment-light);
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(210,180,120,.18) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(180,150,90,.12) 0%, transparent 55%);
  color: var(--ink-dark);
  box-shadow: 0 8px 24px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
  position: relative;
  overflow: hidden;
}

/* 封面 / 封底卡片 */
.mobile-card.is-cover,
.mobile-card.is-back-cover {
  background: var(--cover-brown);
  background-image: radial-gradient(ellipse at 50% 40%, #5a2e10 0%, #3d1f0a 50%, #2a1205 100%);
  min-height: 300px;
}

/* 卡片内的 .page-inner：脱离绝对定位，高度自适应 */
.mobile-card .page-inner {
  position: static !important;
  padding: 28px 22px 32px;
  display: flex;
  flex-direction: column;
}

/* 封面/封底居中 */
.mobile-card.is-cover .page-inner,
.mobile-card.is-back-cover .page-inner {
  align-items: center;
  justify-content: center;
  min-height: 300px;
  border: none !important;
  background: none !important;
}

/* 正文区撑开内容，不裁剪 */
.mobile-card .page-text {
  overflow: visible !important;
  flex: none !important;
}

/* 页脚 */
.mobile-card .page-footer {
  margin-top: 18px;
  display: flex !important;   /* 封面/封底也显示一下页码标签 */
}
.mobile-card.is-cover .page-footer,
.mobile-card.is-back-cover .page-footer {
  display: none !important;
}