/* ==========================================================================
   文字冒险 —— 样式表
   ---------------------------------------------------------------------------
   设计语言：叙事沉浸式（Narrative Immersion）
     · 深墨底色 + 暖金强调，营造「灯光下的羊皮卷」氛围
     · 剧情正文用衬线体与宽行距，界面控件用无衬线体保持清晰
     · 三层表面（surface-1/2/3）建立纵深感，故事正文始终是视觉焦点
   主题：默认深色（沉浸），可切换浅色（明亮环境 / 打印）
   兼容：保留全部 JS 钩子类名（.page.active / .hidden / .selected /
         .theme-dark / .theme-light / .modal.active / .streaming / .stream-caret /
         .caret / .toast / .warn / .danger / .budget-bar / .flow-caret）
   ========================================================================== */

/* ===== 1. 设计令牌 ======================================================= */

:root {
    /* 字体：界面走无衬线，叙事走衬线 */
    --font-ui: "Segoe UI", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "PingFang SC",
        "Hiragino Sans GB", system-ui, sans-serif;
    /* 中文正文改用无衬线：系统衬线中文字体在 Windows/Android 上回退差异很大，
       且正文已是 17px/2.1 行距，无衬线更容易稳定获得清晰的字形。 */
    --font-story: "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN",
        "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
    --font-serif: Georgia, "Times New Roman", "Songti SC", "SimSun", "Noto Serif SC", serif;
    --font-mono: "Cascadia Code", Consolas, "SF Mono", "Courier New", monospace;

    /* 字号阶梯（1.2 比例） */
    --fs-xs: 11.5px;
    --fs-sm: 12.5px;
    --fs-base: 14.5px;
    --fs-md: 15.5px;
    --fs-lg: 18px;
    --fs-xl: 23px;
    --fs-2xl: 31px;

    /* 间距阶梯（4px 基准） */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 44px;

    /* 圆角 */
    --radius-sm: 7px;
    --radius-md: 11px;
    --radius-lg: 16px;
    --radius-xl: 22px;

    --transition: 170ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);

    --z-modal: 99;
    --z-toast: 200;

    /* 叙事排版 */
    --story-size: 17px;
    --story-leading: 2.1;

    /* 说话人配色：同一个名字永远同色，多人对话时不用回看是谁在说 */
    --cast-0: #e79ac0;
    --cast-1: #6fc9ad;
    --cast-2: #8fb8e8;
    --cast-3: #c6a3ea;
    --cast-4: #e89b8a;

    /* 主题色槽位（由下方主题块赋值） */
    --bg-canvas: #0b0e15;
    --bg-canvas-accent: #131826;
    --surface-1: #141926;
    --surface-2: #1b2130;
    --surface-3: #232b3d;
    --surface-inset: #0f131d;

    --border-subtle: #232b3d;
    --border: #2d3749;
    --border-strong: #3d4a61;

    --fg: #e6e9f0;
    --fg-muted: #a9b4c7;
    /* 淡色文本也需满足 WCAG AA（≥4.5:1），不靠牺牲可读性制造层次 */
    --fg-faint: #929eb4;
    --fg-inverse: #0b0e15;

    --accent: #d9a353;
    --accent-hover: #e7b76d;
    --accent-active: #c28f3f;
    --accent-soft: rgba(217, 163, 83, 0.13);
    --accent-line: rgba(217, 163, 83, 0.32);
    --accent-glow: rgba(217, 163, 83, 0.22);
    --on-accent: #1a1206;

    --jade: #63b8a0;
    --jade-soft: rgba(99, 184, 160, 0.13);

    --danger: #e06a5f;
    --danger-hover: #ea8074;
    --danger-soft: rgba(224, 106, 95, 0.13);
    --warn: #dba24a;
    --success: #5fb98b;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 20px 52px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 0 1px var(--accent-line), 0 8px 26px var(--accent-glow);

    --overlay: rgba(5, 7, 12, 0.72);
}

/* 浅色主题：明亮的书房，暖纸色而非冷白 */
body.theme-light {
    --bg-canvas: #f6f3ec;
    --bg-canvas-accent: #ebe5d8;
    --surface-1: #fffdf9;
    --surface-2: #f9f5ed;
    --surface-3: #f1ebdf;
    --surface-inset: #f4efe5;

    --border-subtle: #e6dfd0;
    --border: #d8cfbc;
    --border-strong: #bfb49c;

    --fg: #2a2620;
    --fg-muted: #5f574a;
    --fg-faint: #746a58;
    --fg-inverse: #fffdf9;

    --accent: #9a6b1f;
    --accent-hover: #b17c28;
    --accent-active: #835916;
    --accent-soft: rgba(154, 107, 31, 0.1);
    --accent-line: rgba(154, 107, 31, 0.28);
    --accent-glow: rgba(154, 107, 31, 0.16);
    --on-accent: #fffdf9;

    --jade: #2f7f68;
    --jade-soft: rgba(47, 127, 104, 0.1);

    --danger: #b4443a;
    --danger-hover: #c85448;
    --danger-soft: rgba(180, 68, 58, 0.09);
    --warn: #a5731b;
    --success: #2f7d55;

    --shadow-sm: 0 1px 2px rgba(80, 65, 40, 0.1);
    --shadow-md: 0 6px 20px rgba(80, 65, 40, 0.12);
    --shadow-lg: 0 20px 52px rgba(80, 65, 40, 0.18);
    --shadow-glow: 0 0 0 1px var(--accent-line), 0 8px 26px var(--accent-glow);

    /* 说话人配色：浅色底上要够暗才清晰（对比度均 ≥ 4.5:1） */
    --cast-0: #9c3f6f;
    --cast-1: #22705c;
    --cast-2: #2a5f96;
    --cast-3: #6a4a97;
    --cast-4: #99473b;

    --overlay: rgba(45, 38, 25, 0.5);
}

