/* ===========================================================
   江湖旧卷 · 样式
   字：题名用毛笔楷（马善政），正文用霞鹜文楷；色：宣纸、焦墨、朱砂、赭石
   =========================================================== */

:root {
    --paper: #f0e8d8;
    --paper-lit: #f8f2e6;
    --paper-deep: #e3d8c1;

    --ink: #221f1a;
    --ink-soft: #453f36;
    --ink-mid: #6b6355;
    --ink-faint: #93897a;

    --cinnabar: #a3322a;
    --cinnabar-soft: rgba(163, 50, 42, 0.5);
    --bronze: #9c7c45;

    --line: rgba(60, 52, 40, 0.22);
    --line-soft: rgba(60, 52, 40, 0.12);

    /* 字体一律随站下发（见 fonts.css），系统字体只作兜底 */
    --brush: "Ma Shan Zheng", "Baoli SC", "STLiti", "LiSu", "隶书", "Kaiti SC", "STKaiti", KaiTi, "楷体", serif;
    --kai: "LXGW WenKai", "Kaiti SC", "STKaiti", KaiTi, "楷体", "TW-Kai", "Noto Serif CJK SC", serif;
    --song: "LXGW WenKai", "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", "宋体", serif;
    --li: "LXGW WenKai", "Baoli SC", "STLiti", "LiSu", "隶书", "STFangsong", "FangSong", "仿宋", "Kaiti SC", KaiTi, serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html, body { margin: 0; padding: 0; min-height: 100%; }

/* iPhone：防止立轴横杆探出造成横向滚动 */
body { overflow-x: hidden; }

body {
    position: relative;
    min-height: 100vh;
    background-color: var(--paper);
    background-image:
        radial-gradient(130% 80% at 50% -10%, rgba(255, 252, 244, 0.95) 0%, rgba(243, 236, 222, 0) 60%),
        radial-gradient(90% 60% at 100% 100%, rgba(156, 124, 69, 0.10) 0%, rgba(156, 124, 69, 0) 70%),
        linear-gradient(180deg, var(--paper-lit) 0%, var(--paper) 42%, var(--paper-deep) 100%);
    color: var(--ink);
    font-family: var(--song);
    font-size: 17px;
    line-height: 2.05;
    letter-spacing: 0.07em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: rgba(163, 50, 42, 0.08);
}

/* 四周淡淡的旧痕 */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    box-shadow: inset 0 0 160px rgba(96, 78, 50, 0.16), inset 0 0 40px rgba(96, 78, 50, 0.07);
}

.paper-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
    mix-blend-mode: multiply;
    background-image:
        radial-gradient(circle at 18% 28%, rgba(120, 104, 78, 0.10) 0 1px, transparent 1px),
        radial-gradient(circle at 68% 58%, rgba(120, 104, 78, 0.09) 0 1px, transparent 1px),
        radial-gradient(circle at 42% 86%, rgba(120, 104, 78, 0.07) 0 1px, transparent 1px),
        radial-gradient(circle at 88% 16%, rgba(120, 104, 78, 0.06) 0 1px, transparent 1px);
    background-size: 7px 7px, 11px 11px, 13px 13px, 17px 17px;
}

.far-mountains {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: min(38vh, 300px);
    height: min(38dvh, 300px);
    z-index: 0;
    pointer-events: none;
}

.far-mountains .range { fill: rgba(64, 72, 70, 0.10); }
.far-mountains .range-2 { fill: rgba(58, 64, 62, 0.13); }
.far-mountains .range-1 { fill: rgba(48, 52, 50, 0.16); }

.stage {
    position: relative;
    z-index: 1;
    max-width: 1120px;
    margin: 0 auto;
    padding: 7vh 5vw 12vh;
    padding-left: max(5vw, env(safe-area-inset-left));
    padding-right: max(5vw, env(safe-area-inset-right));
    padding-bottom: calc(12vh + env(safe-area-inset-bottom));
}

/* ---------------- 通用零件 ---------------- */

/* iOS Safari 会给输入与按钮套上自己的圆角与阴影，先抹平 */
input:not([type=file]), textarea, select, button {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    -webkit-border-radius: 0;
}

.field select {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ink-mid) 50%),
        linear-gradient(135deg, var(--ink-mid) 50%, transparent 50%);
    background-position: right 1.05rem center, right 0.75rem center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2.2rem;
}

.field input[type=file] { padding: 0.5rem 0.5rem; font-size: 0.92rem; }

