<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>虐阴协会 - 世界观与角色定制</title>
    <link rel="stylesheet" href="style.css">
</head>
<body class="day-mode"> <!-- 初始设置为白天模式 -->

    <!-- 可跳过的开场动画 -->
    <div id="introAnimation" class="intro-animation">
        <div class="intro-content">
            <h1>欢迎来到 虐阴协会</h1>
            <p>一切的起点，亦是终点。</p>
            <button id="skipIntro" class="action-button">跳过开场动画</button>
        </div>
    </div>

    <!-- 全局动态漂浮物和天气背景层 -->
    <div class="global-floating-elements"></div>
    <div class="weather-overlay rain-effect"></div> <!-- 默认下雨 -->


    <div class="main-container">
        <header class="page-header">
            <div class="title-main">虐阴 协 会</div>
            <div class="title-sub">T H E · A S S O C I A T I O N</div>
            <div class="divider"></div>
        </header>

        <!-- 昼夜模式切换按钮 -->
        <button id="themeToggle" class="theme-toggle">🌙</button>

        <!-- 标签导航 -->
        <nav class="tab-navigation">
            <button class="tab-button active" data-tab="worldview">世界观</button>
            <button class="tab-button" data-tab="timeline">时间轴</button>
            <button class="tab-button" data-tab="route-selection">路线选择</button>
            <button class="tab-button" data-tab="character-config">角色配置</button>
        </nav>

        <!-- 内容区域 -->
        <div class="content-wrapper">

            <!-- 世界观内容 -->
            <section id="worldview" class="tab-content active">
                <div class="section-title">00 · 世 界 观 概 览</div>
                <div class="content-card">
                    <p>在遥远的彼方，或近在咫尺的黑暗中，存在着一个不为人知的隐秘组织——“虐阴协会”。他们以人类深层欲望为食，以扭曲的法则维系着平衡，亦或是混乱。加入他们，成为猎物、猎手，抑或是那个试图打破一切的破局者。</p>
                    <p>这个世界由欲望与痛苦交织，每一个选择都将你推向深渊的更深处，或是揭示隐藏在光明下的真相。请谨慎做出你的选择，因为一旦踏入，便无回头之路。</p>
                </div>
            </section>

            <!-- 时间轴内容 -->
            <section id="timeline" class="tab-content">
                <div class="section-title">00 · 时 间 轴</div>
                <div class="content-card">
                    <h3 class="card-subtitle">【起源】未知纪元</h3>
                    <p>协会的成立时间无从考证，其历史被层层迷雾包裹。有传言称，它与人类文明的诞生同步，只是以不同的形态存在于世。</p>
                    <h3 class="card-subtitle">【崛起】17世纪</h3>
                    <p>随着社会隐秘欲望的滋生，协会开始浮出水面。通过渗透上层社会，他们建立起严密的内部体系，并制定了“狩猎法则”。</p>
                    <h3 class="card-subtitle">【繁盛】19世纪末-20世纪初</h3>
                    <p>工业革命带来的社会变革与人性的异化，为协会提供了前所未有的“猎场”。“狩猎”行动达到顶峰，无数人在暗中沦为祭品。</p>
                    <h3 class="card-subtitle">【危机】20世纪末</h3>
                    <p>信息时代的到来，威胁着协会的隐秘性。内部出现裂痕，一些成员开始质疑其存在的意义。外部则有少数“破局者”试图揭露真相。</p>
                    <h3 class="card-subtitle">【当下】混沌纪元</h3>
                    <p>协会处于一个关键的十字路口。它能否在光明的审视下继续存在？你，将扮演怎样的角色，影响这个古老组织的命运？</p>
                </div>
            </section>

            <!-- 路线选择 (原内容) -->
            <section id="route-selection" class="tab-content">
                <div class="section-title">01 · 选择 路 线</div>

                <div class="content-card">
                    <div class="card-subtitle">🅰 猎 物 · 受虐者视角</div>
                    <div class="card-description">你是被协会选中的目标。恐惧、屈辱、挣扎——或者沉沦。</div>
                    <div class="options-group">
                        <button class="option-button route-option" data-route="A1">A1 紫竹铃</button>
                        <button class="option-button route-option" data-route="A2">A2 自建角色</button>
                    </div>
                </div>

                <div class="content-card">
                    <div class="card-subtitle">🅱 猎 手 · 执行者视角</div>
                    <div class="card-description">你是协会的刀刃。任务、手段、权力——以及深渊的凝视。</div>
                    <div class="options-group">
                        <button class="option-button route-option" data-route="B1">B1 棋手</button>
                        <button class="option-button route-option" data-route="B2">B2 新任执行官</button>
                        <button class="option-button route-option" data-route="B3">B3 核心成员</button>
                    </div>
                </div>

                <div class="content-card">
                    <div class="card-subtitle">🅲 破 局 者 · 调查者视角</div>
                    <div class="card-description">你试图揭开真相。但真相的代价，你承受得起吗？</div>
                    <div class="options-group">
                        <button class="option-button route-option" data-route="C1">C1 调查记者</button>
                        <button class="option-button route-option" data-route="C2">C2 朋友</button>
                        <button class="option-button route-option" data-route="C3">C3 警方</button>
                    </div>
                </div>

                <div class="content-card">
                    <div class="card-subtitle">🅳 自 由 模 式</div>
                    <div class="card-description">自定义你的身份、立场与故事起点。</div>
                    <div class="options-group">
                        <button class="option-button route-option" data-route="D1">D1 完全自定义</button>
                    </div>
                </div>
            </section>

            <!-- 角色信息 (原内容，改造为表单) -->
            <section id="character-config" class="tab-content">
                <div class="section-title">02 · 角 色 信 息</div>
                <div class="section-description">选择预设角色将跳过此页，或点击下方【随机生成】。</div>

                <div class="content-card">
                    <div class="form-group">
                        <label for="charName">姓 名</label>
                        <input type="text" id="charName" placeholder="留空则由系统随机生成">
                    </div>

                    <div class="form-group">
                        <label for="charAge">年 龄</label>
                        <input type="number" id="charAge" placeholder="留空则由系统随机生成" min="16" max="99">
                    </div>

                    <div class="form-group">
                        <label>身 材</label>
                        <div class="options-group radio-group" id="bodyShapeOptions">
                            <button class="option-button select-char-option" data-category="bodyShape" data-value="娇小纤细">娇小纤细</button>
                            <button class="option-button select-char-option" data-category="bodyShape" data-value="匀称标准">匀称标准</button>
                            <button class="option-button select-char-option" data-category="bodyShape" data-value="丰满圆润">丰满圆润</button>
                            <button class="option-button select-char-option" data-category="bodyShape" data-value="高挑健美">高挑健美</button>
                            <button class="option-button select-char-option" data-category="bodyShape" data-value="自定义">自定义</button>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>私 密 特 征</label>
                        <div class="section-description">根据角色性别选择</div>
                        <div class="feature-group female">
                            <div class="feature-title">♀ 阴部特征</div>
                            <div class="options-group radio-group" id="femalePrivateOptions">
                                <button class="option-button select-char-option" data-category="privateFemale" data-value="紧致敏感">紧致敏感</button>
                                <button class="option-button select-char-option" data-category="privateFemale" data-value="花唇肥厚">花唇肥厚</button>
                                <button class="option-button select-char-option" data-category="privateFemale" data-value="阴蒂突出">阴蒂突出</button>
                                <button class="option-button select-char-option" data-category="privateFemale" data-value="处女">处女</button>
                                <button class="option-button select-char-option" data-category="privateFemale" data-value="自定义">自定义</button>
                            </div>
                        </div>
                        <div class="feature-group male">
                            <div class="feature-title">♂ 阳具特征</div>
                            <div class="options-group radio-group" id="malePrivateOptions">
                                <button class="option-button select-char-option" data-category="privateMale" data-value="粗大">粗大</button>
                                <button class="option-button select-char-option" data-category="privateMale" data-value="标准">标准</button>
                                <button class="option-button select-char-option" data-category="privateMale" data-value="短小">短小</button>
                                <button class="option-button select-char-option" data-category="privateMale" data-value="自定义">自定义</button>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>职 业</label>
                        <div class="options-group radio-group" id="occupationOptions">
                            <button class="option-button select-char-option" data-category="occupation" data-value="学生">学生</button>
                            <button class="option-button select-char-option" data-category="occupation" data-value="白领">白领</button>
                            <button class="option-button select-char-option" data-category="occupation" data-value="教师">教师</button>
                            <button class="option-button select-char-option" data-category="occupation" data-value="护士">护士</button>
                            <button class="option-button select-char-option" data-category="occupation" data-value="模特">模特</button>
                            <button class="option-button select-char-option" data-category="occupation" data-value="家庭主妇">家庭主妇</button>
                            <button class="option-button select-char-option" data-category="occupation" data-value="自定义">自定义</button>
                        </div>
                    </div>
                </div>

                <div class="section-title">03 · 开 场 白 预 览</div>
                <div class="content-card">
                    <textarea id="openingLinePreview" rows="8" readonly placeholder="您的角色信息和开场白将在这里生成..." class="preview-textarea"></textarea>
                </div>

                <div class="action-buttons-group">
                    <button id="randomizeCharacter" class="action-button primary">随机生成角色</button>
                    <button id="previewOpening" class="action-button secondary">预览开场白</button>
                    <button id="copyCharacterInfo" class="action-button tertiary">复制角色信息</button>
                    <span id="copyFeedback" class="copy-feedback">已复制！</span>
                </div>
            </section>

        </div> <!-- end content-wrapper -->

        <footer class="page-footer">
            <div class="divider"></div>
            <p>感谢你涉足这片禁忌之地。</p>
        </footer>

    </div> <!-- end main-container -->

    <script src="script.js"></script>
