/* ==========================================================================
   BLOCKTOON 阅读器 —— 沉浸式深色影院
   ========================================================================== */

:root {
  --r-bg: #12160F;
  --r-bg-soft: #1B2216;
  --r-ink: #F4EDDA;
  --r-ink-dim: #9BA88E;
  --r-line: rgba(244, 237, 218, .16);
  --grass: #56B93C;
  --leaf: #8CD96A;
  --gold: #FFC531;
  --tnt: #E8502B;
  --ink: #22301B;

  --font-display: 'ZCOOL QingKe HuangYou', 'Noto Sans SC', sans-serif;
  --font-body: 'Noto Sans SC', -apple-system, sans-serif;
  --font-pixel: 'Press Start 2P', monospace;

  --page-w: 46rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--r-bg);
  color: var(--r-ink);
  transition: background .35s ease;
}
body.is-lamp { --r-bg: #F4EACF; --r-bg-soft: #FFFDF6; --r-ink: #22301B; --r-ink-dim: #6B7A5E; --r-line: rgba(34,48,27,.18); }

::selection { background: var(--gold); color: var(--ink); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--r-bg); }
::-webkit-scrollbar-thumb { background: var(--grass); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 3px dashed var(--gold); outline-offset: 3px; }

/* ---------- 顶栏 ---------- */
.rtop {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: 1.2rem;
  padding: .8rem 1.4rem;
  background: color-mix(in srgb, var(--r-bg) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--r-line);
  transition: transform .28s ease;
}
.rtop.is-hidden { transform: translateY(-110%); }

.rtop__back {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 700; font-size: .88rem;
  color: var(--r-ink);
  padding: .45em .9em;
  border: 2px solid var(--r-line);
  transition: border-color .15s, color .15s;
  white-space: nowrap;
}
.rtop__back:hover { border-color: var(--leaf); color: var(--leaf); }

.rtop__title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.rtop__title b { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rtop__title span { font-size: .72rem; color: var(--r-ink-dim); }

.rtop__pct { font-family: var(--font-pixel); font-size: .58rem; color: var(--gold); white-space: nowrap; }

.rprogress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 41; background: transparent; pointer-events: none; }
.rprogress__bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--grass), var(--gold)); transition: width .1s linear; }

/* ---------- 画布 ---------- */
.rstage { padding: 6.2rem 0 9rem; }
.rpages { max-width: var(--page-w); margin: 0 auto; padding: 0 1rem; display: flex; flex-direction: column; gap: .9rem; transition: max-width .3s ease; }

.rpage { position: relative; border: 3px solid rgba(244,237,218,.1); background: var(--r-bg-soft); box-shadow: 0 18px 50px rgba(0,0,0,.4); container-type: inline-size; }
body.is-lamp .rpage { border-color: rgba(34,48,27,.75); box-shadow: .45rem .45rem 0 rgba(34,48,27,.85); }
.rpage img { width: 100%; }

/* 英文对白气泡（点按显示中文） */
.sp-bubble {
  position: absolute; z-index: 3; max-width: 44%;
  background: #fff; color: #22301B;
  border: 2.5px solid #22301B; border-radius: 1.1em;
  padding: .5em .85em .45em;
  font-family: 'Patrick Hand', 'Comic Sans MS', cursive;
  font-size: clamp(.72rem, 3.1cqw, 1.3rem); line-height: 1.3;
  box-shadow: .22rem .22rem 0 rgba(0,0,0,.45);
  cursor: pointer; user-select: none;
  transition: transform .12s ease;
}
.sp-bubble:hover { transform: scale(1.03); }
.sp-bubble::after {
  content: ''; position: absolute; bottom: -0.44em; left: 1.4em;
  width: .75em; height: .75em; background: #fff;
  border-right: 2.5px solid #22301B; border-bottom: 2.5px solid #22301B;
  transform: rotate(45deg);
}
.sp-bubble--flip::after { left: auto; right: 1.4em; }
.sp-bubble .zh {
  display: none;
  font-family: var(--font-body); font-weight: 500;
  font-size: .66em; color: #5C6B50; margin-top: .25em;
}
.sp-bubble.show-zh .zh { display: block; }
.sp-bubble .hintdot {
  position: absolute; top: -.45em; right: -.45em;
  width: .95em; height: .95em; border-radius: 50%;
  background: var(--gold); border: 2px solid #22301B;
  font-size: .55em; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 900; color: #22301B;
}

