/* ===================================================
   异世界魔幻风格 · 状态栏主题
   容器: <ai>
   配色: 暗金 / 深紫 / 羊皮纸
   =================================================== */

/* ---------- 基础容器 ---------- */
ai {
    display: block;
    max-width: 780px;
    margin: 12px auto;
    padding: 20px 22px 18px;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(100, 60, 160, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 80%, rgba(180, 140, 60, 0.10) 0%, transparent 60%),
        linear-gradient(145deg, #1a1a2e 0%, #0f0f1e 100%);
    border: 2px solid transparent;
    border-image: linear-gradient(135deg, #c9a96e, #8a6d3b, #c9a96e) 1;
    box-shadow:
        0 0 30px rgba(200, 160, 80, 0.08),
        inset 0 0 60px rgba(0, 0, 0, 0.5);
    border-radius: 0;
    font-family: 'Segoe UI', 'Palatino Linotype', serif;
    color: #d4c5a9;
    line-height: 1.55;
    position: relative;
}

/* 魔幻装饰 — 四角符文 */
ai::before,
ai::after {
    content: "✦";
    position: absolute;
    font-size: 14px;
    color: #c9a96e;
    opacity: 0.35;
    pointer-events: none;
}
ai::before { top: 4px; left: 8px; }
ai::after { bottom: 4px; right: 8px; content: "✦"; }

/* ---------- 头部 ---------- */
hd {
    display: block;
    text-align: center;
    padding: 10px 14px 10px;
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #f5e6c8;
    background: linear-gradient(135deg,
        rgba(200, 160, 80, 0.12) 0%,
        rgba(120, 80, 40, 0.08) 100%);
    border-bottom: 1px solid rgba(200, 160, 80, 0.25);
    border-top: 1px solid rgba(200, 160, 80, 0.15);
    text-shadow: 0 0 12px rgba(200, 160, 80, 0.2);
    word-break: break-all;
}

/* 时间 / 地点 / 天气 分别着色 */
hd::before { content: "⏳ "; color: #7ec8e3; }
hd { color: #d4c5a9; }
hd span { display: inline-block; }

/* ---------- 正文 ---------- */
article {
    display: block;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: rgba(245, 230, 200, 0.06);
    border-left: 3px solid rgba(200, 160, 80, 0.3);
    border-radius: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #e8ddd0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

article p { margin: 6px 0; }

/* ---------- 折叠面板 ---------- */
details {
    display: block;
    margin-top: 8px;
    background: rgba(20, 20, 40, 0.6);
    border: 1px solid rgba(200, 160, 80, 0.15);
    transition: border-color 0.3s;
}
details[open] { border-color: rgba(200, 160, 80, 0.4); }

summary {
    display: block;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #f0e0c0;
    background: linear-gradient(90deg,
        rgba(200, 160, 80, 0.10) 0%,
        rgba(200, 160, 80, 0.03) 100%);
    cursor: pointer;
    user-select: none;
    list-style: none;
    position: relative;
    transition: background 0.3s;
}
summary:hover { background: rgba(200, 160, 80, 0.18); }

/* 自定义折叠箭头 — 符文风格 */
summary::marker { content: ""; display: none; }
summary::before {
    content: "▶";
    display: inline-block;
    margin-right: 12px;
    font-size: 11px;
    color: #c9a96e;
    transition: transform 0.3s;
}
details[open] summary::before { content: "▼"; }

/* ---------- 通用标签重置 ---------- */
f, d, l, c, v {
    display: inline-block;
    font-style: normal;
    font-weight: 400;
}

/* f — 字段标签 */
f {
    color: #c9a96e;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-right: 2px;
}
f::after { content: ""; }

/* d — 字段值 */
d { color: #d4c5a9; }

/* c — 分类标题 */
c {
    display: block;
    margin: 12px 0 6px;
    padding: 4px 0 4px 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #e8c56d;
    border-left: 3px solid #c9a96e;
    background: linear-gradient(90deg,
        rgba(200, 160, 80, 0.08) 0%,
        transparent 100%);
    text-shadow: 0 0 6px rgba(200, 160, 80, 0.15);
}

/* l — 列表项 */
l {
    display: block;
    padding: 2px 0;
    font-size: 14px;
    color: #d4c5a9;
}

/* sub-d — 子描述 */
l.sub-d {
    font-size: 13px;
    color: #b0a090;
    padding-left: 12px;
    border-left: 2px solid rgba(200, 160, 80, 0.15);
    margin: 0 0 6px 0;
    font-style: italic;
}

/* ---------- v 数值 — 核心视觉 ---------- */
v {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    padding: 0 4px;
    transition: all 0.3s;
    position: relative;
}

/* 正向数值颜色映射 (0-100) — 按十位分段 */
v[data-val-range="0-100"]:not([data-inv])[data-val^="0"] { color: #b03a2e; }
v[data-val-range="0-100"]:not([data-inv])[data-val^="1"] { color: #c0392b; }
v[data-val-range="0-100"]:not([data-inv])[data-val^="2"] { color: #d35400; }
v[data-val-range="0-100"]:not([data-inv])[data-val^="3"] { color: #e67e22; }
v[data-val-range="0-100"]:not([data-inv])[data-val^="4"] { color: #f39c12; }
v[data-val-range="0-100"]:not([data-inv])[data-val^="5"] { color: #d4a017; }
v[data-val-range="0-100"]:not([data-inv])[data-val^="6"] { color: #a8c023; }
v[data-val-range="0-100"]:not([data-inv])[data-val^="7"] { color: #6fbf4c; }
v[data-val-range="0-100"]:not([data-inv])[data-val^="8"] { color: #4caf50; }
v[data-val-range="0-100"]:not([data-inv])[data-val^="9"] { color: #27ae60; }
v[data-val-range="0-100"]:not([data-inv])[data-val="100"] { color: #1abc9c; text-shadow: 0 0 8px rgba(26, 188, 156, 0.4); }

/* 反向数值 (警戒值) — 颜色取反 */
v[data-inv="true"][data-val^="0"] { color: #27ae60; }
v[data-inv="true"][data-val^="1"] { color: #4caf50; }
v[data-inv="true"][data-val^="2"] { color: #6fbf4c; }
v[data-inv="true"][data-val^="3"] { color: #a8c023; }
v[data-inv="true"][data-val^="4"] { color: #d4a017; }
v[data-inv="true"][data-val^="5"] { color: #f39c12; }
v[data-inv="true"][data-val^="6"] { color: #e67e22; }
v[data-inv="true"][data-val^="7"] { color: #d35400; }
v[data-inv="true"][data-val^="8"] { color: #c0392b; }
v[data-inv="true"][data-val^="9"] { color: #b03a2e; }
v[data-inv="true"][data-val="100"] { color: #922b21; }

/* 数值发光装饰 — 高值时微光 */
v[data-val^="8"], v[data-val^="9"], v[data-val="100"] {
    text-shadow: 0 0 6px currentColor;
}

/* ---------- 角色信息 .p-info ---------- */
.p-info {
    padding: 8px 14px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
}
.p-info f { min-width: 50px; }
.p-info d { flex: 1; min-width: 100px; }

/* 装备 / 物品 分类下的 l */
.p-info l {
    padding-left: 16px;
    position: relative;
    font-size: 14px;
}
.p-info l::before {
    content: "◇";
    position: absolute;
    left: 2px;
    color: #c9a96e;
    opacity: 0.5;
}

/* ---------- NPC信息 .n-info ---------- */
.n-info {
    padding: 6px 14px 10px;
}
.n-info > f {
    display: inline-block;
    min-width: 56px;
}
.n-info > d {
    display: inline-block;
    margin-right: 12px;
}

/* ---------- 数值网格 .n-stats-grid ---------- */
.n-stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    padding: 4px 0;
}
.n-stats-grid l {
    padding: 3px 6px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(200, 160, 80, 0.06);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}
.n-stats-grid l:first-child { border-top: none; }

/* 数值旁边的文字说明保持同一行 */
.n-stats-grid l > :first-child { min-width: 80px; }
.n-stats-grid l v { order: 2; }

/* ---------- 生理状态 — 色情感 · 核心区域 ---------- */
c.sensual {
    color: #ff6b8a;
    border-left-color: #ff6b8a;
    background: linear-gradient(90deg,
        rgba(255, 80, 120, 0.10) 0%,
        transparent 100%);
    text-shadow: 0 0 12px rgba(255, 80, 120, 0.2);
    margin-top: 18px;
}

/* 生理状态网格 */
.n-physio-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 4px 0;
}
.n-physio-grid l {
    padding: 4px 8px;
    background: rgba(255, 80, 120, 0.03);
    border-bottom: 1px solid rgba(255, 80, 120, 0.08);
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

/* sensual-highlight — 粉红→深红渐变 + 微光脉冲 */
d.sensual-highlight,
.n-physio-grid d.sensual-highlight,
.body-dev-grid d.sensual-highlight {
    color: #ff6b8a;
    font-weight: 700;
    background: linear-gradient(90deg, #ff6b8a, #c2185b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    animation: sensualPulse 3s ease-in-out infinite;
    position: relative;
}
@keyframes sensualPulse {
    0% { opacity: 0.85; filter: brightness(1); }
    50% { opacity: 1; filter: brightness(1.2); }
    100% { opacity: 0.85; filter: brightness(1); }
}

/* 生理期 额外高亮 — 深红 */
.n-physio-grid l:nth-child(3) d.sensual-highlight {
    -webkit-text-fill-color: #e91e63;
    background: none;
    color: #e91e63;
    font-weight: 800;
    animation: none;
    text-shadow: 0 0 10px rgba(233, 30, 99, 0.3);
}

/* 怀孕概率 — 紫红色 */
.n-physio-grid l:nth-child(4) d.sensual-highlight {
    -webkit-text-fill-color: #ad1457;
    background: none;
    color: #ad1457;
    animation: none;
}

/* 发情指数 — 亮粉红脉冲 */
.n-physio-grid l:nth-child(5) v.sensual-highlight {
    -webkit-text-fill-color: #ff4081;
    background: none;
    color: #ff4081;
    animation: sensualPulse 2s ease-in-out infinite;
    font-size: 18px;
    text-shadow: 0 0 16px rgba(255, 64, 129, 0.4);
}

/* ---------- 身体细节与开发度 .body-dev-grid ---------- */
.body-dev-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 4px 0;
}
.body-dev-grid > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 8px;
    padding: 4px 8px;
    border-bottom: 1px solid rgba(255, 80, 120, 0.06);
    background: rgba(255, 255, 255, 0.015);
}
.body-dev-grid f {
    min-width: 48px;
    color: #e8c56d;
    font-size: 14px;
}
.body-dev-grid > div > d:first-of-type {
    flex: 1;
    min-width: 100px;
    font-size: 14px;
    color: #d4c5a9;
}

/* 开发度标签 — 颜色随阶段变化 */
.dev-status {
    font-size: 12px !important;
    padding: 1px 8px;
    border-radius: 0;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* 开发度语义颜色 — 利用内含文本关键词 */
.dev-status d.sensual-highlight:contains("未开发") { color: #888; background: none; -webkit-text-fill-color: #888; }
/* 由于 :contains() 不支持，用属性近似 — 直接统一为色情渐变 */
.dev-status d.sensual-highlight {
    font-size: 12px;
    padding: 1px 6px;
    background: linear-gradient(135deg, rgba(255, 80, 120, 0.15), rgba(200, 30, 80, 0.10));
    border-left: 2px solid #ff6b8a;
    -webkit-text-fill-color: #ff8aae;
    color: #ff8aae;
    animation: none;
    letter-spacing: 0.5px;
}

/* ---------- 高潮记录 / 内射记录 .n-records-grid ---------- */
.n-records-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
    padding: 4px 0;
}
.n-records-grid l {
    padding: 3px 6px;
    font-size: 14px;
    background: rgba(255, 80, 120, 0.02);
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.n-records-grid l d.sensual-highlight {
    -webkit-text-fill-color: #ff6b8a;
    background: none;
    color: #ff6b8a;
    font-size: 15px;
    animation: none;
}

/* ---------- 其他信息 .n-other-grid ---------- */
.n-other-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 4px 0;
}
.n-other-grid l {
    padding: 3px 8px;
    font-size: 14px;
    border-bottom: 1px solid rgba(200, 160, 80, 0.05);
}

/* ---------- 记忆区 .m-info ---------- */
.m-info {
    padding: 6px 14px 10px;
}
.m-info c {
    margin-top: 14px;
}
.m-info c:first-child { margin-top: 6px; }

/* markdown 表格 — 平台会解析为 <table> */
.m-info table {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0 10px;
    font-size: 13px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(200, 160, 80, 0.15);
}
.m-info th {
    background: rgba(200, 160, 80, 0.12);
    color: #e8c56d;
    padding: 4px 8px;
    font-weight: 700;
    border-bottom: 2px solid rgba(200, 160, 80, 0.2);
    text-align: left;
    font-size: 12px;
    letter-spacing: 0.5px;
}
.m-info td {
    padding: 3px 8px;
    border-bottom: 1px solid rgba(200, 160, 80, 0.06);
    color: #d4c5a9;
}
.m-info tr:last-child td { border-bottom: none; }

/* 记忆规则 */
p.mem-rule {
    margin: 8px 0 4px;
    padding: 6px 10px;
    font-size: 12px;
    color: #b0a090;
    background: rgba(200, 160, 80, 0.04);
    border-left: 2px solid rgba(200, 160, 80, 0.2);
    line-height: 1.5;
    font-style: italic;
}

/* ---------- 行动推荐 .a-info ---------- */
.a-info {
    padding: 6px 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 每个行动项 — 点击全选 + 复制图标 */
.a-info l {
    position: relative;
    padding: 8px 14px 8px 36px;
    font-size: 14px;
    font-weight: 500;
    color: #f0e6d0;
    background: rgba(200, 160, 80, 0.04);
    border: 1px solid rgba(200, 160, 80, 0.10);
    cursor: pointer;
    user-select: all;
    -webkit-user-select: all;
    transition: all 0.25s;
    border-radius: 0;
    letter-spacing: 0.3px;
}
.a-info l:hover {
    background: rgba(200, 160, 80, 0.12);
    border-color: rgba(200, 160, 80, 0.30);
    transform: translateX(4px);
}

/* 编号符文 */
.a-info l::before {
    content: attr(data-num);
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 800;
    color: #c9a96e;
    opacity: 0.6;
    font-family: 'Segoe UI', serif;
}

/* 复制图标 — 右侧悬浮 */
.a-info l::after {
    content: "📋";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    opacity: 0.25;
    transition: opacity 0.3s;
    pointer-events: none;
}
.a-info l:hover::after { opacity: 0.7; }

/* 选中样式 — 金色 */
.a-info l::selection {
    background: rgba(200, 160, 80, 0.35);
    color: #fff5e0;
}

/* ---------- 分割装饰线 ---------- */
/* 利用 details 之间的空隙加入符文分隔 */
details + details {
    margin-top: 10px;
    position: relative;
}
details + details::before {
    content: "✧ ✦ ✧";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    letter-spacing: 6px;
    color: #c9a96e;
    opacity: 0.2;
    pointer-events: none;
}

/* ---------- 响应式 — 移动端 ---------- */
@media (max-width: 600px) {
    ai {
        padding: 12px 10px 14px;
        margin: 6px 4px;
        border-width: 1px;
    }
    hd {
        font-size: 13px;
        padding: 8px 8px;
        letter-spacing: 1px;
    }
    article {
        padding: 10px 12px;
        font-size: 14px;
    }
    summary {
        font-size: 14px;
        padding: 8px 12px;
    }
    .p-info { padding: 6px 8px; gap: 1px 4px; }
    .p-info f { min-width: 40px; font-size: 13px; }
    .p-info d { font-size: 13px; min-width: 80px; }
    .n-info { padding: 4px 8px; }
    .n-stats-grid l { font-size: 13px; padding: 2px 4px; flex-wrap: wrap; }
    .n-physio-grid l { font-size: 13px; }
    .body-dev-grid > div { padding: 3px 6px; }
    .body-dev-grid f { font-size: 13px; min-width: 38px; }
    .body-dev-grid > div > d:first-of-type { font-size: 13px; min-width: 70px; }
    .n-records-grid { grid-template-columns: 1fr; }
    .m-info table { font-size: 12px; }
    .m-info th, .m-info td { padding: 2px 4px; }
    .a-info l {
        font-size: 13px;
        padding: 6px 10px 6px 30px;
    }
    .a-info l::before { left: 8px; font-size: 11px; }
    .a-info l::after { right: 8px; font-size: 11px; }
    v { font-size: 14px; }
    l.sub-d { font-size: 12px; padding-left: 8px; }
    c { font-size: 13px; }
}

/* ---------- 精致点缀 — 星空粒子 (背景) ---------- */
ai {
    background-image:
        radial-gradient(1px 1px at 15% 8%, rgba(255, 255, 255, 0.15), transparent),
        radial-gradient(1px 1px at 75% 12%, rgba(255, 255, 255, 0.10), transparent),
        radial-gradient(1px 1px at 30% 75%, rgba(255, 255, 255, 0.08), transparent),
        radial-gradient(1px 1px at 85% 70%, rgba(255, 255, 255, 0.12), transparent),
        radial-gradient(1px 1px at 50% 95%, rgba(255, 255, 255, 0.06), transparent),
        radial-gradient(1.5px 1.5px at 8% 45%, rgba(200, 160, 80, 0.10), transparent),
        radial-gradient(1.5px 1.5px at 92% 40%, rgba(200, 160, 80, 0.08), transparent),
        radial-gradient(2px 2px at 60% 25%, rgba(200, 160, 80, 0.06), transparent),
        linear-gradient(145deg, #1a1a2e 0%, #0f0f1e 100%);
}

/* ---------- 自定义滚动条 (平台支持时) ---------- */
ai ::-webkit-scrollbar { width: 4px; }
ai ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); }
ai ::-webkit-scrollbar-thumb { background: #c9a96e; border-radius: 0; }