/* ===== 2. 基础重置 ======================================================= */

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

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

body {
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--fg);
    background-color: var(--bg-canvas);
    /* 极淡的双重径向光晕，给深色底一点「呼吸感」 */
    background-image:
        radial-gradient(1100px 620px at 12% -8%, var(--accent-soft), transparent 62%),
        radial-gradient(900px 520px at 92% 4%, var(--jade-soft), transparent 58%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100vh;
    /* 移动端地址栏收起/展开时，dvh 能跟随可视高度 */
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-weight: 600;
    line-height: 1.35;
    color: var(--fg);
    letter-spacing: 0.01em;
}

h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-md); }
h4 { font-size: var(--fs-base); }

/* 标题下的一道渐隐细线 —— 贯穿全站的分节隐喻 */
h2 {
    position: relative;
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-5);
}

h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
}

#page-world .card > h2 {
    text-align: center;
}

#page-world .card > h2::after {
    left: 50%;
    transform: translateX(-50%);
    width: 108px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* 品牌标题自带渐变文字，不需分节下划线 */
.brand-title::after {
    display: none;
}

hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    margin: var(--sp-6) 0 !important;
}

::selection {
    background: var(--accent-soft);
    color: var(--fg);
}

/* 滚动条：与整体材质统一 */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
    background-clip: content-box;
}

/* 让键盘焦点清晰可见（无障碍） */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ===== 3. 页面容器 ======================================================= */

.page {
    display: none;
    padding: var(--sp-8) var(--sp-6);
    max-width: 1180px;
    margin: 0 auto;
}

.page.active {
    display: block;
    animation: page-enter var(--transition-slow) both;
}

@keyframes page-enter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== 4. 卡片与表面 ===================================================== */

.card {
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--sp-7);
    position: relative;
    overflow: hidden;
}

/* 卡片顶部的一道金色高光，暗示「装帧」 */
.card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
}

#page-home .card,
#page-world .card {
    max-width: 680px;
    margin: 0 auto;
}

#page-world .card {
    max-width: 780px;
}

/* ===== 5. 按钮 =========================================================== */

button {
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: 500;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    background-color: var(--accent);
    color: var(--on-accent);
    transition: background-color var(--transition), border-color var(--transition),
                color var(--transition), box-shadow var(--transition), transform var(--transition);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

button:hover:not(:disabled) {
    background-color: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--accent-glow);
}

button:active:not(:disabled) {
    background-color: var(--accent-active);
    transform: translateY(0);
    box-shadow: none;
}

button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: saturate(0.6);
}

/* 次级按钮：描边而非实心，让主操作更突出 */
.btn-gray {
    background-color: transparent;
    color: var(--fg-muted);
    border-color: var(--border);
}

.btn-gray:hover:not(:disabled) {
    background-color: var(--surface-3);
    color: var(--fg);
    border-color: var(--border-strong);
    box-shadow: none;
}

.btn-gray:active:not(:disabled) {
    background-color: var(--surface-2);
}

.btn-danger {
    background-color: var(--danger);
    color: #fff;
}

.btn-danger:hover:not(:disabled) {
    background-color: var(--danger-hover);
    box-shadow: 0 6px 18px var(--danger-soft);
}

.btn-small {
    padding: 7px 14px;
    font-size: var(--fs-sm);
}

.btn-link {
    background: none;
    border: none;
    color: var(--fg-muted);
    padding: 2px 4px;
    font-size: var(--fs-sm);
    box-shadow: none;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    border-radius: 0;
}

.btn-link:hover:not(:disabled) {
    background: none;
    color: var(--accent);
    border-bottom-color: var(--accent-line);
    transform: none;
    box-shadow: none;
}

/* 首页主菜单：纵向、等宽、有克制的悬停位移 */
.menu-btn {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: var(--sp-3) auto;
    padding: 15px 22px;
    font-size: var(--fs-md);
    background-color: transparent;
    color: var(--fg);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.menu-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--accent-soft), transparent 70%);
    opacity: 0;
    transition: opacity var(--transition);
}

.menu-btn:hover:not(:disabled) {
    background-color: var(--surface-2);
    border-color: var(--accent-line);
    color: var(--fg);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.menu-btn:hover:not(:disabled)::after {
    opacity: 1;
}

.menu-btn:first-of-type {
    border-color: var(--accent-line);
    color: var(--accent);
}

/* ===== 6. 表单控件 ======================================================= */

input, select, textarea {
    width: 100%;
    font-family: inherit;
    font-size: var(--fs-base);
    padding: 11px 14px;
    margin: var(--sp-2) 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface-inset);
    color: var(--fg);
    transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

input::placeholder,
textarea::placeholder {
    color: var(--fg-faint);
}

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
    border-color: var(--border-strong);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface-1);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--surface-2);
}

textarea {
    min-height: 130px;
    resize: vertical;
    line-height: 1.7;
}

select {
    cursor: pointer;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%),
                      linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 38px;
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    margin: 0 6px 0 0;
    accent-color: var(--accent);
    cursor: pointer;
    vertical-align: -1px;
}

input[type="range"] {
    padding: 0;
    border: none;
    background: transparent;
    accent-color: var(--accent);
    cursor: pointer;
}

label {
    cursor: pointer;
    color: var(--fg-muted);
}

/* ===== 7. 品牌标题与主菜单 ============================================== */

.brand-title {
    font-size: var(--fs-2xl);
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin-bottom: var(--sp-3);
    background: linear-gradient(180deg, var(--fg) 25%, var(--accent) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* 兼容不支持 text-clip 的环境 */
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.brand-subtitle {
    text-align: center;
    color: var(--fg-faint);
    font-size: var(--fs-base);
    letter-spacing: 0.04em;
    margin-bottom: var(--sp-6);
    line-height: 1.7;
}

.menu-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--sp-2);
}

