【9nine】异能都市大世界1.0/ROLL能力/大世界探索/还原原著/超全世界书

/* --- 0. 基础共享结构 (所有人都长这样) --- */
text say, text s1, text s2, text s3, text s4 {
    display: block !important;
    position: relative !important;
    background-color: #fff !important;      /* 统一白底，干净 */
    border-radius: 12px !important;
    border-top-left-radius: 2px !important;
    padding: 10px 16px !important;
    margin: 12px 0 12px 10px !important;
    font-weight: bold !important;
    font-size: 1.05em !important;
    color: #444 !important;
    border-width: 2px !important;           /* 边框厚度 */
    border-style: solid !important;
}

/* --- 0.1 基础小尾巴形状 (不用动) --- */
text say::before, text s1::before, text s2::before, text s3::before, text s4::before {
    content: "" !important;
    position: absolute !important;
    top: 12px !important; left: -8px !important;
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
    border-right-width: 8px !important;
    border-right-style: solid !important;
}
/* --- 0.2 遮挡线 (让边框看起来连贯) --- */
text say::after, text s1::after, text s2::after, text s3::after, text s4::after {
    content: "" !important;
    position: absolute !important;
    top: 12px !important; left: -5px !important;
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
    border-right: 8px solid #fff !important; /* 跟背景色一致 */
}