.head-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    margin: 1.2rem auto;
    max-width: 320px;
    color: var(--cinnabar-soft);
}

.head-rule span {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.head-rule i { font-style: normal; font-size: 0.7rem; opacity: 0.75; }

/* ---------------- 山门 ---------------- */

.gate-page .stage {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: max(4vh, env(safe-area-inset-top));
    padding-bottom: calc(6vh + env(safe-area-inset-bottom));
}

.gate { width: min(90vw, 440px); animation: rise 1.5s ease-out both; }

.hanging-scroll { position: relative; }

.rod {
    height: 13px;
    border-radius: 7px;
    background: linear-gradient(180deg, #6f5b3e, #4a3c28 55%, #2f2619);
    box-shadow: 0 2px 8px -3px rgba(40, 30, 16, 0.85);
    position: relative;
}

.rod::before, .rod::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9px;
    height: 21px;
    border-radius: 3px;
    transform: translateY(-50%);
    background: linear-gradient(180deg, #8a7148, #5a4830);
}

.rod::before { left: -12px; }
.rod::after { right: -12px; }

.rod-top { margin-bottom: 0; }
.rod-bottom { margin-top: 0; }

.silk {
    position: relative;
    overflow: hidden;
    padding: 3.2rem 2rem 3rem;
    background:
        linear-gradient(180deg, rgba(255, 253, 246, 0.86), rgba(238, 229, 210, 0.9)),
        repeating-linear-gradient(90deg, rgba(150, 130, 96, 0.05) 0 2px, transparent 2px 5px);
    border-left: 1px solid var(--line-soft);
    border-right: 1px solid var(--line-soft);
    box-shadow: 0 24px 60px -40px rgba(40, 32, 18, 0.9), inset 0 0 60px rgba(180, 158, 116, 0.18);
}

.silk::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(156, 124, 69, 0.28);
    pointer-events: none;
}

.vertical-title {
    position: absolute;
    top: 2.2rem;
    left: 1.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    font-family: var(--brush);
    font-size: 1.42rem;
    color: rgba(53, 47, 38, 0.62);
    letter-spacing: 0;
    line-height: 1.3;
    writing-mode: vertical-rl;
}

.vertical-title span { display: block; }

.seal-chop {
    position: absolute;
    top: 2.2rem;
    right: 1.9rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 3px;
    border: 2px solid var(--cinnabar);
    border-radius: 3px;
    color: var(--cinnabar);
    font-family: var(--brush);
    font-size: 0.8rem;
    line-height: 1;
    letter-spacing: 0;
    opacity: 0.72;
    transform: rotate(-3deg);
}

.gate-inner { text-align: center; padding-top: 2.6rem; }

.gate-sub {
    font-family: var(--li);
    font-size: 1.06rem;
    color: var(--ink-mid);
    letter-spacing: 0.4em;
    text-indent: 0.4em;
    margin: 0 0 2rem;
}

.stage-marks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin-bottom: 2.1rem;
    font-family: var(--li);
    font-size: 0.86rem;
    color: rgba(107, 99, 85, 0.5);
    letter-spacing: 0.2em;
}

.stage-marks .mark { transition: color 0.6s ease; }
.stage-marks .mark.is-on { color: var(--cinnabar); }
.stage-marks .mark-line { width: 44px; height: 1px; background: var(--line); }

.gate-form { display: flex; flex-direction: column; align-items: center; gap: 1.15rem; }

.gate-question {
    font-family: var(--li);
    font-size: 1.2rem;
    line-height: 2.05;
    color: var(--ink-soft);
    letter-spacing: 0.16em;
    max-width: 20em;
}

.gate-input {
    width: min(76vw, 300px);
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(60, 52, 40, 0.38);
    padding: 0.55rem 0.4rem;
    font-family: var(--kai);
    font-size: 1.3rem;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    text-align: center;
    color: var(--ink);
    outline: none;
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.gate-input:focus {
    border-bottom-color: var(--cinnabar);
    box-shadow: 0 8px 14px -14px var(--cinnabar);
}

.gate-submit {
    margin-top: 0.5rem;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--ink-soft);
    font-family: var(--li);
    font-size: 1.04rem;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    padding: 0.5rem 1.7rem;
    cursor: pointer;
    transition: color 0.45s ease, border-color 0.45s ease, background 0.45s ease;
}

.gate-submit:hover {
    color: var(--cinnabar);
    border-color: var(--cinnabar-soft);
    background: rgba(163, 50, 42, 0.05);
}