/* 分节小标题：细弱、全大写字距，作为组织线索而非视觉重点 */
.section-title {
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fg-faint);
    font-weight: 600;
    margin-bottom: var(--sp-3);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border-subtle), transparent);
}

/* ===== 8. 弹窗 =========================================================== */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay);
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: var(--sp-4);
}

.modal.active {
    display: flex;
    animation: modal-fade var(--transition) both;
}

@keyframes modal-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-7);
    width: 92%;
    max-width: 620px;
    max-height: 90vh;
    overflow-y: auto;
    animation: modal-rise var(--transition-slow) both;
}

.modal-content.modal-wide {
    max-width: 860px;
}

.history-scroll {
    max-height: 64vh;
    overflow-y: auto;
    padding-right: var(--sp-2);
}

@keyframes modal-rise {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-content h3 {
    font-size: var(--fs-lg);
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-5);
    border-bottom: 1px solid var(--border-subtle);
}

.modal-content p {
    margin: var(--sp-3) 0;
    color: var(--fg-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

.modal-content p > input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.modal-content p > select {
    flex: 1 1 200px;
    margin: 0;
}

.modal-content button {
    margin-right: var(--sp-2);
    margin-top: var(--sp-3);
}

/* ===== 9. 首页统计 ======================================================= */

.home-stats {
    margin-top: var(--sp-7);
    padding: var(--sp-5);
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.home-stats h3 {
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fg-faint);
    font-weight: 600;
    margin-bottom: var(--sp-4);
}

.home-stats p {
    margin: var(--sp-2) 0;
    font-size: var(--fs-base);
    color: var(--fg-muted);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
}

.home-stats p span:last-child {
    color: var(--fg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.home-stats .stat-total {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--fs-md);
}

.home-stats .stat-total span:last-child,
.home-stats .stat-total strong {
    color: var(--accent);
    font-size: var(--fs-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.home-stats .stat-hint {
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--fg-faint);
    line-height: 1.65;
    display: block;
}

.home-stats .stat-actions {
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-subtle);
    text-align: right;
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

/* 预算条 */
.budget-bar {
    height: 7px;
    border-radius: 999px;
    background: var(--surface-inset);
    overflow: hidden;
    margin: var(--sp-3) 0 var(--sp-2);
    border: 1px solid var(--border-subtle);
}

.budget-bar > i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--jade), var(--accent));
    transition: width var(--transition-slow);
}

.budget-bar > i.warn {
    background: linear-gradient(90deg, var(--warn), var(--accent-hover));
}

.budget-bar > i.danger {
    background: linear-gradient(90deg, var(--danger), var(--danger-hover));
}

/* ===== 10. 冒险页布局 ===================================================== */

#page-adventure.active {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr) 288px;
    /* 单行铺满视口：正文区高度由 flex 分配，不再依赖 100vh - 固定像素的估算 */
    grid-template-rows: minmax(0, 1fr);
    height: 100vh;
    height: 100dvh;
    gap: var(--sp-5);
    align-items: stretch;
    max-width: 1560px;
    padding-top: var(--sp-6);
    padding-bottom: var(--sp-6);
}

/* NPC 面板隐藏时，主区域自动占满，不留空洞。
   no-npc 由 renderNpcPanel 同步切换，兼容不支持 :has() 的旧浏览器。 */
#page-adventure.active.no-npc {
    grid-template-columns: 264px minmax(0, 1fr);
}

.player-panel,
.npc-panel {
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-5);
    height: fit-content;
    position: sticky;
    top: var(--sp-6);
    max-height: calc(100vh - var(--sp-7));
    max-height: calc(100dvh - var(--sp-7));
    overflow-y: auto;
}

.player-panel h3,
.npc-panel h3 {
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fg-faint);
    text-align: center;
    margin-bottom: var(--sp-4);
    font-weight: 600;
}

.player-panel button {
    width: 100%;
}

.player-panel button + button {
    margin-top: var(--sp-2);
}

/* 角色属性：属性名与属性值分列两端，可读性优先 */
.attr-line {
    margin: 0;
    padding: var(--sp-3) 0;
    font-size: var(--fs-base);
    color: var(--fg-muted);
    word-break: break-word;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    line-height: 1.6;
}

/* 多值属性（物品列表）改为上下堆叠 */
.attr-line.attr-line-multi {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-1);
}

.attr-line:last-child {
    border-bottom: none;
}

.attr-line span {
    color: var(--fg);
    font-weight: 600;
}

.attr-line span.attr-multi {
    display: block;
    margin-top: var(--sp-2);
    color: var(--fg-muted);
    font-weight: 400;
}

.attr-multi-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-3);
    border-left: 2px solid var(--accent-line);
    margin: var(--sp-2) 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
}

.item-icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: var(--accent);
    opacity: 0.85;
}

.item-icon-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.item-text {
    flex: 1;
    min-width: 0;
}

.attr-multi-item .item-name {
    color: var(--accent);
    font-weight: 600;
    display: block;
}

.attr-multi-item .item-detail {
    color: var(--fg-muted);
}

/* ===== 11. 剧情区（视觉焦点） ============================================ */

.story-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.story-shell {
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 380px;
    position: relative;
    overflow: hidden;
}

/* 正文区顶部的一道微光，像台灯落在书页上 */
.story-shell::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 120px;
    background: radial-gradient(600px 120px at 50% 0%, var(--accent-soft), transparent 70%);
    pointer-events: none;
}

.story-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-5);
    border-bottom: 1px solid var(--border-subtle);
    position: relative;
    z-index: 1;
}

.story-toolbar .spacer {
    flex: 1;
}

.story-toolbar button {
    padding: 6px 12px;
    font-size: var(--fs-sm);
    background-color: transparent;
    color: var(--fg-muted);
    border: 1px solid var(--border);
}