/* ========================================================================= */
/* ★★★ 1. 路人/普通角色 (<say>) - 极简灰 ★★★ */
/* ========================================================================= */
text say {
    border-color: #888 !important;  /* 灰色边框 */
    box-shadow: 4px 4px 0px rgba(136, 136, 136, 0.3) !important;
}
text say::before { border-right-color: #888 !important; }

/* ========================================================================= */
/* ★★★ 2. 女主A (<s1>) - 傲娇红/活力红 ★★★ */
/* ========================================================================= */
text s1 {
    border-color: #FF6B6B !important; /* 珊瑚红 */
    box-shadow: 4px 4px 0px rgba(255, 107, 107, 0.4) !important;
}
text s1::before { border-right-color: #FF6B6B !important; }

/* ========================================================================= */
/* ★★★ 3. 女主B (<s2>) - 冰山蓝/知性蓝 ★★★ */
/* ========================================================================= */
text s2 {
    border-color: #4D96FF !important; /* 天空蓝 */
    box-shadow: 4px 4px 0px rgba(77, 150, 255, 0.4) !important;
}
text s2::before { border-right-color: #4D96FF !important; }

/* ========================================================================= */
/* ★★★ 4. 女主C (<s3>) - 元气黄/富家金 ★★★ */
/* ========================================================================= */
text s3 {
    border-color: #FFD93D !important; /* 柠檬黄 */
    box-shadow: 4px 4px 0px rgba(255, 217, 61, 0.4) !important;
    color: #5d4037 !important; /* 黄色背景配深棕色字更好看 */
}
text s3::before { border-right-color: #FFD93D !important; }

/* ========================================================================= */
/* ★★★ 5. 女主D (<s4>) - 神秘紫/成熟紫 ★★★ */
/* ========================================================================= */
text s4 {
    border-color: #9D4EDD !important; /* 兰花紫 */
    box-shadow: 4px 4px 0px rgba(157, 78, 221, 0.4) !important;
}
text s4::before { border-right-color: #9D4EDD !important; }
/* ========================================================================= */

text {
    /* 1. 强制块级显示，确保盒子属性生效 */
    display: block !important;
    position: relative !important;
    
    /* 2. 字体设置：可爱圆润风 */
    /* 优先尝试幼圆(Win)，其次是圆体(Mac)，最后是无衬线 */
    font-family: "YouYuan", "幼圆", "Yu Yuan", "Varela Round", "Microsoft YaHei", sans-serif !important;
    font-size: 15px !important; /* 稍微大一点点，看着不累 */
    line-height: 1.8 !important; /* 宽松的行高，呼吸感 */
    color: #5d5d5d !important;   /* 深灰褐色，比纯黑更温柔 */
    letter-spacing: 0.5px !important;
    
    /* 3. 容器外观：波点卡片 */
    background-color: #ffffff !important;
    /* 极淡的灰色波点背景，增加“萌”的质感 */
    background-image: radial-gradient(#f3f3f3 20%, transparent 20%) !important;
    background-size: 12px 12px !important;
    
    /* 4. 边框与圆角 */
    border-radius: 12px !important; /* 大圆角 */
    padding: 20px 22px !important;  /* 舒适的内边距 */
    margin: 15px 0 !important;      /* 上下留白 */
    
    /* 5. 阴影：轻微浮起 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0,0,0,0.02) !important;
    
    /* 6. 交互微动效 */
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* 鼠标悬停时微微上浮，更有游戏感 */
text:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
}

/* ========================================================================= */
/* ★★★ 9-nine 灵魂注入：顶部四色装饰条 ★★★ */
/* ========================================================================= */
text::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 12px !important; /* 稍微往里缩一点，更精致 */
    right: 12px !important;
    height: 4px !important;
    
    /* 9-nine 四女主配色渐变 */
    /* 黄(都) -> 蓝(天) -> 粉(春风) -> 红(希亚) */
    background: linear-gradient(to right, 
        #F2D685 0%, #F2D685 25%, 
        #A0C6F0 25%, #A0C6F0 50%, 
        #F4A6D7 50%, #F4A6D7 75%, 
        #E04F4F 75%, #E04F4F 100%
    ) !important;
    
    /* 下圆角，让彩条看起来像贴在上面的胶带 */
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    opacity: 0.9 !important;
}

/* 适配：如果正文里有段落P标签，去除默认边距，防止撑开 */
text p {
    margin: 0 0 10px 0 !important;
}
text p:last-child {
    margin-bottom: 0 !important;
}
/* 1. 隐藏默认加载点 */
.style_dot-flashing__8L91Q.style_text__zGhNq { display: none !important; }

/* 2. 容器重构：自适应高度 + Galgame 对话框风格 */
.flex.items-center.justify-center.w-6.h-5 {
    /* 布局重置 (沿用你提供的稳健结构) */
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 80px !important; /* 预留足够高度 */
    margin: 10px 0 !important;
    padding: 0 !important;
    
    /* 9-nine 风格外观基础 */
    background-color: #ffffff;
    border: 2px solid #F2D685; /* 初始颜色 (九条都) */
    border-radius: 8px; /* 圆润一点，符合画风 */
    
    /* 关键：防止溢出 */
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* 轻微浮起感 */
    
    /* 1. 容器边框与背景动画 (18s = 3s * 6句) */
    animation: nine-container-cycle 18s step-end infinite !important;
}

/* 3. 顶部装饰条：角色名标签 (左上角) */
.flex.items-center.justify-center.w-6.h-5::before {
    content: "九条 都"; /* 初始内容 */
    display: inline-block !important;
    padding: 2px 10px;
    
    /* 标签样式 */
    background-color: #F2D685; /* 初始颜色 */
    color: #ffffff; /* 标签文字永远白色 */
    font-size: 12px;
    font-weight: bold;
    border-bottom-right-radius: 8px; /* 只有右下角圆角，贴合左上 */
    
    /* 防止被外部样式覆盖 */
    line-height: normal !important;
    text-align: center !important;
    
    /* 2. 角色名标签动画 */
    animation: nine-nametag-cycle 18s step-end infinite !important;
}

/* 4. 核心：台词内容区 */
.flex.items-center.justify-center.w-6.h-5::after {
    content: ""; 
    display: block;
    width: 100%;
    padding: 8px 12px 12px 12px; /* 舒适的内边距 */
    
    /* 字体与排版 */
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif !important;
    font-size: 14px;
    line-height: 1.6;
    color: #555555; /* 默认深灰字体 */
    text-align: left !important;
    
    /* ★★★ 关键：强制换行 (沿用你的代码) ★★★ */
    white-space: pre-wrap !important; 
    word-wrap: break-word !important;
    word-break: break-word !important;
    
    /* 3. 台词内容动画 */
    animation: nine-quote-cycle 18s step-end infinite !important;
}

/* ========================================================================= */
/* ★★★ 动画关键帧定义 (18秒循环) ★★★ */
/* 0%~16.6%: 九条都 | 16.6%~33.3%: 新海天 | 33.3%~50%: 春风 */
/* 50%~66.6%: 希亚1 | 66.6%~83.3%: 希亚2 | 83.3%~100%: 与一 */
/* ========================================================================= */

/* 1. 容器动画：控制边框颜色 + 与一回合的背景黑化 */
@keyframes nine-container-cycle {
    0%   { border-color: #F2D685; background-color: #ffffff; } /* 九条都 (淡金) */
    16.66% { border-color: #A0C6F0; background-color: #ffffff; } /* 新海天 (淡蓝) */
    33.33% { border-color: #F4A6D7; background-color: #ffffff; } /* 香坂春风 (粉色) */
    50%  { border-color: #E04F4F; background-color: #ffffff; } /* 结城希亚 (赤色) */
    66.66% { border-color: #E04F4F; background-color: #ffffff; } /* 结城希亚 (赤色) */
    83.33% { border-color: #000000; background-color: #1a1a1a; } /* 与一 (黑色+黑底!) */
}

/* 2. 标签动画：控制角色名 + 标签背景色 */
@keyframes nine-nametag-cycle {
    0%   { content: "九条 都"; background-color: #F2D685; }
    16.66% { content: "新海 天"; background-color: #A0C6F0; }
    33.33% { content: "香坂 春风"; background-color: #F4A6D7; }
    50%  { content: "结城 希亚"; background-color: #E04F4F; }
    66.66% { content: "结城 希亚"; background-color: #E04F4F; }
    83.33% { content: "与一";     background-color: #000000; color: #ff0000; } /* 与一名字变红 */
}

/* 3. 台词动画：控制文本内容 + 字体颜色 */
@keyframes nine-quote-cycle {
    0% { 
        content: "“希望你来帮忙，和我一起去抓犯人吧。”"; 
        color: #8a6d1f; /* 深金色 */
    }
    16.66% { 
        content: "“哥哥能不能也这样对我”"; 
        color: #4a6d9e; /* 深蓝色 */
    }
    33.33% { 
        content: "“我只是，单纯地想想而已，没，没关系”"; 
        color: #b05085; /* 深粉色 */
    }
    50% { 
        content: "“我，信任你”"; 
        color: #a32a2a; /* 深赤色 */
    }
    66.66% { 
        content: "“我就在这里…你一定会来接我的吧？”"; 
        color: #a32a2a; /* 深赤色 */
    }
    83.33% { 
        content: "“不论是她、妹妹、九条同学、还是前辈，翔你现在所有珍惜的人，我都要杀掉。”"; 
        color: #e0e0e0; /* ★与一回合：字体变白，配合黑底 */
    }
}

/* 移动端适配 (沿用你的代码逻辑) */
@media (max-width: 768px) {
    .flex.items-center.justify-center.w-6.h-5 {
        min-height: 70px !important;
    }
    .flex.items-center.justify-center.w-6.h-5::after {
        font-size: 13px;
        padding: 6px 10px 10px 10px;
    }
}
/* --- 1. 隐藏顶部默认颜色条 (保持界面清爽) --- */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* --- 2. 聊天框主体美化 (白蓝碗·通透点阵) --- */
.bg-gray-100\/90.relative.inline-block {
    /* 核心底色：极淡的冰蓝白，像白瓷碗的釉面 */
    background-color: #f4f9ff !important;
    
    /* 【点阵核心】 */
    /* 颜色：极浅的天蓝 (rgba(66, 165, 245, 0.12)) */
    /* 效果：比之前更浅，隐约可见的科技感纹理 */
    background-image: radial-gradient(circle at center, rgba(66, 165, 245, 0.12) 1.5px, transparent 1.5px) !important;
    background-size: 14px 14px !important;

    /* 边框设计：微蓝的极细边框 + 左侧海天蓝强调条 */
    border: 1px solid rgba(176, 205, 255, 0.4) !important;
    border-left: 4px solid #5c9ce6 !important; /* 9-nine 风格的蓝色 */
    
    /* 倒角与阴影：带有淡淡蓝色的光晕 */
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(92, 156, 230, 0.12) !important;
    
    /* 内边距与文字颜色 */
    padding: 15px !important;
    color: #2c3e50 !important; /* 深蓝灰色文字，比纯黑更配蓝底 */
}

/* --- 3. 字体与阅读体验优化 --- */
.markdown-body {
    /* 使用深蓝灰，对比度极高且柔和 */
    color: #2c3e50 !important; 
    font-family: "Segoe UI", "Microsoft YaHei", sans-serif !important;
    line-height: 1.6 !important;
    font-weight: 500 !important; /* 稍微加一点点重，让字在浅色背景更清晰 */
    text-shadow: none !important;
}

/* --- 4. 底部小按钮美化 (同步蓝色系) --- */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #90a4ae !important; /* 默认蓝灰色 */
    transition: color 0.3s ease !important;
}

/* 悬停时变为亮蓝 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    color: #5c9ce6 !important;
    background-color: rgba(92, 156, 230, 0.08) !important;
}

/* --- 5. 移除输入框原有的小尾巴 --- */
.bg-gray-100\/90.relative.inline-block::before {
    display: none !important;
}
/* --- 新增：羁绊系统专用样式 (粉色系) --- */
.bond-scan {
    margin-top: 5px;
    padding: 6px;
    border-top: 1px dashed #e91e63; /* 桃红色虚线 */
    background: rgba(233, 30, 99, 0.05); /* 淡淡的粉色背景 */
    color: #f48fb1; /* 浅粉色文字 */
    border-radius: 0 0 4px 4px;
}
.bond-scan b { color: #ff80ab; } /* 标题高亮粉 */
.highlight-pink { 
    color: #ff4081; 
    font-weight: 900; 
    text-shadow: 0 0 

/* 预览已截断；下载 CSS 可查看完整内容。 */

本页只展示本地导出中可核验的公开字段。下载 JSON 可查看完整原始记录。