</body>
</html>




/* 通用样式与重置 */
body {
    margin: 0;
    padding: 0;
    font-family: 'Times New Roman', Times, serif; /* 保持serif */
    background: linear-gradient(135deg, #1a0a0a 0%, #2d1215 50%, #1a0a0a 100%);
    color: #e8d5b0;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 内容从顶部开始 */
    overflow-x: hidden; /* 防止横向滚动 */
    position: relative;
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* 昼夜模式 */
body.night-mode {
    background: linear-gradient(135deg, #1a0a0a 0%, #2d1215 50%, #1a0a0a 100%);
    color: #e8d5b0;
}

body.day-mode {
    background: linear-gradient(135deg, #e0e0e0 0%, #f0f0f0 50%, #e0e0e0 100%);
    color: #333;
}

body.day-mode .page-header .title-main,
body.day-mode .section-title,
body.day-mode .card-subtitle,
body.day-mode label {
    color: #555;
}

body.day-mode .page-header .title-sub,
body.day-mode .section-description,
body.day-mode .page-footer p,
body.day-mode .content-card .card-description {
    color: #777;
}

body.day-mode .content-card,
body.day-mode input,
body.day-mode textarea {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(150, 150, 150, 0.4);
    color: #333;
}

body.day-mode .option-button,
body.day-mode .tab-button {
    background: rgba(200, 200, 200, 0.7);
    border-color: rgba(150, 150, 150, 0.5);
    color: #555;
}

body.day-mode .option-button.selected,
body.day-mode .option-button:hover,
body.day-mode .tab-button.active,
body.day-mode .tab-button:hover {
    background: rgba(180, 180, 180, 0.8);
    border-color: rgba(100, 100, 100, 0.7);
    color: #333;
}

body.day-mode .action-button.primary {
    background: #6c757d;
    border-color: #5a6268;
    color: #fff;
}
body.day-mode .action-button.primary:hover {
    background: #5a6268;
}

body.day-mode .action-button.secondary {
    background: #007bff;
    border-color: #0069d9;
    color: #fff;
}
body.day-mode .action-button.secondary:hover {
    background: #0069d9;
}

body.day-mode .action-button.tertiary {
    background: #28a745;
    border-color: #218838;
    color: #fff;
}
body.day-mode .action-button.tertiary:hover {
    background: #218838;
}

body.day-mode .feature-group.female {
    background: rgba(255, 200, 200, 0.5);
    border-color: rgba(255, 150, 150, 0.6);
}
body.day-mode .feature-group.male {
    background: rgba(200, 220, 255, 0.5);
    border-color: rgba(150, 180, 255, 0.6);
}
body.day-mode .feature-group .feature-title {
    color: #888;
}


/* 全局容器 */
.main-container {
    width: 90%;
    max-width: 760px;
    border: 1px solid #8b6914;
    border-radius: 16px;
    padding: 28px 24px;
    margin: 40px 0; /* 留出空间给漂浮物和顶部 */
    position: relative;
    z-index: 10; /* 确保内容在漂浮物之上 */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.4); /* 透明背景以便看到漂浮物 */
    transition: background-color 0.5s ease, border-color 0.5s ease;
}
body.day-mode .main-container {
    background: rgba(255, 255, 255, 0.8);
    border-color: #ccc;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

/* 头部样式 */
.page-header {
    text-align: center;
    margin-bottom: 24px;
}
.page-header .title-main {
    font-size: 2.2em; /* 26px */
    font-weight: bold;
    color: #f0e0c0;
    letter-spacing: 8px;
    text-shadow: 0 0 8px rgba(139,105,20,0.6);
}
.page-header .title-sub {
    font-size: 0.9em; /* 11px */
    color: #8b7355;
    letter-spacing: 4px;
    margin-top: 6px;
}
.page-header .divider,
.page-footer .divider {
    width: 70%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #8b6914, transparent);
    margin: 14px auto;
}
body.day-mode .page-header .divider,
body.day-mode .page-footer .divider {
    background: linear-gradient(90deg, transparent, #aaa, transparent);
}

/* 标签导航 */
.tab-navigation {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
    flex-wrap: wrap; /* 移动端适配 */
}
.tab-navigation .tab-button {
    background: rgba(139, 105, 20, 0.1);
    border: 1px solid rgba(139, 105, 20, 0.3);
    border-radius: 8px;
    padding: 10px 20px;
    margin: 4px;
    color: #c0a878;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-grow: 1; /* 移动端自适应宽度 */
    max-width: 150px; /* 限制按钮最大宽度 */
}
.tab-navigation .tab-button:hover {
    background: rgba(139, 105, 20, 0.3);
    border-color: #d4a843;
    color: #f0e0c0;
    box-shadow: 0 0 8px rgba(139,105,20,0.4);
}
.tab-navigation .tab-button.active {
    background: rgba(139, 32, 48, 0.4);
    border: 1px solid #8b2030;
    color: #e8a0a0;
    box-shadow: 0 0 10px rgba(139, 32, 48, 0.6);
    pointer-events: none; /* 激活状态不可点击 */
}

/* 内容区域 */
.content-wrapper {
    position: relative; /* 确保tab内容定位 */
    min-height: 400px; /* 防止内容过少时塌陷 */
}
.tab-content {
    display: none;
    padding: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.tab-content.active {
    display: block;
    opacity: 1;
}

.section-title {
    text-align: center;
    margin-bottom: 16px;
    display: inline-block;
    background: rgba(139,32,48,0.4);
    border: 1px solid #8b2030;
    border-radius: 6px;
    padding: 4px 16px;
    color: #e8a0a0;
    letter-spacing: 3px;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(139,32,48,0.3);
    margin: 0 auto 16px auto; /* 居中 */
    display: block; /* 允许 margin auto */
    width: fit-content; /* 适应内容宽度 */
}

.section-description {
    color: #8b7355;
    font-size: 0.9em;
    margin-top: -8px;
    margin-bottom: 16px;
    text-align: center;
}
body.day-mode .section-title {
    background: rgba(150, 150, 150, 0.4);
    border-color: #999;
    color: #555;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.content-card {
    background: rgba(139,105,20,0.08);
    border: 1px solid rgba(139,105,20,0.25);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: inset 0 0 10px rgba(139,105,20,0.1);
    transition: background-color 0.5s ease, border-color 0.5s ease;
}
body.day-mode .content-card {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(150, 150, 150, 0.4);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
}

.card-subtitle {
    color: #d4a843;
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 10px;
}
.card-description {
    color: #a89878;
    font-size: 0.9em;
    margin-bottom: 10px;
}

.options-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.option-button {
    background: rgba(139,105,20,0.15);
    border: 1px solid rgba(139,105,20,0.4);
    color: #c0a878;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap; /* 防止文字换行 */
}
.option-button:hover {
    background: rgba(139,105,20,0.3);
    border-color: #d4a843;
    color: #f0e0c0;
    box-shadow: 0 0 6px rgba(139,105,20,0.6);
}
.option-button.selected {
    background: #8b2030;
    color: #f0e0c0;
    border-color: #e8a0a0;
    box-shadow: 0 0 8px rgba(139,32,48,0.6);
}

/* 表单组 */
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    color: #d4a843;
    font-size: 1em;
    margin-bottom: 6px;
    display: block;
}
.form-group input[type="text"],
.form-group input[type="number"] {
    width: calc(100% - 28px); /* 减去padding和border */
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(139,105,20,0.3);
    border-radius: 8px;
    padding: 10px 14px;
    color: #e8d5b0;
    font-size: 1em;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}
.form-group input[type="text"]::placeholder,
.form-group input[type="number"]::placeholder {
    color: #8b7355;
}
.form-group input[type="text"]:focus,
.form-group input[type="number"]:focus {
    outline: none;
    border-color: #d4a843;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 8px rgba(139,105,20,0.6);
}
body.day-mode .form-group input[type="text"],
body.day-mode .form-group input[type="number"] {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(150, 150, 150, 0.4);
    color: #333;
}
body.day-mode .form-group input[type="text"]::placeholder,
body.day-mode .form-group input[type="number"]::placeholder {
    color: #999;
}


/* 私密特征组 */
.feature-group {
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
}
.feature-group.female {
    background: rgba(139,32,48,0.15);
    border: 1px solid rgba(139,32,48,0.3);
}
.feature-group.male {
    background: rgba(60,80,120,0.15);
    border: 1px solid rgba(60,80,120,0.3);
}
.feature-group .feature-title {
    color: #e8a0a0; /* 默认女性红色 */
    font-size: 0.9em;
    margin-bottom: 6px;
}
.feature-group.male .feature-title {
    color: #a0b8d0; /* 男性蓝色 */
}

/* 预览文本区 */
.preview-textarea {
    width: calc(100% - 30px);
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(139,105,20,0.3);
    border-radius: 8px;
    padding: 14px;
    color: #e8d5b0;
    font-size: 1em;
    resize: vertical;
    min-height: 120px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}
body.day-mode .preview-textarea {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(150, 150, 150, 0.4);
    color: #333;
}

/* 动作按钮组 */
.action-buttons-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}
.action-button {
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    border: none;
    white-space: nowrap; /* 防止按钮文字换行 */
}
.action-button.primary {
    background: #8b2030;
    color: #f0e0c0;
    border: 1px solid #e8a0a0;
}
.action-button.primary:hover {
    background: #a03040;
    box-shadow: 0 6px 15px rgba(139,32,48,0.5);
}
.action-button.secondary {
    background: #d4a843;
    color: #1a0a0a;
    border: 1px solid #f0e0c0;
}
.action-button.secondary:hover {
    background: #e0b853;
    box-shadow: 0 6px 15px rgba(139,105,20,0.5);
}
.action-button.tertiary {
    background: #555; /* 复制按钮颜色稍低调 */
    color: #f0e0c0;
    border: 1px solid #999;
}
.action-button.tertiary:hover {
    background: #666;
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}

/* 复制反馈 */
.copy-feedback {
    background: #28a745;
    color: #fff;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 0.9em;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: absolute;
    bottom: -40px; /* 定位在按钮组下方 */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    white-space: nowrap;
    pointer-events: none; /* 防止遮挡点击 */
}
.copy-feedback.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 页脚 */
.page-footer {
    text-align: center;
    margin-top: 30px;
    color: #8b7355;
    font-size: 0.9em;
}

/* 昼夜模式切换按钮 */
.theme-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.2em;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    z-index: 100;
}
.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}
body.day-mode .theme-toggle {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.4);
}
body.day-mode .theme-toggle:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

/* ================== 开场动画 ================== */
.intro-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0a0a0a 0%, #1c0c0e 50%, #0a0a0a 100%);
    color: #e8d5b0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
    opacity: 1;
    visibility: visible;
    transition: opacity 1s ease-out, visibility 1s ease-out;
}
.intro-animation.hidden {
    opacity: 0;
    visibility: hidden;
}
.intro-content {
    text-align: center;
    animation: fadeInScale 2s ease-out forwards;
}
.intro-content h1 {
    font-size: 3em;
    letter-spacing: 10px;
    margin-bottom: 20px;
    color: #f0e0c0;
    text-shadow: 0 0 15px rgba(139,105,20,0.8);
}
.intro-content p {
    font-size: 1.2em;
    margin-bottom: 40px;
    color: #a89878;
}
.intro-animation #skipIntro {
    background: #8b2030;
    color: #f0e0c0;
    border: 1px solid #e8a0a0;
    padding: 12px 30px;
    border-radius: 30px;
    font-size: 1.1em;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    animation: fadeIn 1s ease-out 1.5s forwards; /* 延迟出现 */
}
.intro-animation #skipIntro:hover {
    background: #a03040;
    box-shadow: 0 0 15px rgba(139,32,48,0.7);
}