.story-toolbar button:hover:not(:disabled) {
    background-color: var(--surface-3);
    color: var(--fg);
    border-color: var(--border-strong);
    transform: none;
    box-shadow: none;
}

.story-toolbar .badge {
    font-size: var(--fs-xs);
    color: var(--fg-muted);
    background: var(--surface-3);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    padding: 4px 11px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* 剧情正文：衬线体、宽行距、舒适measure */
.story-text {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    /* 由外层 grid/flex 决定可用高度，正文超出即滚动；无需估算工具栏/输入框高度 */
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    white-space: pre-line;
    /* 排版：中文叙事的最佳阅读区间与行距 */
    font-family: var(--font-story);
    font-size: var(--story-size);
    line-height: var(--story-leading);
    color: var(--fg);
    position: relative;
    z-index: 1;
    scroll-behavior: smooth;
}

.story-text.streaming {
    white-space: pre-wrap;
}

.story-text::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    background-clip: content-box;
}

/* Markdown 渲染结果 */
.story-text h1, .story-text h2, .story-text h3, .story-text h4 {
    font-family: var(--font-ui);
    margin: var(--sp-5) 0 var(--sp-3);
    color: var(--accent);
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.story-text h1::after,
.story-text h2::after {
    display: none;
}

.story-text h1 { font-size: var(--fs-xl); }

.story-text p {
    margin: var(--sp-4) 0;
}

.story-text ul, .story-text ol {
    margin: var(--sp-4) 0 var(--sp-4) var(--sp-6);
}

.story-text li {
    margin: var(--sp-2) 0;
}

/* 选项类列表收紧行距，保证一屏尽量看全 */
.story-text li + li {
    margin-top: var(--sp-2);
}

.story-text li::marker {
    color: var(--accent);
}

/* -------- 对话块：正文里最容易读累的部分，单独做视觉层 -------- */
.story-prose blockquote.dialogue {
    /* 与相邻段落紧凑贴合：上下边距不叠加 */
    margin: var(--sp-4) 0;
    padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-4);
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--fg);
    font-style: normal;
    line-height: 1.95;
    text-indent: 0;
}

.story-prose blockquote:not(.dialogue) {
    margin: var(--sp-2) 0;
    padding: var(--sp-3) var(--sp-5);
    border-left: 3px solid var(--accent-line);
    background: var(--surface-2);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--fg-muted);
    font-style: italic;
}

/* 连续对话收紧间距，读起来像一串对答而不是一堆独立引用 */
.story-prose blockquote.dialogue + blockquote.dialogue {
    margin-top: var(--sp-2);
}

.story-prose blockquote p {
    margin: 0;
    text-indent: 0;
}

.story-prose blockquote p + p {
    margin-top: var(--sp-2);
}

/* 说话人：加粗 + 按角色名分色（颜色由 markdown.js 打上的 cast-N 类决定） */
.story-prose .speaker {
    font-weight: 700;
    /* 名字与后面的冒号/台词之间留一点呼吸感 */
    letter-spacing: 0.06em;
}

.story-prose .cast-0 { color: var(--cast-0); }
.story-prose .cast-1 { color: var(--cast-1); }
.story-prose .cast-2 { color: var(--cast-2); }
.story-prose .cast-3 { color: var(--cast-3); }
.story-prose .cast-4 { color: var(--cast-4); }

/* 对话块左边框跟随说话人颜色（markdown.js 在 blockquote 上加 dialogue-cast-N） */
.story-prose blockquote.dialogue.dialogue-cast-0 { border-left-color: var(--cast-0); }
.story-prose blockquote.dialogue.dialogue-cast-1 { border-left-color: var(--cast-1); }
.story-prose blockquote.dialogue.dialogue-cast-2 { border-left-color: var(--cast-2); }
.story-prose blockquote.dialogue.dialogue-cast-3 { border-left-color: var(--cast-3); }
.story-prose blockquote.dialogue.dialogue-cast-4 { border-left-color: var(--cast-4); }

/* 旁白段落首行缩进两格 —— 中文长文里这是最省力的段首标记 */
.story-prose > p {
    text-indent: 2em;
}

.story-text code {
    background: var(--surface-3);
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    padding: 1px 6px;
    font-family: var(--font-mono);
    font-size: 0.86em;
    color: var(--accent);
}

.story-text pre {
    background: var(--surface-inset);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    overflow-x: auto;
    margin: var(--sp-4) 0;
    line-height: 1.6;
}

.story-text pre code {
    background: none;
    border: none;
    padding: 0;
    color: var(--fg);
}

.story-text hr {
    margin: var(--sp-6) 0 !important;
}

.story-text table {
    border-collapse: collapse;
    margin: var(--sp-4) 0;
    width: 100%;
    font-family: var(--font-ui);
    font-size: var(--fs-base);
}

.story-text th, .story-text td {
    border: 1px solid var(--border-subtle);
    padding: var(--sp-2) var(--sp-3);
    text-align: left;
}

.story-text th {
    background: var(--surface-3);
    font-weight: 600;
    color: var(--fg);
}

.story-text a {
    color: var(--accent);
    text-underline-offset: 3px;
}

/* 关键信息：荧光笔式高亮，扫读时更容易抓住"这轮发生了什么变化" */
.story-prose strong {
    color: var(--fg);
    font-weight: 700;
    background-image: linear-gradient(transparent 62%, var(--accent-soft) 62%);
    border-radius: 2px;
    padding: 0 1px;
}

/* 说话人已经由 cast-N 着色，不要再叠一层高亮底 */
.story-prose blockquote.dialogue strong {
    background-image: none;
    padding: 0;
}

/* 心理活动：中文斜体是伪斜体，读起来更累，改用青色区分 */
.story-prose em {
    color: var(--jade);
    font-style: normal;
}

