/* ============ 兴耀内刊 · 翻页阅读器 ============ */
:root{
  --ratio: 0.70708;
  --bg: #e9e6e0;
  --ink: #1c1b19;
  --muted: #8a857c;
  --hair: rgba(28,27,25,.12);
  --chrome: 136px;         /* 顶栏52 + 底栏56 + 上下留白28 */
}
*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font: 400 13px/1.5 -apple-system, "PingFang SC", "Noto Sans SC", "Helvetica Neue", sans-serif;
  display:flex; flex-direction:column; align-items:center;
  overflow:hidden; overscroll-behavior:none;
  opacity:0; transition:opacity .45s ease;
}
body.ready{ opacity:1; }

/* ---------- 顶栏 ---------- */
.bar{
  position:fixed; top:0; left:0; right:0; height:52px; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(14px,3vw,32px);
  pointer-events:none;
}
.bar-left{ display:flex; align-items:baseline; gap:8px; min-width:0; }
/* 刊名：顶栏的品牌位。窄屏会隐藏 .ttl，但刊名和期号必须留着 */
.mast{ font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--ink); white-space:nowrap; }
.dot{ font-size:11px; color:var(--muted); }
.issue{
  font-size:10px; letter-spacing:.14em; color:var(--muted);
  border:1px solid var(--hair); border-radius:2px; padding:2px 6px; white-space:nowrap;
}
.ttl{
  font-size:12px; letter-spacing:.04em; color:var(--ink); opacity:.62;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bar-right{ font-variant-numeric: tabular-nums; font-size:12px; color:var(--muted); letter-spacing:.06em; }
.line{
  position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--ink); opacity:.55;
  transition:width .45s cubic-bezier(.3,.9,.2,1);
}

/* ---------- 书 ----------
   尺寸由 app.js 的 layout() 直接写成内联 px：先定容器宽高，
   StPageFlip 再按「宽 < 2×minWidth 走单页」决定双页还是单页，
   两边不会各算各的。 */
.stage{ margin:auto; position:relative; background:#fff; }
/* 投影下在整本书上，而不是每一页上：两页各自带阴影时，中缝会叠出两道影，
   看起来像并排摆了两本册子，而不是一本摊开的书。 */
.stage{ box-shadow:0 16px 44px rgba(28,27,25,.17), 0 2px 8px rgba(28,27,25,.08); }
.book{ width:100%; height:100%; }
/* 引擎会给父容器写 inline min-width/min-height，压掉，避免手机上撑破版面 */
.book, .book.stf__parent{ min-width:0 !important; min-height:0 !important; }

/* 双页中缝：一道很淡的书脊暗影，让左右两页读起来是一张纸上摊开的。
   z-index 2 = 压住静态页（auto），低于引擎的翻动页（+5）与底页（+3），
   翻页时暗影会被翻起的那页自然遮住。 */
.stage.is-spread::after{
  content:'';
  position:absolute; top:0; bottom:0; left:50%;
  width:min(72px, 9%);
  transform:translateX(-50%);
  pointer-events:none; z-index:2;
  background:linear-gradient(to right,
    rgba(20,18,16,0) 0%,
    rgba(20,18,16,.030) 30%,
    rgba(20,18,16,.070) 50%,
    rgba(20,18,16,.030) 70%,
    rgba(20,18,16,0) 100%);
}

/* ---------- 页面 ---------- */
.page{ background:#fff; }
/* 封面左侧补的空白页：就是一张纸，没有任何内容 */
.page-blank{ background:#fff; }
.page-inner{ position:absolute; inset:0; overflow:hidden; }
/* 翻动时书的背面不要露出镜像的正面文字：让背面不可见，看起来像纸背空白 */
.page-inner{ -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.page-inner img{
  display:block; width:100%; height:100%; object-fit:cover;
  -webkit-user-select:none; user-select:none; -webkit-user-drag:none;
}
.stf__item{ background:#fff; }

/* ---------- 热点 / 播放按钮 ---------- */
.hot{
  position:absolute; border:0; padding:0; margin:0; cursor:pointer;
  background:transparent; display:grid; place-items:center;
  z-index:5;
}
.hot-play{
  width:clamp(40px,7vw,60px); aspect-ratio:1; border-radius:50%;
  background:rgba(255,255,255,.82); backdrop-filter:blur(6px);
  box-shadow:0 6px 22px rgba(0,0,0,.22);
  display:grid; place-items:center;
  transition:transform .22s ease, background .22s ease;
}
.hot:hover .hot-play{ transform:scale(1.07); background:#fff; }
/* 播放按钮钉在人物身上（热点矩形可以比按钮大很多） */
.hot.has-anchor{ display:block; }
.hot.has-anchor .hot-play{
  position:absolute; left:var(--bx); top:var(--by);
  transform:translate(-50%,-50%);
}
.hot.has-anchor:hover .hot-play{ transform:translate(-50%,-50%) scale(1.07); }
.hot-play svg{ width:38%; margin-left:6%; fill:var(--ink); }

/* ---------- 翻页按钮 ---------- */
.nav{
  position:fixed; bottom:0; left:0; right:0; height:56px; z-index:30;
  display:flex; align-items:center; justify-content:center; gap:18px;
}
.nb{
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  border:1px solid var(--hair); background:rgba(255,255,255,.5);
  color:var(--ink); display:grid; place-items:center;
  transition:background .2s, opacity .2s, transform .2s;
}
.nb:hover:not(:disabled){ background:#fff; transform:translateY(-1px); }
.nb:disabled{ opacity:.25; cursor:default; }
.nb svg{ width:18px; height:18px; }

/* ---------- 视频弹层（全站唯一实例，不随翻页克隆） ---------- */
.modal{
  position:fixed; inset:0; z-index:60; display:none;
  background:rgba(12,12,12,.9); backdrop-filter:blur(4px);
  padding: max(18px, env(safe-area-inset-top)) 18px;
}
.modal.on{ display:grid; place-items:center; }
.modal-box{ width:min(100%, 980px); display:grid; place-items:center; }
.modal video{
  /* 不要写死 width:100%：竖屏片源会被塞进宽框里再上下左右补黑边。
     width:auto + 双 max 让它按片源比例缩到可视区以内。 */
  display:block; width:auto; height:auto; max-width:100%; max-height:78dvh;
  background:#000; border-radius:6px; box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.modal-close{
  position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%;
  border:0; cursor:pointer; background:rgba(255,255,255,.14); color:#fff;
  font-size:20px; line-height:1; display:grid; place-items:center;
}
.modal-close:hover{ background:rgba(255,255,255,.26); }

@media (max-width:560px){
  :root{ --chrome: 118px; }
  .ttl{ display:none; }
}
/* 横屏手机这类极矮视口：收掉顶栏，把高度让给版面 */
@media (max-height:560px){
  :root{ --chrome: 44px; }
  .bar{ display:none; }
  .nav{ height:44px; }
  .nb{ width:34px; height:34px; background:rgba(255,255,255,.85); }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}