@keyframes fadeInScale {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


/* ================== 全局动态漂浮物 (不遮挡内容) ================== */
.global-floating-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 确保不阻挡鼠标事件 */
    overflow: hidden;
    z-index: 1; /* 在内容下方 */
}

/* 漂浮物基础样式 */
.global-floating-elements::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><circle cx="5" cy="5" r="2" fill="rgba(212,168,67,0.1)"/></svg>'), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15"><path d="M7.5 0 L15 15 L0 15 Z" fill="rgba(139,32,48,0.08)"/></svg>'); /* 小型圆形和三角形 */
    background-repeat: repeat;
    background-size: 200px 200px, 300px 300px;
    animation: floatEffect 60s linear infinite;
    filter: blur(1px); /* 模糊效果 */
    opacity: 0.8;
}
body.day-mode .global-floating-elements::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><circle cx="5" cy="5" r="2" fill="rgba(0,0,0,0.05)"/></svg>'), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15"><path d="M7.5 0 L15 15 L0 15 Z" fill="rgba(0,0,0,0.03)"/></svg>');
}

@keyframes floatEffect {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 1000px 1000px, -1000px -1000px; } /* 更长的位移 */
}


/* ================== 天气背景 ================== */
.weather-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5; /* 在漂浮物之上，内容之下 */
    opacity: 0.7;
    transition: opacity 1s ease;
}

