/* ==========================================================================
   横滑分页引擎：CSS scroll-snap 原生惯性 + 全屏页 + 进度条
   ========================================================================== */

.deck-shell {
    position: fixed; inset: 0;
    /* 这里必须用 flex 居中：用 display:grid + place-items:center 时，隐式轨道按
       子元素 max-content 定尺，而子元素又是 width:100%，会形成循环尺寸——
       分页容器会被撑到几千像素宽，屏幕只看得见左边一小条，游戏场地也跟着错。 */
    display: flex; align-items: center; justify-content: center;
    /* 桌面端的"展台"底色：明亮浅蓝灰，衬托米白纸面手机框 */
    background:
        radial-gradient(120% 90% at 50% 0%, #eaf2f8 0%, #dfe8f1 55%, #d2dde8 100%);
    overflow: hidden;
}

.deck-frame-wrap {
    position: relative;
    flex: 0 0 auto;
    width: 100%; height: var(--deck-h);
    max-width: 100%;
}

.deck-frame {
    position: relative;
    width: 100%; height: 100%;
    overflow: hidden;
    background: var(--paper);
}

/* 桌面/平板：做成手机框，居中展示 */
@media (min-width: 860px) and (min-height: 620px) {
    .deck-frame-wrap {
        width: min(432px, 92vw);
        height: min(920px, 94dvh);
    }
    .deck-frame {
        border-radius: 30px;
        box-shadow: 0 40px 100px rgba(74, 92, 112, .34), 0 0 0 1px rgba(255, 255, 255, .7);
    }
    .deck-shell::after {
        content: "";
        position: absolute; inset: 0; pointer-events: none;
        background-image:
            radial-gradient(circle at 18% 22%, rgba(217, 58, 43, .09), transparent 42%),
            radial-gradient(circle at 82% 78%, rgba(111, 185, 227, .16), transparent 46%);
    }
}

/* --------------------------------------------------------------------------
   页面容器
   -------------------------------------------------------------------------- */
.deck {
    display: flex; flex-direction: row;
    width: 100%; height: 100%;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* 注意：这里千万不要设 scroll-behavior: smooth。
       JS 里用 scrollTo({behavior:'auto'}) 表示"立刻到位"，而 'auto' 的语义是
       "使用元素自身的 scroll-behavior"——一旦 CSS 设成 smooth，初始定位和重对齐
       都会变成缓慢动画，可能出现停在两页中间的中间态。平滑滚动一律由 JS 显式
       传 behavior:'smooth' 来控制。 */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.deck::-webkit-scrollbar { display: none; }

.slide {
    position: relative;
    flex: 0 0 100%; width: 100%; height: 100%;
    scroll-snap-align: start; scroll-snap-stop: always;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}
.slide::-webkit-scrollbar { width: 3px; }
.slide::-webkit-scrollbar-thumb { background: rgba(120, 129, 139, .35); }

.slide-inner {
    position: relative; z-index: 2;
    min-height: 100%;
    display: flex; flex-direction: column;
    /* 顶部要让开固定悬浮的进度条 + 章节标签（约 56px），否则页头会压在标签上 */
    padding: calc(68px + env(safe-area-inset-top)) 22px calc(96px + env(safe-area-inset-bottom));
}
.slide-inner.center { justify-content: center; }

/* 背景图层 */
/* 注意 z-index 必须是 -1：.slide-bg 是由各页 render() 输出、插在 .slide-inner 里面的，
   而 .slide-inner 是 position:relative 的定位祖先。若给它 z-index:0，按绘制顺序
   （定位元素 z-index:0 在静态流内容之上）它会盖住整页所有"静态"内容——页头、切换条
   这类没加动画的元素会整块消失，只有带 .rise 动画或自身 z-index 的元素能露出来。
   放到 -1 就落回背景层（仍在 .slide-inner 的层叠上下文内，不会跑到页面底色下面）。 */
.slide-bg {
    position: absolute; inset: 0; z-index: -1;
    background-size: cover; background-position: center;
    transform: scale(1.06);
    transition: transform 9s var(--ease);
    will-change: transform;
}
.slide.active .slide-bg { transform: scale(1); }
/* 背景图上的浅色薄纱：让前景文字在明亮插画上依然读得清，又不至于把画洗白。
   顶部 0~20% 是页头（标题 + 副标题）所在区域，所以这一段要压得更实——
   游戏页的背景是中调的蓝天，压不实的话浅灰副标题会糊在背景里。
   整站已统一为明亮主题，不再有 .slide.dark 分支。 */
.slide-bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(253, 248, 240, .9) 0%,
        rgba(253, 248, 240, .8) 20%,
        rgba(253, 248, 240, .3) 46%,
        rgba(253, 248, 240, .8) 100%);
}
.slide-bg.paperify::after {
    background: linear-gradient(180deg,
        rgba(253, 248, 240, .92) 0%,
        rgba(250, 245, 236, .86) 50%,
        rgba(245, 238, 225, .96) 100%);
}