.gate-hint { font-family: var(--li); color: var(--ink-faint); font-size: 0.85rem; margin: 0.3rem 0 0; letter-spacing: 0.08em; }
.gate-error { color: var(--cinnabar); font-family: var(--li); font-size: 0.98rem; margin: 0.2rem 0 0; letter-spacing: 0.08em; animation: rise 0.7s ease both; }
.gate-ok { color: var(--bronze); font-family: var(--li); font-size: 0.98rem; margin: 0.2rem 0 0; letter-spacing: 0.08em; }

/* ---------------- 目录 ---------------- */

.library-head { text-align: center; margin-bottom: 3.6rem; animation: rise 1.4s ease-out both; }

.library-title {
    font-family: var(--brush);
    font-size: clamp(2.1rem, 5.6vw, 3.1rem);
    font-weight: 400;
    color: var(--ink);
    letter-spacing: 0.42em;
    text-indent: 0.42em;
    margin: 0 0 0.6rem;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.library-sub {
    font-family: var(--kai);
    color: var(--ink-mid);
    font-size: 1rem;
    letter-spacing: 0.34em;
    text-indent: 0.34em;
    margin: 0;
}

.library-clock {
    color: var(--ink-faint);
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    margin: 0.5rem 0 0;
}

.shelf {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(264px, 1fr));
    gap: 2.4rem 2rem;
}

.scroll-card { animation: rise 1.5s ease-out both; }
.scroll-card:nth-child(2) { animation-delay: 0.1s; }
.scroll-card:nth-child(3) { animation-delay: 0.2s; }
.scroll-card:nth-child(4) { animation-delay: 0.3s; }
.scroll-card:nth-child(5) { animation-delay: 0.4s; }

.card-frame {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0.85rem 0.85rem 1.7rem;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 2px;
    background:
        linear-gradient(180deg, rgba(255, 253, 247, 0.72), rgba(235, 226, 207, 0.55));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.65) inset,
        0 16px 34px -30px rgba(40, 32, 18, 0.95);
    transition: transform 0.65s ease, box-shadow 0.65s ease, border-color 0.65s ease;
}

.card-frame::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(156, 124, 69, 0.22);
    pointer-events: none;
}

.is-open .card-frame:hover {
    transform: translateY(-6px);
    border-color: rgba(163, 50, 42, 0.32);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 26px 44px -30px rgba(40, 32, 18, 0.95);
}

.scroll-art {
    position: relative;
    overflow: hidden;
    border-radius: 1px;
    background: linear-gradient(180deg, rgba(255, 254, 250, 0.6), rgba(244, 238, 226, 0.35));
}

.scene {
    display: block;
    width: 100%;
    height: 186px;
    fill: none;
    stroke: #4b463c;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.88;
}

.scene .far { opacity: 0.4; stroke-width: 1.15; }
.scene .near { opacity: 0.72; }
.scene .water { opacity: 0.38; stroke-width: 1.05; }
.scene .bird { opacity: 0.62; stroke-width: 1.25; }
.scene .figure { opacity: 0.92; stroke-width: 1.5; }
.scene .moon { opacity: 0.32; stroke-width: 1.25; }
.scene .petal { fill: rgba(163, 50, 42, 0.32); stroke: none; }
.scene .leaf { opacity: 0.5; }
.scene .qin { opacity: 0.82; }
.scene .broken { stroke-dasharray: 5 7; opacity: 0.55; }
.scene .sword { stroke-width: 1.15; opacity: 0.82; }
.scene .bridge { opacity: 0.6; }
.scene rect { stroke: none; }

.is-sealed .scene {
    filter: blur(3.6px) grayscale(0.25);
    opacity: 0.38;
    transition: filter 1.4s ease, opacity 1.4s ease;
}

.is-sealed .card-frame:hover .scene { filter: blur(2.6px) grayscale(0.1); opacity: 0.46; }

.seal-veil {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(62% 62% at 50% 50%, rgba(240, 232, 216, 0.18), rgba(227, 216, 193, 0.78));
}

.seal-mark {
    width: 50px;
    height: 50px;
    line-height: 47px;
    border: 2px solid rgba(163, 50, 42, 0.62);
    border-radius: 3px;
    color: rgba(163, 50, 42, 0.8);
    font-family: var(--brush);
    font-size: 1.45rem;
    letter-spacing: 0;
    text-indent: 0;
    transform: rotate(-5deg);
    background: rgba(255, 250, 240, 0.2);
}