/* 章末生词卡 */
.rwords {
  margin: 2.6rem auto 0; max-width: 30rem;
  border: 2px solid var(--r-line); background: var(--r-bg-soft);
  padding: 1.3rem 1.5rem 1.4rem; text-align: left;
}
.rwords__title { font-family: var(--font-pixel); font-size: .5rem; letter-spacing: .2em; color: var(--gold); display: block; margin-bottom: .95rem; }
.rwords__list { display: flex; flex-wrap: wrap; gap: .6rem; }
.rword {
  display: inline-flex; align-items: baseline; gap: .5em;
  border: 2px solid var(--r-line); padding: .4em .8em;
  font-family: 'Patrick Hand', cursive; font-size: 1.05rem;
  transition: border-color .15s;
}
.rword:hover { border-color: var(--leaf); }
.rword small { font-family: var(--font-body); font-size: .68rem; color: var(--r-ink-dim); }
.rwords__tip { font-size: .72rem; color: var(--r-ink-dim); margin-top: 1rem; border-top: 2px dashed var(--r-line); padding-top: .8rem; }
.rpage__no {
  position: absolute; bottom: .8rem; right: .9rem;
  font-family: var(--font-pixel); font-size: .5rem;
  color: #fff; background: rgba(20,24,15,.68);
  padding: .5em .7em; letter-spacing: .1em;
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(4px);
}

/* 章节标题卡 */
.rtitlecard {
  position: relative; overflow: hidden;
  border: 3px solid rgba(244,237,218,.1);
  aspect-ratio: 16 / 8.4;
  display: flex; align-items: flex-end;
  box-shadow: 0 18px 50px rgba(0,0,0,.4);
}
body.is-lamp .rtitlecard { border-color: rgba(34,48,27,.75); box-shadow: .45rem .45rem 0 rgba(34,48,27,.85); }
.rtitlecard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
.rtitlecard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(185deg, transparent 30%, rgba(10,13,8,.88) 82%); }
.rtitlecard__txt { position: relative; z-index: 2; padding: 1.6rem 1.8rem; color: #F4EDDA; }
.rtitlecard__txt .px { font-family: var(--font-pixel); font-size: .52rem; letter-spacing: .22em; color: var(--gold); display: block; margin-bottom: .7rem; }
.rtitlecard__txt h1 { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.5rem); letter-spacing: .03em; line-height: 1.2; text-shadow: 2px 3px 0 rgba(0,0,0,.5); }
.rtitlecard__txt p { font-size: .82rem; color: rgba(244,237,218,.75); margin-top: .35rem; }

/* ---------- 章末卡 ---------- */
.rend { text-align: center; padding: 3.4rem 1rem 1rem; }
.rend__fin { font-family: var(--font-pixel); font-size: .6rem; letter-spacing: .3em; color: var(--r-ink-dim); }
.rend__title { font-family: var(--font-display); font-size: 1.9rem; margin: .8rem 0 1.6rem; }
.rend__like {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-display); font-size: 1.15rem;
  background: var(--tnt); color: #fff;
  border: 3px solid rgba(0,0,0,.55);
  box-shadow: .35rem .35rem 0 rgba(0,0,0,.45);
  padding: .7em 1.5em;
  transition: transform .12s, box-shadow .12s, background .12s;
}
body.is-lamp .rend__like { border-color: var(--ink); box-shadow: .35rem .35rem 0 var(--ink); }
.rend__like:hover { transform: translate(-2px,-2px); box-shadow: .5rem .5rem 0 rgba(0,0,0,.45); }
.rend__like:active { transform: translate(2px,2px); box-shadow: .1rem .1rem 0 rgba(0,0,0,.45); }
.rend__like.is-liked { background: var(--grass); }
.rend__like .heart { font-size: 1.1em; line-height: 1; }

