/* ==========================================================================
   霓虹深渊主题：巨型自定义加载界面 (包含指定图片、伪进度条与游玩提示)
   ========================================================================== */

/* 1. 强制隐藏平台默认的无聊闪烁小圆点 */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
    display: none !important;
}

/* 2. 重塑加载元素的父容器：将其撑开为一个巨大的画布 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 100% !important;
    min-width: 300px !important;
    height: 420px !important; /* 分配足够的高度容纳巨幅图片和底部进度条 */
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 20px 0 !important;
}

/* 3. 上半部分 (::before)：居中展示您指定的巨幅图片 */
.flex.items-center.justify-center.w-6.h-5::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 260px !important; /* 为图片保留的高度 */
    /* 强力插入您指定的图片URL */
    background-image: url('https://catai.wiki/08c67ad0-218b-4ca9-8906-10d11b9bdf00/w=3000') !important;
    background-size: contain !important; /* 确保图片完整显示不被裁剪 */
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    z-index: 1 !important;
    /* 添加轻微的呼吸律动感 */
    animation: neon-pulse-img 2s infinite alternate ease-in-out !important;
    filter: drop-shadow(0px 5px 10px rgba(0,0,0,0.1)) !important;
}

@keyframes neon-pulse-img {
    0% { transform: scale(0.98); opacity: 0.9; }
    100% { transform: scale(1); opacity: 1; }
}

/* 4. 下半部分 (::after)：内嵌SVG实现高能提示框与霓虹伪进度条动画 */
.flex.items-center.justify-center.w-6.h-5::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 150px !important; /* 为提示文字和进度条保留的高度 */
    z-index: 2 !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: 100% 100% !important;
    /* 
       将复杂的排版和SMIL动画封装在Data URI中。
       包含：虚线边框信息牌、警告文字、深色轨道、霓虹渐变进度条(SMIL控制width) 
    */
    background-image: url("data:image/svg+xml;utf8,<svg width='100%' height='150' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='g' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' stop-color='%23FF1493' /><stop offset='50%' stop-color='%23FFE135' /><stop offset='100%' stop-color='%2305d9e8' /></linearGradient></defs><rect x='2%' y='5' width='96%' height='65' fill='%23fffdf0' rx='4' stroke='%23111' stroke-width='2' stroke-dasharray='4 4'/><rect x='2%' y='5' width='6' height='65' fill='%23FF1493' rx='2'/><text x='50%' y='28' font-family='sans-serif' font-size='14' fill='%23111' text-anchor='middle' font-weight='bold'> ⚠️建议 <tspan fill='%23FF1493' font-size='16'>2-4</tspan> 记忆游玩，下方快捷键按需使用</text><text x='50%' y='52' font-family='sans-serif' font-size='13' fill='%23666' text-anchor='middle'>若遇截断请开 <tspan fill='%2305d9e8' font-weight='bold'>非流</tspan> 或切换至 <tspan fill='%2305d9e8' font-weight='bold'>DeepSeek</tspan> 模型</text><rect x='10%' y='90' width='80%' height='20' fill='%23222' rx='10' stroke='%23111' stroke-width='3'/><rect x='10%' y='90' width='0' height='20' fill='url(%23g)' rx='10'><animate attributeName='width' values='0; 80%; 80%' keyTimes='0; 0.8; 1' dur='3.5s' repeatCount='indefinite' /></rect><text x='50%' y='135' font-family='sans-serif' font-size='16' fill='%23111' text-anchor='middle' font-weight='900' letter-spacing='3'>SCENE LOADING...<animate attributeName='opacity' values='1;0.3;1' dur='1.5s' repeatCount='indefinite'/></text></svg>") !important;
}

/* 5. 移动端小屏幕微调适配 */
@media (max-width: 480px) {
    .flex.items-center.justify-center.w-6.h-5 {
        height: 380px !important;
    }
    .flex.items-center.justify-center.w-6.h-5::before {
        height: 220px !important;
    }
}

/* =========================================
   手账剪报风 - 状态栏美化
========================================= */
c-ui {
    display: block;
    font-family: "Comic Sans MS", "Pangolin", "PingFang SC", cursive, sans-serif;
    background-color: #fdfbf7; /* 暖白纸张底色 */
    /* 去除波点，改为淡淡的信纸横纹 */
    background-image: linear-gradient(transparent 95%, rgba(253, 203, 110, 0.4) 95%);
    background-size: 100% 26px;
    color: #2d3436; /* 极高对比度深灰/黑 */
    border: 3px solid #2d3436;
    border-radius: 12px 12px 12px 2px;
    padding: 25px 12px 15px 12px; /* 顶部留出胶带空间 */
    box-shadow: 8px 8px 0 #fdcb6e;
    max-width: 100%;
    margin: 15px auto;
    position: relative;
    line-height: 1.6;
}

/* 顶部的布基胶带装饰 */
c-ui::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    width: 90px;
    height: 30px;
    background-color: rgba(253, 203, 110, 0.9);
    border-left: 2px dashed rgba(0,0,0,0.3);
    border-right: 2px dashed rgba(0,0,0,0.3);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 10;
}