.scroll-meta {
    padding-top: 1.15rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.scroll-meta > :last-child { margin-top: auto; }

.scroll-ordinal {
    display: block;
    font-family: var(--kai);
    color: var(--bronze);
    font-size: 0.86rem;
    letter-spacing: 0.4em;
    text-indent: 0.4em;
}

.scroll-name {
    font-family: var(--brush);
    font-size: 1.42rem;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    margin: 0.55rem 0 0.4rem;
    min-height: 1.8em;
}

.scroll-name--hidden {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    text-indent: 0;
}

.scroll-name--hidden .title-glyph {
    color: var(--ink);
    line-height: 1.4;
}

.scroll-name--hidden .title-veil {
    width: 0.82em;
    height: 0.82em;
    border-radius: 1px;
    background:
        radial-gradient(ellipse at 38% 32%, rgba(74, 66, 54, 0.22) 0%, transparent 62%),
        linear-gradient(145deg, rgba(120, 110, 94, 0.2) 0%, rgba(96, 88, 74, 0.13) 100%);
    box-shadow: inset 0 0 0 1px rgba(107, 99, 85, 0.22);
    flex: none;
}

.scroll-line {
    color: var(--ink-mid);
    font-size: 0.92rem;
    letter-spacing: 0.12em;
    margin: 0 0 0.5rem;
    min-height: 1.5em;
}

.scroll-wait { font-family: var(--li); color: var(--cinnabar); letter-spacing: 0.1em; }
.scroll-wait--mute { color: var(--ink-faint); opacity: 0.72; }

.scroll-drafted {
    color: var(--ink-faint);
    font-size: 0.79rem;
    letter-spacing: 0.1em;
    margin: 0 0 1.15rem;
}

.scroll-open {
    display: inline-block;
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 0.38rem 1.35rem;
    font-family: var(--kai);
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.6;
    letter-spacing: 0.26em;
    text-indent: 0.26em;
    text-decoration: none;
    transition: color 0.45s ease, border-color 0.45s ease, background 0.45s ease;
}

.scroll-open:hover {
    color: var(--cinnabar);
    border-color: var(--cinnabar-soft);
    background: rgba(163, 50, 42, 0.05);
}

.scroll-open.is-disabled {
    color: rgba(107, 99, 85, 0.45);
    border-color: var(--line-soft);
    border-style: dashed;
    cursor: default;
}

.library-foot { margin-top: 4.5rem; text-align: center; }
.leave-form { margin: 0; }

.leave-link {
    background: none;
    border: none;
    font-family: var(--kai);
    color: rgba(107, 99, 85, 0.52);
    font-size: 0.88rem;
    letter-spacing: 0.3em;
    cursor: pointer;
    transition: color 0.4s ease;
}

.leave-link:hover { color: var(--cinnabar); }

/* ---------------- 正文 ---------------- */

/* 正文幅面随窗口伸缩：窄屏满幅，宽屏至多 66rem，不再死钉 720px */
.scroll-page .stage { max-width: clamp(44rem, 78vw, 66rem); }

.scroll-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2.4rem;
}

.back-link {
    font-family: var(--kai);
    color: rgba(107, 99, 85, 0.6);
    text-decoration: none;
    font-size: 0.95rem;
    letter-spacing: 0.18em;
    transition: color 0.4s ease;
}

.back-link:hover { color: var(--cinnabar); }

.preview-badge {
    font-size: 0.76rem;
    color: var(--cinnabar);
    border: 1px dashed var(--cinnabar-soft);
    border-radius: 2px;
    padding: 0.12rem 0.6rem;
    letter-spacing: 0.1em;
}

.scroll-body {
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.6), rgba(243, 236, 222, 0.3));
    border: 1px solid var(--line-soft);
    border-radius: 2px;
    padding: clamp(1.8rem, 5vw, 3.6rem) clamp(1.4rem, 5vw, 3.4rem) 3rem;
    box-shadow: 0 20px 50px -44px rgba(40, 32, 18, 0.9);
}

.scroll-header { text-align: center; margin-bottom: 2.6rem; animation: rise 1.3s ease-out both; }

.scroll-header-art { max-width: 400px; margin: 0 auto 1.2rem; opacity: 0.72; }
.scroll-header-art .scene { height: 150px; }

.scroll-title {
    font-family: var(--brush);
    font-size: clamp(1.85rem, 4.8vw, 2.5rem);
    font-weight: 400;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    margin: 0.5rem 0 0.5rem;
    color: var(--ink);
}