/* 雨滴效果 */
.weather-overlay.rain-effect {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAAXNSR0IArs4c6QAAAHBJREFUGFdjYPj/P38GIAuI+FhAYuAEPxMDBxAzMgEw/P/PwMDw/P8bGP7/MTAwMDD8/xkwGPw/MPj//19AAsDg//9wYGBgYOB+YGD4/wGBoKiooJGBgYGBAQMDw/M/BgZGBobGMzCwMDAwAAD6S4hZkC0Q4AAAAABJRU5ErkJggg=='); /* 小雨滴 */
    background-size: 10px 10px; /* 调整雨滴大小 */
    animation: rain 0.8s linear infinite;
}
@keyframes rain {
    0% { background-position: 0 0; }
    100% { background-position: 20px 100px; } /* 控制雨滴方向和速度 */
}

/* 雪花效果 */
.weather-overlay.snow-effect {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0AdFcPfgAAAAYSURBVBhXY/h/PwMIAAUwAAJ/QnQfAAAAAElFTkSuQmCC'); /* 白色小点代表雪花 */
    background-size: 15px 15px;
    animation: snow 10s linear infinite;
}
@keyframes snow {
    0% { background-position: 0 0; }
    100% { background-position: 50px 500px; }
}

/* 星空效果 (夜间模式默认) */
.weather-overlay.star-effect {
    background: transparent; /* 确保不覆盖夜间背景 */
}
.weather-overlay.star-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 10% 20%, rgba(255,255,255,0.8) 1px, transparent 1px),
                      radial-gradient(circle at 30% 60%, rgba(255,255,255,0.7) 0.8px, transparent 0.8px),
                      radial-gradient(circle at 70% 40%, rgba(255,255,255,0.9) 1.2px, transparent 1.2px),
                      radial-gradient(circle at 90% 80%, rgba(255,255,255,0.6) 0.9px, transparent 0.9px);
    background-size: 200px 200px; /* 更细密的星点 */
    animation: twinkle 20s linear infinite;
    opacity: 0.8;
}