/* Markdown 渲染结果：源码里的换行是结构，不该在页面上变成空行 */
.story-text.prose-md,
.history-item .content.prose-md {
    white-space: normal;
}

/* 流式生成光标 */
.stream-caret,
.caret {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 2px;
    background: var(--accent);
    border-radius: 1px;
    vertical-align: -0.15em;
    animation: caret-pulse 1.05s ease-in-out infinite;
}

@keyframes caret-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.18; }
}

/* 兼容旧动画名 */
@keyframes caret-blink {
    to { visibility: hidden; }
}

/* 进度提示（含服务端进度条） */
.progress-line {
    font-size: var(--fs-sm);
    color: var(--fg-faint);
    margin-top: var(--sp-3);
    min-height: 18px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    position: relative;
    z-index: 1;
}

.progress-line::before {
    content: "";
    display: inline-block;
    width: 0;
}

/* 进度条（若 JS 注入 flow-bar / flow-bar-fill） */
.flow-bar,
.progress-bar {
    height: 3px;
    border-radius: 999px;
    background: var(--surface-inset);
    overflow: hidden;
    margin-top: var(--sp-3);
}

.flow-bar > i,
.flow-bar-fill,
.progress-bar > i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--jade), var(--accent));
    transition: width var(--transition);
}

/* ===== 12. 输入区 ======================================================== */

.input-row {
    display: flex;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    align-items: stretch;
}

#userInput {
    flex: 1;
    margin: 0;
    padding: 13px 16px;
    font-size: var(--fs-md);
    background: var(--surface-1);
    border-color: var(--border);
}

#userInput:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.input-row button {
    flex-shrink: 0;
    padding: 13px 26px;
    font-size: var(--fs-md);
    font-weight: 600;
}

/* ===== 13. NPC 面板 ====================================================== */

.npc-panel.hidden {
    display: none;
}

.npc-panel h3 {
    margin-bottom: var(--sp-1);
}

.npc-panel .npc-panel-hint {
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--fg-faint);
    margin-bottom: var(--sp-4);
    letter-spacing: 0.03em;
}

.npc-block {
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.npc-block:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.npc-block:first-child {
    padding-top: 0;
}

.npc-block h4 {
    color: var(--accent);
    margin-bottom: var(--sp-2);
    font-size: var(--fs-md);
    font-weight: 600;
}

.npc-info {
    line-height: 1.65;
    margin-bottom: var(--sp-3);
    white-space: pre-line;
    word-break: break-word;
    font-size: var(--fs-sm);
    color: var(--fg-muted);
}

.npc-action-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.npc-action-buttons button {
    padding: 9px 12px;
    font-size: var(--fs-sm);
    text-align: left;
    background-color: var(--surface-2);
    color: var(--fg-muted);
    border: 1px solid var(--border-subtle);
    white-space: normal;
    line-height: 1.45;
}

.npc-action-buttons button:hover:not(:disabled) {
    background-color: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--fg);
    transform: translateX(2px);
    box-shadow: none;
}

.npc-action-buttons button::before {
    content: "▸ ";
    color: var(--accent);
    font-weight: 700;
}

.npc-empty {
    color: var(--fg-faint);
    font-size: var(--fs-sm);
    text-align: center;
    padding: var(--sp-3) 0;
    line-height: 1.6;
}

/* ===== 14. 世界观选择 ==================================================== */

/* 世界观选项：网格排布，每个世界带一个符文印记 */
.world-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
    margin: var(--sp-3) 0 0;
}

.world-option {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-4) var(--sp-5);
    padding-right: 56px;
    margin: 0;
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition),
                transform var(--transition), box-shadow var(--transition);
    background: var(--surface-2);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 118px;
}

.world-option::after {
    content: attr(data-rune);
    position: absolute;
    right: var(--sp-4);
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-serif);
    font-size: 34px;
    line-height: 1;
    color: var(--accent);
    opacity: 0.16;
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
}

.world-option:hover::after {
    opacity: 0.34;
    transform: translateY(-50%) scale(1.06);
}

.world-option.selected::after {
    opacity: 0.5;
}

.world-option::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform var(--transition);
}

.world-option:hover {
    border-color: var(--accent-line);
    background: var(--surface-3);
    transform: translateX(3px);
}

.world-option:hover::before {
    transform: scaleY(0.6);
}

.world-option.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: var(--shadow-glow);
}

.world-option.selected::before {
    transform: scaleY(1);
}

.world-option h3 {
    font-size: var(--fs-md);
    color: var(--fg);
    margin-bottom: var(--sp-1);
    font-weight: 600;
}

.world-option.selected h3 {
    color: var(--accent);
}

.world-option p {
    color: var(--fg-muted);
    font-size: var(--fs-sm);
    line-height: 1.55;
}

/* 标题预留符文空间，避免与装饰字重叠 */
.world-option h3 {
    min-width: 0;
    padding-right: var(--sp-6);
}

.sub-area {
    margin-top: var(--sp-4);
    padding: var(--sp-5);
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    animation: page-enter var(--transition) both;
}

.sub-area p:not(.field-label) {
    color: var(--fg-muted);
    font-size: var(--fs-sm);
    margin: var(--sp-3) 0 var(--sp-1);
}

.sub-area label {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin: var(--sp-1) 0;
    font-size: var(--fs-base);
    color: var(--fg-muted);
}

.sub-area input[type="radio"] {
    margin-right: var(--sp-2);
}

.hidden {
    display: none !important;
}

/* 页脚操作区（卡片底部按钮组） */
.panel-actions {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border-subtle);
}

.panel-actions-vertical {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-subtle);
}

.panel-actions button,
.panel-actions-vertical button {
    margin: 0;
}

.modal-content button:first-of-type {
    margin-top: 0;
}