.prose {
    font-family: var(--li);
    font-size: clamp(1rem, 0.94rem + 0.22vw, 1.14rem);
    line-height: 2.05;
    color: #463726;
    letter-spacing: 0.12em;
    animation: rise 1.7s ease-out both;
}

.prose p { margin: 0 0 1.15rem; text-indent: 2em; }

.prose p:first-of-type::first-letter {
    font-size: 1.05em;
    color: #3a2c1d;
}

.scroll-end {
    margin-top: 3.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.end-mark {
    font-family: var(--kai);
    color: var(--ink-faint);
    font-size: 0.92rem;
    letter-spacing: 0.4em;
    text-indent: 0.4em;
}

.end-drafted { color: var(--ink-faint); font-size: 0.8rem; letter-spacing: 0.1em; }

/* ---------------- 琴案（播放器） ---------------- */

/* 琴案：文章顶端，一开卷便见 */
.scroll-photo {
    margin: 0.4rem 0 1.4rem;
    padding: 0.65rem 0.65rem 0.55rem;
    background: linear-gradient(180deg, rgba(250, 245, 234, 0.96) 0%, rgba(240, 232, 216, 0.9) 100%);
    border: 1px solid var(--line);
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(255, 253, 247, 0.6), 0 14px 26px -24px rgba(40, 32, 18, 0.9);
    animation: rise 1.2s ease-out both;
    text-align: center;
}

.scroll-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
    filter: sepia(0.16) contrast(0.96);
}

.scroll-photo figcaption {
    margin-top: 0.6rem;
    font-family: var(--li);
    font-size: 0.86rem;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
    color: var(--ink-faint);
}

.qin-desk {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin: 0.4rem 0 2.2rem;
    padding: 0.7rem 1.1rem 0.7rem 0.9rem;
    background: linear-gradient(180deg, rgba(250, 245, 234, 0.96) 0%, rgba(240, 232, 216, 0.9) 100%);
    border: 1px solid var(--line);
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(255, 253, 247, 0.6), 0 14px 26px -24px rgba(40, 32, 18, 0.9);
    animation: rise 1.2s ease-out both;
}

.qin-desk::before {
    content: "";
    width: 3px;
    align-self: stretch;
    background: linear-gradient(180deg, rgba(163, 50, 42, 0) 0%, rgba(163, 50, 42, 0.5) 50%, rgba(163, 50, 42, 0) 100%);
    border-radius: 2px;
}

.qin-point {
    display: none;
    flex: none;
    margin-right: -0.35rem;
    font-family: "Segoe UI Symbol", "Apple Color Emoji", "Noto Sans Symbols 2", sans-serif;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--cinnabar);
    opacity: 0.85;
    user-select: none;
}

.qin-desk.is-calling .qin-point {
    display: inline-block;
    animation: nudge 1.5s ease-in-out infinite;
}

@keyframes nudge {
    0%, 100% { transform: translateX(0); opacity: 0.4; }
    50% { transform: translateX(0.4rem); opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
    .qin-desk.is-calling .qin-point { animation: none; opacity: 0.85; }
}

.qin-toggle, .qin-replay {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex: none;
    background: rgba(255, 253, 246, 0.7);
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 0.42rem 1.05rem;
    font-family: var(--li);
    color: var(--ink-soft);
    font-size: 1rem;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
    cursor: pointer;
    transition: color 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

.qin-toggle:hover, .qin-replay:hover { color: var(--cinnabar); border-color: var(--cinnabar-soft); }

.qin-replay { gap: 0; }

.qin-toggle.is-idle {
    animation: qin-beckon 2.8s ease-in-out 3;
}

.qin-icon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(163, 50, 42, 0.45);
    transition: background 0.4s ease;
}

.qin-toggle.is-playing {
    color: var(--cinnabar);
    border-color: var(--cinnabar-soft);
    animation: none;
}

.qin-toggle.is-playing .qin-icon {
    background: var(--cinnabar);
    animation: pulse 2.6s ease-in-out infinite;
}

.qin-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.qin-title {
    font-family: var(--li);
    color: var(--ink-mid);
    font-size: 0.92rem;
    letter-spacing: 0.14em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qin-hint {
    font-family: var(--li);
    color: var(--ink-faint);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    transition: color 0.5s ease;
}

.qin-hint.is-calling { color: var(--cinnabar); }

@keyframes qin-beckon {
    0%, 100% { box-shadow: 0 0 0 0 rgba(163, 50, 42, 0); }
    50% { box-shadow: 0 0 0 5px rgba(163, 50, 42, 0.08); }
}

/* ---------------- 藏书阁（admin） ---------------- */

.admin-page { font-size: 16px; }
.admin-page .stage { max-width: 880px; }

.admin-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line-soft);
}