@keyframes twinkle {
    0% { background-position: 0 0; }
    100% { background-position: 500px 500px; }
}

/* 晴天 (无特殊效果，或轻微光晕) */
.weather-overlay.clear-effect {
    background-image: none;
    opacity: 0.3;
    /* 可以添加一个轻微的，缓慢的颜色渐变或光晕动画 */
    /* background: radial-gradient(circle at 50% 20%, rgba(255,255,200,0.1) 0%, transparent 50%);
    animation: subtleGlow 30s ease-in-out infinite alternate; */
}
/* @keyframes subtleGlow {
    0% { opacity: 0.2; }
    100% { opacity: 0.4; }
} */


/* ================== 媒体查询 (响应式) ================== */
@media (max-width: 768px) {
    .main-container {
        width: 95%;
        padding: 20px 15px;
        margin: 20px 0;
    }
    .page-header .title-main {
        font-size: 1.8em;
        letter-spacing: 5px;
    }
    .page-header .title-sub {
        font-size: 0.8em;
        letter-spacing: 3px;
    }
    .tab-navigation {
        flex-direction: column; /* 垂直排列 */
        align-items: stretch;
    }
    .tab-navigation .tab-button {
        max-width: none; /* 填满宽度 */
        margin: 4px 0;
    }
    .action-buttons-group {
        flex-direction: column;
        gap: 10px;
    }
    .action-button {
        width: 100%;
        box-sizing: border-box; /* 包含padding和border */
    }
    .intro-content h1 {
        font-size: 2em;
        letter-spacing: 5px;
    }
    .intro-content p {
        font-size: 1em;
    }
    .theme-toggle {
        top: 10px;
        right: 10px;
        width: 35px;
        height: 35px;
        font-size: 1em;
    }
}