/* 自定义世界观子面板 */
.custom-mode-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.field-label {
    color: var(--fg-muted);
    font-size: var(--fs-sm);
    margin: var(--sp-3) 0 var(--sp-1);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.field-label::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

.final-prompt-block {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-subtle);
}

/* ===== 15. 存档列表 ====================================================== */

.saved-world-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-4) var(--sp-5);
    margin: var(--sp-3) 0;
    background: var(--surface-2);
    transition: border-color var(--transition), background-color var(--transition), transform var(--transition);
    position: relative;
}

.saved-world-item:hover {
    border-color: var(--accent-line);
    background: var(--surface-3);
    transform: translateY(-1px);
}

.saved-world-item h4 {
    color: var(--fg);
    margin-bottom: var(--sp-2);
    font-size: var(--fs-md);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.saved-world-item h4::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

.saved-world-buttons {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    flex-wrap: wrap;
}

.saved-world-buttons button {
    padding: 7px 14px;
    font-size: var(--fs-sm);
}

.saved-meta {
    font-size: var(--fs-sm);
    color: var(--fg-faint);
    line-height: 1.75;
    font-variant-numeric: tabular-nums;
}

.saved-meta .token-line {
    color: var(--jade);
    font-weight: 600;
}

/* ===== 16. 历史对话 ====================================================== */

.history-item {
    margin-bottom: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
    line-height: 1.7;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
}

.history-item.user {
    background: var(--accent-soft);
    border-color: var(--accent-line);
}

.history-item.assistant {
    background: var(--surface-2);
}

.history-item .role-label {
    font-weight: 700;
    font-size: var(--fs-xs);
    margin-bottom: var(--sp-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.history-item.user .role-label {
    color: var(--accent);
}

.history-item.assistant .role-label {
    color: var(--jade);
}

.history-item .content {
    white-space: pre-line;
    word-break: break-word;
    font-size: var(--fs-base);
    color: var(--fg);
    line-height: 1.75;
}

.history-turn-index {
    font-size: var(--fs-xs);
    color: var(--fg-faint);
    margin-left: var(--sp-2);
    font-weight: 400;
    letter-spacing: 0;
}

/* ===== 17. 提示条 / 通知 ================================================= */

.notice {
    font-size: var(--fs-sm);
    color: var(--fg-muted);
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--accent-line);
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    line-height: 1.65;
}

/* 上游服务列表（服务状态弹窗） */
.provider-list {
    margin-bottom: var(--sp-4);
    font-variant-numeric: tabular-nums;
}

.provider-row {
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-2);
    background: var(--surface-2);
    line-height: 1.6;
}

.provider-row.healthy {
    border-left-color: var(--success);
}

.provider-row.cooling {
    border-left-color: var(--warn);
    background: var(--surface-3);
}

.provider-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.provider-name {
    color: var(--fg);
    font-weight: 600;
    font-size: var(--fs-base);
    word-break: break-all;
}

.provider-state {
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.provider-row.healthy .provider-state {
    color: var(--success);
}

.provider-row.cooling .provider-state {
    color: var(--warn);
}

.provider-meta {
    font-size: var(--fs-sm);
    color: var(--fg-faint);
    margin-top: var(--sp-1);
    word-break: break-word;
}

.provider-error {
    color: var(--danger);
}

#toastHost {
    position: fixed;
    top: var(--sp-5);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    align-items: center;
    pointer-events: none;
}

.toast {
    background: var(--surface-3);
    color: var(--fg);
    border: 1px solid var(--border-strong);
    padding: var(--sp-3) var(--sp-5);
    border-radius: 999px;
    font-size: var(--fs-base);
    box-shadow: var(--shadow-lg);
    max-width: 82vw;
    animation: toast-in var(--transition) both;
    pointer-events: auto;
    backdrop-filter: blur(8px);
}

.toast.error {
    background: var(--danger);
    border-color: var(--danger-hover);
    color: #fff;
}

.toast.success {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(-12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== 18. 杂项 ========================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 数字统一用等宽数字，避免跳动 */
.home-stats span,
.saved-meta,
.badge,
.progress-line,
#historyContent {
    font-variant-numeric: tabular-nums;
}

/* ===== 19. 响应式 ======================================================== */

@media (max-width: 1180px) {
    #page-adventure.active {
        grid-template-columns: 240px minmax(0, 1fr) 260px;
    }
}

@media (max-width: 1000px) {
    #page-adventure.active,
    #page-adventure.active.no-npc {
        grid-template-columns: minmax(0, 1fr);
        /* 移动端恢复整页滚动，避免固定高度把属性/NPC 面板挤出视口 */
        grid-template-rows: none;
        height: auto;
        padding: var(--sp-3);
        gap: var(--sp-3);
    }

    .player-panel,
    .npc-panel {
        position: static;
        max-height: none;
        width: 100%;
    }

    /* 移动端把属性面板折到剧情之后，优先看到故事 */
    .player-panel {
        order: 3;
    }

    .story-area {
        order: 1;
    }

    .npc-panel {
        order: 2;
    }

    .story-text {
        max-height: none;
        min-height: 220px;
        /* sticky 输入区会盖住正文末尾，给正文留出与输入区等高的底部空间 */
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 640px) {
    :root {
        --story-size: 16.5px;
        --story-leading: 1.95;
        --sp-7: 22px;
    }

    .page {
        padding: var(--sp-4) var(--sp-3);
    }

    .card {
        padding: var(--sp-5);
        border-radius: var(--radius-md);
    }

    .menu-btn {
        max-width: none;
    }

    .input-row {
        flex-direction: column;
    }

    .input-row button {
        width: 100%;
    }

    .story-shell {
        padding: var(--sp-4);
        min-height: 300px;
    }

    .story-toolbar .spacer {
        display: none;
    }

    .story-toolbar {
        gap: var(--sp-1);
    }

    .modal-content {
        padding: var(--sp-5);
        width: 100%;
    }

    .home-stats .stat-actions {
        justify-content: space-between;
        gap: var(--sp-2);
    }
}

@media (max-width: 700px) {
    .world-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .world-option {
        min-height: 0;
    }

    :root {
        --fs-2xl: 26px;
    }
}

/* ===== 20. 无障碍与偏好 ================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 高对比度偏好下强化边框 */
@media (prefers-contrast: more) {
    :root {
        --border: var(--border-strong);
        --border-subtle: var(--border);
    }
}

/* ===== 21. 首页与冒险页视觉增强 ========================================= */

/* 首页标题区：把「品牌」和「开始」之间的层级拉开 */
.home-hero {
    position: relative;
    padding: var(--sp-2) 0 var(--sp-7);
    text-align: center;
}

.home-hero::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 210px;
    background: radial-gradient(340px 130px at 50% 0%, var(--accent-soft), transparent 72%);
    pointer-events: none;
}