.admin-head h1 {
    font-family: var(--kai);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.28em;
    margin: 0;
}

.admin-sub {
    font-family: var(--brush);
    font-weight: 400;
    font-size: 1.35rem;
    letter-spacing: 0.2em;
    color: var(--ink);
    margin: 2.6rem 0 0.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line-soft);
}

.admin-list { list-style: none; padding: 0; margin: 0; }

.admin-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0.2rem;
    border-bottom: 1px dashed var(--line-soft);
}

.admin-list strong { font-family: var(--kai); font-weight: 400; font-size: 1.1rem; }
.admin-list .meta, .meta { color: var(--ink-faint); font-size: 0.82rem; letter-spacing: 0.06em; }

.field { display: block; margin-bottom: 1.4rem; }

.field > span {
    display: block;
    font-family: var(--kai);
    font-size: 0.95rem;
    color: var(--ink-soft);
    letter-spacing: 0.16em;
    margin-bottom: 0.45rem;
}

.field input[type=text],
.field input[type=password],
.field input[type=file],
.field input[type=date],
.field input[type=datetime-local],
.field select,
.field textarea {
    width: 100%;
    background: rgba(255, 253, 248, 0.7);
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 0.6rem 0.75rem;
    font-family: var(--song);
    font-size: 1rem;
    color: var(--ink);
    letter-spacing: 0.05em;
    outline: none;
    transition: border-color 0.4s ease;
}

.field textarea { min-height: 400px; line-height: 2.1; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--cinnabar-soft); }

.actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 1.6rem; }

.btn {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 0.45rem 1.4rem;
    font-family: var(--kai);
    font-size: 0.98rem;
    letter-spacing: 0.26em;
    text-indent: 0.26em;
    color: var(--ink-soft);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.4s ease, border-color 0.4s ease;
}

.btn:hover { color: var(--cinnabar); border-color: var(--cinnabar-soft); }

.notice { color: var(--cinnabar); font-family: var(--kai); font-size: 0.95rem; letter-spacing: 0.1em; }

/* ---------------- 动效 ---------------- */

@keyframes rise {
    from { opacity: 0; transform: translateY(16px); filter: blur(5px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

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

/* 触屏：点区不小于 44px */
@media (pointer: coarse) {
    .btn, .gate-submit, .scroll-open, .qin-toggle, .qin-replay, .leave-link, .back-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 620px) {
    body { font-size: 16px; }
    .stage { padding: 5vh 6vw 14vh; padding-bottom: calc(14vh + env(safe-area-inset-bottom)); }
    .shelf { grid-template-columns: 1fr; gap: 1.8rem; }
    .card-frame { padding-bottom: 1.5rem; }
    .scene { height: 200px; }
    .vertical-title { display: none; }
    .seal-chop { width: 38px; height: 38px; top: 1.5rem; right: 1.4rem; font-size: 0.6rem; }
    .silk { padding: 2.4rem 1.3rem 2.3rem; }
    .gate-inner { padding-top: 2rem; }
    .gate-question { font-size: 1.08rem; letter-spacing: 0.1em; }
    .gate-input { width: min(82vw, 280px); font-size: 1.2rem; }
    .library-title { letter-spacing: 0.3em; text-indent: 0.3em; }
    .scroll-body { padding: 1.6rem 1.2rem 2.4rem; }
    .prose { font-size: 1.02rem; line-height: 2; letter-spacing: 0.08em; }
    .prose p { margin-bottom: 1rem; }
    .qin-desk { gap: 0.6rem; padding: 0.6rem 0.8rem 0.6rem 0.7rem; margin-bottom: 1.8rem; }
    .qin-toggle, .qin-replay { padding: 0.42rem 0.85rem; font-size: 0.95rem; letter-spacing: 0.16em; text-indent: 0.16em; }
    .qin-meta { flex: 1 0 100%; }
    .qin-title { font-size: 0.86rem; }
    .qin-hint { font-size: 0.76rem; }
    .admin-head { flex-direction: column; align-items: stretch; }
}

/* 横屏小机身 */
@media (max-height: 520px) and (orientation: landscape) {
    .gate-page .stage { min-height: auto; padding-top: 3vh; padding-bottom: 6vh; }
    .silk { padding-top: 1.8rem; padding-bottom: 1.8rem; }
    .gate-inner { padding-top: 1rem; }
}