/* 页面切换时内容依次浮起 */
.slide .rise { opacity: 0; }
.slide.active .rise { animation: fadeUp .62s var(--ease) both; }
.slide.active .rise:nth-child(1) { animation-delay: .06s }
.slide.active .rise:nth-child(2) { animation-delay: .13s }
.slide.active .rise:nth-child(3) { animation-delay: .2s }
.slide.active .rise:nth-child(4) { animation-delay: .27s }
.slide.active .rise:nth-child(5) { animation-delay: .34s }
.slide.active .rise:nth-child(6) { animation-delay: .41s }
.slide.active .rise:nth-child(7) { animation-delay: .48s }
.slide.active .rise:nth-child(8) { animation-delay: .55s }

/* --------------------------------------------------------------------------
   顶部进度条 + 章节标签
   -------------------------------------------------------------------------- */
.deck-progress {
    position: absolute; z-index: 40;
    top: calc(env(safe-area-inset-top) + 9px); left: 16px; right: 16px;
    display: flex; gap: 4px; align-items: center;
}
.pp-seg {
    flex: 1; height: 3px; border-radius: 2px;
    background: rgba(27, 32, 39, .16);
    overflow: hidden; transition: background .3s;
    cursor: pointer;
}
.pp-seg > i {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--red-2), var(--red));
    border-radius: 2px; transition: width .45s var(--ease);
}
.pp-seg.done > i { width: 100%; }
.pp-seg.cur > i { width: 100%; }
.pp-seg.dark-seg { background: rgba(255, 255, 255, .22); }

.deck-hud {
    position: absolute; z-index: 40;
    top: calc(env(safe-area-inset-top) + 22px); left: 16px; right: 16px;
    display: flex; align-items: center; justify-content: space-between;
    pointer-events: none;
}
.hud-chapter {
    font-family: var(--serif); font-size: 13px; letter-spacing: .14em;
    color: var(--ink-2); display: flex; align-items: baseline; gap: 7px;
    opacity: 0; transform: translateY(-6px); transition: opacity .4s, transform .4s;
}
.hud-chapter.show { opacity: .92; transform: none; }
.hud-chapter b { font-family: var(--num); font-size: 15px; color: var(--red); letter-spacing: 0; }
.slide.dark ~ .deck-hud .hud-chapter, .deck-hud.on-dark .hud-chapter { color: rgba(242, 237, 227, .8); }
.deck-hud.on-dark .hud-chapter b { color: var(--gold-2); }
.hud-right { display: flex; gap: 2px; pointer-events: auto; }
.hud-right .icon-btn { width: 34px; height: 34px; }
.deck-hud.on-dark .hud-right .icon-btn { color: rgba(242, 237, 227, .78); }
.deck-hud.on-dark .hud-right .icon-btn:hover { background: rgba(255, 255, 255, .12); }

/* --------------------------------------------------------------------------
   左右翻页按钮（桌面端）
   -------------------------------------------------------------------------- */
.deck-nav { position: absolute; z-index: 40; inset: 0; pointer-events: none; }
.deck-nav button {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 50%;
    display: none; place-items: center;
    background: rgba(255, 253, 248, .82); color: var(--ink-2);
    border: 1px solid var(--line); box-shadow: var(--shadow);
    pointer-events: auto; transition: transform .2s, background .2s, opacity .2s;
}
.deck-nav button:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.deck-nav button[disabled] { opacity: 0; pointer-events: none; }
.deck-nav .prev { left: 10px; }
.deck-nav .next { right: 10px; }
@media (hover: hover) and (min-width: 860px) {
    /* 按钮放在手机框外侧，避免压住页面内容与游戏区 */
    .deck-nav button { display: grid; }
    .deck-nav .prev { left: -60px; }
    .deck-nav .next { right: -60px; }
}

/* --------------------------------------------------------------------------
   底部滑动提示 / 下一页手势
   -------------------------------------------------------------------------- */
.deck-hint {
    position: absolute; z-index: 40; left: 0; right: 0;
    bottom: calc(18px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    pointer-events: none; color: var(--ink-3); font-size: 12px;
    transition: opacity .4s;
}
.deck-hint .chev { animation: floatY 1.8s ease-in-out infinite; opacity: .8; }
.deck-hint.hide-hint { opacity: 0; }
.slide.dark .deck-hint { color: rgba(242, 237, 227, .5); }

/* 页码数字水印 */
.slide-num {
    position: absolute; z-index: 1; right: 14px; bottom: 70px;
    font-family: var(--num); font-size: 84px; line-height: 1;
    color: rgba(27, 32, 39, .05); pointer-events: none; user-select: none;
}
.slide.dark .slide-num { color: rgba(255, 255, 255, .06); }