.rnext {
  margin: 2.6rem auto 0; max-width: 30rem;
  border: 2px solid var(--r-line); background: var(--r-bg-soft);
  padding: 1.4rem 1.6rem; text-align: left;
  display: flex; align-items: center; gap: 1.1rem;
}
.rnext img { width: 3.6rem; height: 4.8rem; object-fit: cover; border: 2px solid var(--r-line); }
.rnext__meta { flex: 1; }
.rnext__meta .k { font-family: var(--font-pixel); font-size: .46rem; letter-spacing: .2em; color: var(--gold); }
.rnext__meta h3 { font-family: var(--font-display); font-size: 1.15rem; margin-top: .35rem; }
.rnext__meta p { font-size: .76rem; color: var(--r-ink-dim); margin-top: .2rem; }
.rnext .lock { font-size: .72rem; color: var(--r-ink-dim); border: 1.5px solid var(--r-line); padding: .4em .8em; white-space: nowrap; }

/* ---------- 底部工具栏 ---------- */
.rbar {
  position: fixed; left: 50%; bottom: 1.4rem; z-index: 40;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .7rem;
  background: color-mix(in srgb, var(--r-bg) 78%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid var(--r-line);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  transition: transform .28s ease, opacity .28s ease;
}
.rbar.is-hidden { transform: translate(-50%, 160%); opacity: 0; }

.rbar__btn {
  display: inline-flex; flex-direction: column; align-items: center; gap: .3rem;
  min-width: 3.6rem;
  padding: .5rem .6rem;
  background: transparent; border: 2px solid transparent;
  color: var(--r-ink);
  font-size: .68rem; font-weight: 700; letter-spacing: .05em;
  transition: border-color .15s, color .15s, background .15s;
}
.rbar__btn svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.rbar__btn:hover { border-color: var(--leaf); color: var(--leaf); }
.rbar__btn.is-on { color: var(--gold); border-color: var(--gold); }
.rbar__sep { width: 2px; height: 2.2rem; background: var(--r-line); }

/* 回到顶部 */
.rtotop {
  position: fixed; right: 1.4rem; bottom: 6.6rem; z-index: 39;
  width: 3rem; height: 3rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--grass); color: #fff;
  border: 2.5px solid rgba(0,0,0,.5);
  box-shadow: .28rem .28rem 0 rgba(0,0,0,.45);
  font-size: 1.1rem;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .2s, transform .2s;
}
.rtotop.is-show { opacity: 1; pointer-events: auto; transform: none; }
body.is-lamp .rtotop { border-color: var(--ink); box-shadow: .28rem .28rem 0 var(--ink); }

/* 阅读提示 */
.rhint {
  position: fixed; left: 50%; top: 5.4rem; z-index: 38;
  transform: translateX(-50%);
  font-size: .74rem; color: var(--r-ink-dim);
  background: var(--r-bg-soft); border: 1.5px solid var(--r-line);
  padding: .5em 1.1em;
  animation: hintfade 5s ease forwards;
  pointer-events: none; white-space: nowrap;
}
@keyframes hintfade { 0%,70% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

@media (max-width: 40rem) {
  .rtop { gap: .7rem; padding: .7rem .9rem; }
  .rtop__pct { display: none; }
  .rpages { padding: 0 .4rem; gap: .5rem; }
  .rstage { padding-top: 5rem; }
  .rbar { width: calc(100% - 1.6rem); justify-content: space-between; gap: .1rem; bottom: .8rem; }
  .rbar__btn { min-width: 2.9rem; font-size: .62rem; }
  .rtotop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; transition-duration: .01s !important; }
}