.home-hero > * {
    position: relative;
    z-index: 1;
}

.home-hero-mark {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto var(--sp-4);
    border: 1px solid var(--accent-line);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, var(--surface-3), var(--surface-1));
    color: var(--accent);
    font-family: var(--font-serif);
    font-size: 27px;
    line-height: 1;
    box-shadow: var(--shadow-glow);
}

.home-kicker {
    margin-bottom: var(--sp-2);
    color: var(--fg-faint);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
}

.home-hero .brand-title {
    margin-bottom: var(--sp-2);
    font-size: clamp(34px, 7vw, 48px);
    letter-spacing: 0.2em;
    text-indent: 0.2em;
}

.home-hero .brand-subtitle {
    max-width: 42ch;
    margin: 0 auto;
    line-height: 1.75;
}

/* 最近存档：首页第一优先级操作 */
.home-continue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    max-width: 540px;
    margin: 0 auto var(--sp-6);
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--accent-soft), var(--surface-2) 72%);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.home-continue::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--accent-hover), var(--accent-active));
}

.home-continue-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.home-continue-kicker {
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
}

.home-continue strong {
    overflow: hidden;
    color: var(--fg);
    font-size: var(--fs-md);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-continue-meta {
    color: var(--fg-faint);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

.home-continue-btn {
    flex-shrink: 0;
    padding-inline: 22px;
}

.menu-group {
    margin-top: var(--sp-2);
}

.menu-btn.menu-btn-primary {
    max-width: 360px;
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: var(--on-accent);
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: 0.06em;
    box-shadow: 0 10px 26px var(--accent-glow);
}

.menu-btn.menu-btn-primary:hover:not(:disabled) {
    border-color: var(--accent-hover);
    background: linear-gradient(135deg, var(--accent-hover), var(--accent));
    color: var(--on-accent);
    box-shadow: 0 12px 32px var(--accent-glow);
}

.home-secondary-actions {
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.home-secondary-actions .btn-gray {
    min-width: 128px;
    margin: 0;
}

/* 统计折叠：默认只露出摘要，降低首页信息压力 */
.home-stats {
    padding: 0;
    overflow: hidden;
}

.home-stats-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    color: var(--fg-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
    list-style: none;
    transition: color var(--transition), background-color var(--transition);
}

.home-stats-summary::-webkit-details-marker {
    display: none;
}

.home-stats-summary:hover {
    background: var(--surface-3);
    color: var(--fg);
}

.home-stats-toggle {
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.home-stats-toggle::before {
    content: "展开";
}

.home-stats[open] .home-stats-toggle::before {
    content: "收起";
}

.home-stats-body {
    padding: 0 var(--sp-5) var(--sp-5);
    border-top: 1px solid var(--border-subtle);
}

/* 冒险状态栏：让玩家不必从长正文里回忆自己在哪、要做什么 */
.adventure-status {
    display: grid;
    /* 按内容权重分配：目标通常最长，场景次之，世界/NPC 较短 */
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.1fr) minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 1px;
    margin-bottom: var(--sp-3);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--border-subtle);
}

.adventure-status-item {
    min-width: 0;
    padding: 10px var(--sp-4);
    background: var(--surface-1);
}

.adventure-status-item span {
    display: block;
    margin-bottom: 2px;
    color: var(--fg-faint);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.adventure-status-item strong {
    display: block;
    overflow: hidden;
    color: var(--fg);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 「当前目标」允许两行，避免关键目的被省略号截掉 */
.adventure-status-item:nth-child(3) strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
}

/* 玩家身份章与生命/能量条 */
.player-identity {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border-subtle);
}

.player-seal {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--accent-line);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, var(--surface-3), var(--surface-inset));
    color: var(--accent);
    font-family: var(--font-serif);
    font-size: 20px;
    line-height: 1;
}

.player-identity-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.player-identity-copy span {
    color: var(--fg-faint);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
}

.player-identity-copy strong {
    overflow: hidden;
    color: var(--fg);
    font-size: var(--fs-md);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vital-row {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.vital-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: 6px;
    color: var(--fg-muted);
    font-size: var(--fs-sm);
}

.vital-head strong {
    color: var(--fg);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

.vital-bar {
    height: 6px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--surface-inset);
}

.vital-bar > i {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width var(--transition-slow);
}

.vital-hp .vital-bar > i {
    background: linear-gradient(90deg, var(--danger), var(--danger-hover));
}

.vital-mp .vital-bar > i {
    background: linear-gradient(90deg, var(--jade), var(--accent));
}

/* NPC：头像章、状态标签与分色，让侧栏更容易扫读 */
.npc-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.npc-head h4 {
    margin: 0;
}

.npc-avatar {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border: 1px solid var(--npc-accent, var(--accent-line));
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--npc-accent, var(--accent));
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1;
}

.npc-avatar-rune {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.24;
    pointer-events: none;
}