/* 头部时间地点标签 */
c-ui hd {
    display: flex;
    justify-content: space-between;
    background: #fff;
    border: 3px dashed #fd79a8;
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: 900;
    font-size: 14px;
    margin-bottom: 15px;
    transform: rotate(1deg);
    box-shadow: 4px 4px 0 rgba(0,0,0,0.05);
}
c-ui hd t { color: #d63031; }
c-ui hd l { color: #0984e3; }

/* 正文小说内容 */
c-ui txt {
    display: block;
    padding: 15px 5px;
    font-size: 16px;
    font-weight: bold;
    color: #2d3436;
    line-height: 1.8;
}

/* 各大便签模块基础样式 */
c-ui details {
    background: #fff;
    border: 3px solid #2d3436;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

/* 便签标题栏 */
c-ui summary {
    padding: 10px 15px;
    font-weight: 900;
    font-size: 15px;
    cursor: pointer;
    border-bottom: 3px solid #2d3436;
    user-select: none;
    outline: none;
    color: #2d3436; /* 统一深色字保证绝对可读 */
}
c-ui details[open] summary {
    border-bottom: 3px dashed #2d3436;
}

/* 丰富的马卡龙配色区分不同模块 */
c-ui .sys summary { background: #dfe6e9; } /* 灰 */
c-ui .nw summary { background: #81ecec; }  /* 青 */
c-ui .u summary { background: #74b9ff; }   /* 蓝 */
c-ui .c summary { background: #fd79a8; }   /* 粉 */
c-ui .th summary { background: #ffeaa7; }  /* 黄 */
c-ui .w summary { background: #a29bfe; }   /* 紫 */
c-ui .m summary { background: #fab1a0; }   /* 橘 */
c-ui .o summary { background: #fdcb6e; }   /* 橙 */

/* 键值对属性行 */
c-ui d {
    display: flex;
    padding: 8px 12px;
    border-bottom: 1px dashed #b2bec3;
    align-items: flex-start;
}
c-ui d:last-child { border-bottom: none; }

/* 属性标签 (如：姓名、外表) */
c-ui f {
    background: #2d3436;
    color: #fff;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 900;
    font-size: 13px;
    margin-right: 10px;
    white-space: nowrap;
    transform: rotate(-2deg);
    box-shadow: 2px 2px 0 #fdcb6e;
}

/* 属性内容 */
c-ui span {
    flex: 1;
    font-weight: bold;
    color: #2d3436;
    font-size: 14px;
    line-height: 1.5;
}

/* 妹妹的笔记区域 */
c-ui q {
    display: block;
    background: #fff0f6;
    padding: 15px;
    margin: 15px;
    border-radius: 8px;
    border: 3px dashed #fd79a8;
    font-weight: bold;
    color: #2d3436;
    font-size: 14px;
    position: relative;
}
c-ui q::before {
    content: "📌";
    position: absolute;
    top: -10px;
    left: -10px;
    font-size: 20px;
}
c-ui q b { color: #d63031; font-size: 15px; }

/* 好感度条模块 */
c-ui lv {
    display: block;
    margin: 15px;
    padding: 15px;
    background: #fff;
    border: 3px solid #2d3436;
    border-radius: 10px;
    box-shadow: 4px 4px 0 #fd79a8;
}
c-ui .lv-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    align-items: baseline;
    flex-wrap: wrap;
}
c-ui .lv-info b { font-size: 15px; color: #2d3436; font-weight: 900; }
c-ui .lv-info span { font-size: 16px; color: #d63031; font-weight: 900; }
c-ui .lv-info i { font-size: 12px; color: #636e72; font-style: normal; width: 100%; margin-top: 4px; }
c-ui bar {
    display: block;
    height: 16px;
    background: #dfe6e9;
    border: 2px solid #2d3436;
    border-radius: 8px;
    overflow: hidden;
}
c-ui bar::after {
    content: "";
    display: block;
    height: 100%;
    width: var(--v);
    background: repeating-linear-gradient(45deg, #fd79a8, #fd79a8 10px, #e84393 10px, #e84393 20px);
    transition: width 0.5s ease;
}

/* 命运分歧选项按钮 */
c-ui .o p {
    background: #fff;
    border: 3px solid #2d3436;
    margin: 12px 15px;
    padding: 12px 15px;
    border-radius: 10px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 4px 4px 0 #fdcb6e;
    color: #2d3436;
    transition: all 0.1s;
    font-size: 14px;
}
c-ui .o p::before {
    content: "👉";
    margin-right: 8px;
}
c-ui .o p:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 #fdcb6e;
}

/* 记忆笔记说明区与子折叠面板 */
c-ui mr {
    display: block;
    font-size: 12px;
    color: #2d3436;
    background: #f1f2f6;
    padding: 10px;
    margin: 15px;
    border-radius: 6px;
    border: 2px dashed #b2bec3;
    font-weight: bold;
}
c-ui .sm {
    margin: 0 15px 15px 15px;
    border: 2px dashed #2d3436;
    box-shadow: none;
}
c-ui .sm summary {
    background: #fff;
    border-bottom: 2px dashed #2d3436;
    font-size: 14px;
}
c-ui .sm p {
    padding: 10px 15px;
    font-size: 13px;
    font-weight: bold;
    color: #2d3436;
    margin: 0;
}