document.addEventListener('DOMContentLoaded', () => {
    // --- 0. 可跳过的开场动画 ---
    const introAnimation = document.getElementById('introAnimation');
    const skipIntroButton = document.getElementById('skipIntro');

    skipIntroButton.addEventListener('click', () => {
        introAnimation.classList.add('hidden');
        // 动画结束后移除元素，释放资源
        introAnimation.addEventListener('transitionend', () => {
            introAnimation.remove();
        }, { once: true });
    });

    // 假设开场动画在2秒后自动隐藏（如果用户不跳过）
    // 或者你可以选择只让用户手动跳过
    setTimeout(() => {
        if (!introAnimation.classList.contains('hidden')) {
             introAnimation.classList.add('hidden');
             introAnimation.addEventListener('transitionend', () => {
                introAnimation.remove();
            }, { once: true });
        }
    }, 3000); // 3秒后自动隐藏，给用户一点时间看内容

    // --- 1. 标签切换功能 ---
    const tabButtons = document.querySelectorAll('.tab-navigation .tab-button');
    const tabContents = document.querySelectorAll('.tab-content');

    tabButtons.forEach(button => {
        button.addEventListener('click', () => {
            // 移除所有按钮的 active 状态
            tabButtons.forEach(btn => btn.classList.remove('active'));
            // 隐藏所有内容
            tabContents.forEach(content => content.classList.remove('active'));

            // 激活当前点击的按钮
            button.classList.add('active');
            // 显示对应的内容
            const targetTab = button.dataset.tab;
            document.getElementById(targetTab).classList.add('active');
        });
    });

    // 默认激活第一个标签
    if (tabButtons.length > 0) {
        tabButtons[0].click();
    }


    // --- 2. 角色信息表单选择 (单选逻辑) ---
    const selectCharOptions = document.querySelectorAll('.select-char-option');

    selectCharOptions.forEach(button => {
        button.addEventListener('click', () => {
            const category = button.dataset.category;
            const parentGroup = button.closest('.options-group');

            // 移除同类别中其他按钮的 selected 状态
            if (parentGroup) {
                parentGroup.querySelectorAll(`.select-char-option[data-category="${category}"]`).forEach(btn => {
                    btn.classList.remove('selected');
                });
            }
            // 激活当前按钮
            button.classList.add('selected');
        });
    });


    // --- 3. 随机角色信息 和 开场白生成 ---
    const charNameInput = document.getElementById('charName');
    const charAgeInput = document.getElementById('charAge');
    const randomizeCharacterButton = document.getElementById('randomizeCharacter');
    const previewOpeningButton = document.getElementById('previewOpening');
    const openingLinePreview = document.getElementById('openingLinePreview');

    const randomNames = ["莉莉娅", "艾米丽", "安娜", "林语", "张伟", "李明", "约翰", "玛丽"];
    const randomAges = Array.from({length: 30}, (_, i) => i + 18); // 18-47岁
    const randomBodyShapes = ["娇小纤细", "匀称标准", "丰满圆润", "高挑健美"];
    const randomFemalePrivate = ["紧致敏感", "花唇肥厚", "阴蒂突出", "处女"];
    const randomMalePrivate = ["粗大", "标准", "短小"];
    const randomOccupations = ["学生", "白领", "教师", "护士", "模特", "家庭主妇", "程序员", "艺术家"];

    function getRandomItem(arr) {
        return arr[Math.floor(Math.random() * arr.length)];
    }

    function generateRandomCharacter() {
        // 清空输入框
        charNameInput.value = '';
        charAgeInput.value = '';

        // 随机选择各项，并模拟点击以激活样式
        const randomBody = getRandomItem(randomBodyShapes);
        selectOptionAndClick('bodyShape', randomBody);

        // 随机选择性别及私密特征
        const isFemale = Math.random() > 0.5;
        if (isFemale) {
            selectOptionAndClick('privateFemale', getRandomItem(randomFemalePrivate));
            // 隐藏男性特征，显示女性特征
            document.querySelector('.feature-group.male').style.display = 'none';
            document.querySelector('.feature-group.female').style.display = 'block';
        } else {
            selectOptionAndClick('privateMale', getRandomItem(randomMalePrivate));
            // 隐藏女性特征，显示男性特征
            document.querySelector('.feature-group.female').style.display = 'none';
            document.querySelector('.feature-group.male').style.display = 'block';
        }

        const randomOcc = getRandomItem(randomOccupations);
        selectOptionAndClick('occupation', randomOcc);
    }

    // 辅助函数，用于模拟点击并设置选中状态
    function selectOptionAndClick(category, value) {
        const button = document.querySelector(`.select-char-option[data-category="${category}"][data-value="${value}"]`);
        if (button) {
            // 确保先清除同类别的选中状态
            const parentGroup = button.closest('.options-group');
            if (parentGroup) {
                parentGroup.querySelectorAll(`.select-char-option[data-category="${category}"]`).forEach(btn => {
                    btn.classList.remove('selected');
                });
            }
            button.classList.add('selected');
        }
    }


    randomizeCharacterButton.addEventListener('click', generateRandomCharacter);

    // 首次加载时自动生成一次，提供默认状态
    generateRandomCharacter();

    // 随机生成器（Roll天赋六选一） - 简化为随机分配特质
    // 由于天赋系统未在HTML中体现，这里用角色特质代替
    const randomTraits = [
        "极度敏感", "意志坚定", "好奇心重", "胆小懦弱", "渴望被征服", "反抗精神强烈",
        "天真无邪", "阅历丰富", "身体柔韧", "痛感迟钝", "易于顺从", "心思缜密"
    ];

    function generateOpeningLine() {
        const name = charNameInput.value || getRandomItem(randomNames);
        const age = charAgeInput.value || getRandomItem(randomAges);
        const bodyShape = document.querySelector('.select-char-option[data-category="bodyShape"].selected')?.dataset.value || getRandomItem(randomBodyShapes);
        const occupation = document.querySelector('.select-char-option[data-category="occupation"].selected')?.dataset.value || getRandomItem(randomOccupations);

        let privateFeature = '';
        const femalePrivateSelected = document.querySelector('.select-char-option[data-category="privateFemale"].selected');
        const malePrivateSelected = document.querySelector('.select-char-option[data-category="privateMale"].selected');

        if (femalePrivateSelected && femalePrivateSelected.offsetParent !== null) { // offsetParent !== null 检查是否可见
            privateFeature = femalePrivateSelected.dataset.value;
        } else if (malePrivateSelected && malePrivateSelected.offsetParent !== null) {
            privateFeature = malePrivateSelected.dataset.value;
        } else { // 如果都没有可见的选中项，则随机一个
            if (Math.random() > 0.5) {
                 privateFeature = getRandomItem(randomFemalePrivate);
            } else {
                 privateFeature = getRandomItem(randomMalePrivate);
            }
        }

        // 随机选择6个特质中的一个作为主要特质
        const primaryTrait = getRandomItem(randomTraits);

        const opening = `
角色姓名：${name}
角色年龄：${age}
身材特征：${bodyShape}
私密特征：${privateFeature}
职业身份：${occupation}
核心特质：${primaryTrait}

开场白：
“我叫${name}，今年${age}岁，曾是一名${occupation}。我从未想过自己会与‘虐阴协会’产生任何交集。直到那一天，当${privateFeature}的我在灯红酒绿中被盯上，我的${bodyShape}身体，便被卷入了一场无法逃脱的命运漩涡。我的内心充满了${primaryTrait}的矛盾，但这里，似乎没有人能听到我的呼救……”
        `;
        openingLinePreview.value = opening.trim();
    }

    previewOpeningButton.addEventListener('click', generateOpeningLine);


    // --- 4. 复制角色信息按钮 ---
    const copyCharacterInfoButton = document.getElementById('copyCharacterInfo');
    const copyFeedback = document.getElementById('copyFeedback');

    copyCharacterInfoButton.addEventListener('click', async () => {
        if (openingLinePreview.value) {
            try {
                await navigator.clipboard.writeText(openingLinePreview.value);
                copyFeedback.classList.add('show');
                setTimeout(() => {
                    copyFeedback.classList.remove('show');
                }, 1500);
            } catch (err) {
                alert('复制失败，请手动复制: ' + err);
            }
        } else {
            alert('请先生成角色信息和开场白！');
        }
    });


    // --- 5. 动态变化的天气背景 (雨、雪、晴、星空) ---
    const weatherOverlay = document.querySelector('.weather-overlay');
    const weatherEffects = ['rain-effect', 'snow-effect', 'clear-effect', 'star-effect']; // star-effect只在夜间模式有视觉效果

    function changeWeather() {
        // 清除所有天气效果
        weatherEffects.forEach(effect => weatherOverlay.classList.remove(effect));

        // 随机选择一种天气
        const randomEffect = getRandomItem(weatherEffects);
        weatherOverlay.classList.add(randomEffect);

        // 如果是晴天，可以稍微调低透明度，让背景更明显
        if (randomEffect === 'clear-effect') {
            weatherOverlay.style.opacity = '0.1';
        } else {
            weatherOverlay.style.opacity = '0.7';
        }

        // 星空效果只在夜间模式有意义
        if (randomEffect === 'star-effect' && document.body.classList.contains('day-mode')) {
            weatherOverlay.classList.remove('star-effect'); // 移除星空效果
            weatherOverlay.classList.add('clear-effect'); // 切换到晴天效果
            weatherOverlay.style.opacity = '0.1';
        }
    }

    // 每隔一段时间切换天气
    setInterval(changeWeather, 20000); // 每20秒切换一次天气
    changeWeather(); // 页面加载时立即设置一次天气


    // --- 6. 昼夜模式主题切换 ---
    const themeToggle = document.getElementById('themeToggle');

    themeToggle.addEventListener('click', () => {
        document.body.classList.toggle('day-mode');
        document.body.classList.toggle('night-mode');

        const isDayMode = document.body.classList.contains('day-mode');
        themeToggle.textContent = isDayMode ? '🌙' : '☀️';

        // 切换模式时，重新应用天气效果，确保星空/晴天等逻辑正确
        changeWeather();
    });

    // 初始设置昼夜模式按钮文本
    themeToggle.textContent = document.body.classList.contains('day-mode') ? '🌙' : '☀️';


    // --- 路线选择点击事件，用于跳转到角色配置页 ---
    const routeOptions = document.querySelectorAll('.route-option');
    routeOptions.forEach(option => {
        option.addEventListener('click', () => {
            // 首先取消所有路线的选中状态
            routeOptions.forEach(btn => btn.classList.remove('selected'));
            // 选中当前点击的路线
            option.classList.add('se