.npc-avatar-initial {
    position: relative;
    z-index: 1;
}

.npc-tone-0 { --npc-accent: var(--cast-0); }
.npc-tone-1 { --npc-accent: var(--cast-1); }
.npc-tone-2 { --npc-accent: var(--cast-2); }
.npc-tone-3 { --npc-accent: var(--cast-3); }
.npc-tone-4 { --npc-accent: var(--cast-4); }

.npc-tone-0 .npc-head h4,
.npc-tone-1 .npc-head h4,
.npc-tone-2 .npc-head h4,
.npc-tone-3 .npc-head h4,
.npc-tone-4 .npc-head h4 {
    color: var(--npc-accent);
}

.npc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin-bottom: var(--sp-3);
}

.npc-chip {
    padding: 2px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--fg-faint);
    font-size: var(--fs-xs);
    line-height: 1.5;
    word-break: break-word;
}

.npc-action-label {
    margin: var(--sp-3) 0 var(--sp-2);
    color: var(--fg-faint);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* 正文保持在舒适阅读宽度内（42em ≈ 中文约 30 字/行） */
.story-text {
    width: 100%;
    max-width: 42em;
    margin-inline: auto;
}

/* 生成失败：错误原因、排查方向与重试留在正文区域，不再打断操作 */
.story-error {
    max-width: 600px;
    margin: var(--sp-7) auto;
    padding: var(--sp-5);
    border: 1px solid var(--danger-soft);
    border-left: 3px solid var(--danger);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--danger-soft), var(--surface-2) 72%);
    font-family: var(--font-ui);
    line-height: 1.7;
}

.story-error-kicker {
    display: block;
    margin-bottom: var(--sp-2);
    color: var(--danger);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
}

.story-error p {
    margin: 0;
    color: var(--fg);
    font-size: var(--fs-base);
    text-indent: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.story-error .story-error-hint {
    margin-top: var(--sp-2);
    color: var(--fg-faint);
    font-size: var(--fs-sm);
}

.story-error-retry {
    margin-top: var(--sp-4);
}

/* 生成中：进度文字前增加一个轻量旋转指示 */
.story-area.is-generating .story-shell {
    border-color: var(--accent-line);
}

.story-area.is-generating .progress-line::before {
    width: 11px;
    height: 11px;
    margin-right: var(--sp-2);
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: generating-spin 0.8s linear infinite;
    vertical-align: -1px;
}

@keyframes generating-spin {
    to { transform: rotate(360deg); }
}

/* 多行行动输入：低频长输入不挤坏剧情区 */
#userInput {
    min-height: 48px;
    max-height: 160px;
    resize: none;
    overflow-y: auto;
    padding: 14px 16px;
    line-height: 1.6;
}

.input-row {
    align-items: flex-end;
}

.input-row button {
    min-height: 48px;
}

/* 四个世界观各有一点色彩辨识，但不破坏整体暖金语言 */
.world-option[data-world="douluo"] {
    --world-accent: #e7b76d;
    --world-tint: rgba(231, 183, 109, 0.13);
}

.world-option[data-world="zhanshen"] {
    --world-accent: #e06a5f;
    --world-tint: rgba(224, 106, 95, 0.12);
}

.world-option[data-world="shenmi"] {
    --world-accent: #63b8a0;
    --world-tint: rgba(99, 184, 160, 0.12);
}

.world-option[data-world="custom"] {
    --world-accent: #c6a3ea;
    --world-tint: rgba(198, 163, 234, 0.12);
}

body.theme-light .world-option[data-world="douluo"] { --world-accent: #8a5c17; --world-tint: rgba(138, 92, 23, 0.08); }
body.theme-light .world-option[data-world="zhanshen"] { --world-accent: #b4443a; --world-tint: rgba(180, 68, 58, 0.08); }
body.theme-light .world-option[data-world="shenmi"] { --world-accent: #2f7f68; --world-tint: rgba(47, 127, 104, 0.08); }
body.theme-light .world-option[data-world="custom"] { --world-accent: #6a4a97; --world-tint: rgba(106, 74, 151, 0.08); }

.world-option::after,
.world-option::before {
    color: var(--world-accent, var(--accent));
    background-color: var(--world-accent, var(--accent));
}

.world-option::after {
    background: none;
}

.world-option:hover {
    border-color: var(--world-accent, var(--accent-line));
}

.world-option.selected {
    border-color: var(--world-accent, var(--accent));
    background: var(--world-tint, var(--accent-soft));
    box-shadow: 0 0 0 1px var(--world-accent, var(--accent)), var(--shadow-md);
}

.world-option.selected h3 {
    color: var(--world-accent, var(--accent));
}

@media (max-width: 1000px) {
    .adventure-status {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    }

    .input-row {
        position: sticky;
        bottom: 0;
        z-index: 8;
        margin-top: var(--sp-2);
        padding: var(--sp-3);
        padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--surface-1);
        box-shadow: var(--shadow-lg);
        backdrop-filter: blur(10px);
    }
}

@media (max-width: 640px) {
    .home-hero {
        padding-bottom: var(--sp-6);
    }

    .home-hero-mark {
        width: 50px;
        height: 50px;
        font-size: 23px;
    }

    .home-continue {
        flex-direction: column;
        align-items: stretch;
        padding: var(--sp-4);
    }

    .home-continue-btn {
        width: 100%;
    }

    .home-secondary-actions {
        width: 100%;
        flex-wrap: nowrap;
    }

    .home-secondary-actions .btn-gray {
        flex: 1;
        min-width: 0;
    }

    .adventure-status-item {
        padding: 9px var(--sp-3);
    }

    .story-error {
        margin: var(--sp-5) auto;
        padding: var(--sp-4);
    }

    #userInput {
        min-height: 44px;
        max-height: 132px;
    }
}