/* ===================== 全局重置与粒子背景 ===================== */
/* 隐藏特定杂乱背景块 */
[class*="bg-[#F1CBCB]"],
[class*="bg-[#c1e1e9]"] {
    display: none !important;
}

/* 全局粒子背景（自动叠加） */
body::after {
    content: '' !important;
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background: 
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.4), transparent),
        radial-gradient(2px 2px at 40% 70%, rgba(135,206,250,0.5), transparent),
        radial-gradient(1px 1px at 90% 10%, rgba(255,204,0,0.6), transparent),
        radial-gradient(2px 2px at 10% 80%, rgba(74,144,226,0.5), transparent);
    background-size: 200% 200%;
    animation: stars-drift 20s linear infinite;
}
@keyframes stars-drift {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}
/* ===================== 对话框容器 ===================== */
[class*="dialog"], [class*="chat"], [class*="modal"], .cyber-dialog,
.bg-gray-100\/90.relative.inline-block,
div[class*="bg-gray-100"][class*="inline-block"] {
    background: radial-gradient(ellipse at 20% 50%, #0a1525 0%, #000000 80%) !important;
    border: 2px solid transparent !important;
    border-radius: 16px !important;
    position: relative !important;
    padding: 24px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 0 40px rgba(28,58,112,0.9), 0 0 80px rgba(74,144,226,0.4), inset 0 0 30px rgba(173,216,230,0.15) !important;
    z-index: 1;
    isolation: isolate;
}
[class*="dialog"]::before,
.cyber-dialog::before {
    content: '';
    position: absolute;
    top: -3px; left: -3px; right: -3px; bottom: -3px;
    border-radius: 18px;
    background: linear-gradient(45deg, #ffcc00, #4a90e2, #ff6fae, #00ff99, #ffcc00);
    background-size: 400% 400%;
    z-index: -1;
    animation: glow-border 4s linear infinite;
    filter: blur(8px);
    opacity: 0.8;
}
@keyframes glow-border {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* ===================== 按钮 ===================== */
button, [role="button"], .btn, [class*="button"], .cyber-button {
    color: #e0f0ff !important;
    font-weight: bold !important;
    background: linear-gradient(145deg, rgba(26,58,107,0.95), rgba(42,82,152,0.95)) !important;
    border: 1px solid #4a90e2 !important;
    border-radius: 8px !important;
    padding: 8px 18px !important;
    margin: 4px !important;
    box-shadow: 0 0 15px rgba(74,144,226,0.6), inset 0 0 8px rgba(135,206,250,0.2) !important;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-transform: none !important;
}
button::after, .cyber-button::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
}
button:hover, .cyber-button:hover {
    background: linear-gradient(145deg, rgba(58,123,213,0.95), rgba(42,82,152,0.95)) !important;
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 0 25px rgba(135,206,250,0.9), 0 5px 15px rgba(0,0,0,0.5);
}
button:hover::after, .cyber-button:hover::after {
    opacity: 1;
}
button:active, .cyber-button:active {
    transform: translateY(1px);
    box-shadow: 0 0 10px rgba(74,144,226,0.6);
}
button.active, .cyber-button.active {
    background: linear-gradient(145deg, #ffcc00, #e6b800) !important;
    color: #0a1525 !important;
    border-color: #ffaa00 !important;
    box-shadow: 0 0 20px rgba(255,204,0,0.9), inset 0 2px 4px rgba(0,0,0,0.3);
}
/* ===================== 消息气泡 ===================== */
.message, .bubble, [class*="message"], [class*="bubble"], .cyber-bubble,
.group .bg-gray-100\/90 {
    background: rgba(0,0,0,0.75) !important;
    backdrop-filter: blur(16px) saturate(2) !important;
    border: 1px solid rgba(74,144,226,0.7) !important;
    border-radius: 16px !important;
    box-shadow: 0 0 30px rgba(74,144,226,0.5), 8px 8px 0px rgba(42,82,152,0.7) !important;
    color: #e6f7ff !important;
    padding: 20px 24px !important;
    margin: 12px 0;
    position: relative;
    transition: all 0.3s ease;
}
.message:hover, .cyber-bubble:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 45px rgba(135,206,250,0.8), 8px 8px 0px rgba(42,82,152,0.9);
    border-color: #ffcc00 !important;
}
.message::before, .cyber-bubble::before {
    content: '⚔️';
    position: absolute;
    top: -12px; left: 20px;
    font-size: 1.4em;
    filter: drop-shadow(0 0 6px #87ceeb);
    z-index: 5;
    animation: float-icon 2s infinite alternate;
}
@keyframes float-icon {
    0% { transform: translateY(0); }
    100% { transform: translateY(-3px); }
}

/* 系统消息/主角消息增强 */
.system-message, [class*="system-message"], .group.ml-0 > .flex {
    background: rgba(5,10,25,0.85) !important;
    backdrop-filter: blur(12px) !important;
    border-radius: 18px;
    padding: 24px 28px;
    width: 100%;
    box-shadow: 0 0 35px rgba(42,82,152,0.6), 8px 8px 0px rgba(26,58,107,0.8);
    border: 1px solid #4a90e2;
    position: relative;
}
.system-message::before {
    content: '🛡️';
    position: absolute;
    top: -14px; left: 22px;
    font-size: 1.4em;
    filter: drop-shadow(0 0 6px #ffcc00);
    z-index: 5;
    animation: float-icon 2s infinite alternate;
}
/* ===================== 进度条 ===================== */
progress, [class*="progress"], .cyber-progress {
    appearance: none !important;
    width: 120px !important;
    height: 14px !important;
    border-radius: 7px !important;
    border: 1px solid #0099ff !important;
    background: rgba(10,26,58,0.9) !important;
    vertical-align: middle;
    margin: 0 8px;
    overflow: hidden;
    box-shadow: inset 0 0 10px rgba(0,153,255,0.5), 0 0 10px rgba(0,153,255,0.3);
    position: relative;
}
progress::-webkit-progress-bar {
    background: rgba(10,26,58,0.9) !important;
    border-radius: 7px;
}
progress::-webkit-progress-value {
    border-radius: 7px;
    background-size: 200% 100% !important;
    animation: progress-shine 2s linear infinite;
}
progress::-moz-progress-bar {
    border-radius: 7px;
    background-size: 200% 100%;
}
@keyframes progress-shine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 第1个进度条 - 生命值 */
progress:nth-of-type(1)::-webkit-progress-value {
    background: linear-gradient(90deg, #00ff99, #00cc66, #00ff99) !important;
}
progress:nth-of-type(1)::-moz-progress-bar {
    background: linear-gradient(90deg, #00ff99, #00cc66) !important;
}
/* 第2个进度条 - 体力值 */
progress:nth-of-type(2)::-webkit-progress-value {
    background: linear-gradient(90deg, #0099ff, #00ccff, #0099ff) !important;
}
progress:nth-of-type(2)::-moz-progress-bar {
    background: linear-gradient(90deg, #0099ff, #00ccff) !important;
}
/* 第3个进度条 - 好感度 */
progress:nth-of-type(3)::-webkit-progress-value {
    background: linear-gradient(90deg, #ff6fae, #ff9ecf, #ff6fae) !important;
}
progress:nth-of-type(3)::-moz-progress-bar {
    background: linear-gradient(90deg, #ff6fae, #ff9ecf) !important;
}
/* 第4个进度条 - 恶堕度 */
progress:nth-of-type(4)::-webkit-progress-value {
    background: linear-gradient(90deg, #ff4444, #cc0000, #ff4444) !important;
}
progress:nth-of-type(4)::-moz-progress-bar {
    background: linear-gradient(90deg, #ff4444, #cc0000) !important;
}

/* 修复 details 内部样式干扰进度条 */
details > :where(p, div, ul, ol, dl, blockquote, pre, h1, h2, h3, h4, h5, h6, table) {
    color: #d4ebff !important;
    padding: 10px 0;
    margin-left: 12px;
    border-left: 3px solid transparent;
    padding-left: 15px;
    transition: all 0.25s ease;
}
details > :where(p, div, ul, ol, dl, blockquote, pre, h1, h2, h3, h4, h5, h6, table):hover {
    background-color: rgba(135,206,250,0.15);
    border-left: 3px solid #ffcc00;
    box-shadow: 0 0 10px rgba(255,204,0,0.3);
}
details progress, details button, details input {
    border-left: none !important;
    padding-left: initial !important;
    margin-left: 0 !important;
}
/* ===================== Details 折叠面板 ===================== */
details, .cyber-details {
    background: rgba(0,0,0,0.7) !important;
    backdrop-filter: blur(12px) saturate(1.8);
    border: 1px solid rgba(74,144,226,0.6);
    border-radius: 14px;
    box-shadow: 0 0 25px rgba(58,123,213,0.8), inset 0 0 20px rgba(135,206,250,0.15);
    padding: 20px;
    margin-top: 20px;
    color: #ffffff;
    position: relative;
    overflow: visible;
    transition: box-shadow 0.3s ease;
}
details:hover, .cyber-details:hover {
    box-shadow: 0 0 40px rgba(74,144,226,1), inset 0 0 25px rgba(135,206,250,0.25);
}
summary {
    color: #ffcc00 !important;
    font-size: 1.3em;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(255,204,0,0.8), 0 0 20px rgba(255,153,0,0.5);
    padding: 12px 20px;
    background: linear-gradient(145deg, rgba(26,58,107,0.9), rgba(10,20,40,0.9));
    border-radius: 12px;
    margin: -18px -18px 15px -18px;
    list-style: none;
    outline: none;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}
summary::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    animation: summary-sweep 3s infinite;
}
@keyframes summary-sweep {
    0% { left: -100%; }
    100% { left: 100%; }
}
summary::-webkit-details-marker { display: none; }
summary::before {
    content: "▶";
    color: #87ceeb;
    margin-right: 12px;
    font-size: 1.1em;
    transition: transform 0.3s;
    filter: drop-shadow(0 0 5px #00b4ff);
}
details[open] summary::before { transform: rotate(90deg); }
summary:hover {
    background: linear-gradient(145deg, rgba(58,123,213,0.95), rgba(42,82,152,0.95));
    color: #fff;
    text-shadow: 0 0 12px #ffcc00;
}
details li::marker {
    color: #87ceeb;
    text-shadow: 0 0 5px #00b4ff;
}
/* ===================== Tooltip 精准定位（横向小长方形，紧贴文字） ===================== */
t {
    cursor: pointer !important;
    color: #87ceeb !important;
    text-decoration: underline dotted #ffcc00 !important;
    position: relative !important;
    display: inline-block !important;
    outline: none !important;
    user-select: none !important;
    z-index: 99 !important;
}

ti {
    display: none !important;
    position: absolute !important;
    bottom: calc(100% + 10px) !important;   /* 在文字正上方弹出 */
    left: 0 !important;                    /* 左边缘与文字对齐 */
    background: linear-gradient(145deg, rgba(26,58,107,0.98), rgba(58,123,213,0.98)) !important;
    border: 2px solid #ffcc00 !important;
    border-radius: 8px !important;
    box-shadow: 0 0 15px rgba(42,82,152,0.9), inset 0 0 8px rgba(135,206,250,0.4) !important;
    padding: 8px 12px !important;
    color: #e6f7ff !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    width: 200px !important;               /* 固定横向宽度 */
    max-width: 90vw !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    z-index: 1000 !important;
    backdrop-filter: blur(10px) !important;
    text-align: left !important;
    pointer-events: auto !important;
}

/* 向下的小三角箭头，指向文字区域 */
ti::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 12px !important;
    margin-left: 0 !important;
    border-width: 6px !important;
    border-style: solid !important;
    border-color: #ffcc00 transparent transparent transparent !important;
}

t:hover > ti,
t:active > ti,
t:focus > ti {
    display: block !important;
}
t:hover {
    z-index: 1001 !important;
    outline: 2px solid #ffcc00 !important;
    outline-offset: 2px !important;
}

/* 移除旧版居中遮罩（不再需要） */
.tooltip-close,
.tooltip-overlay {
    display: none !important;
}

/* ===================== 游戏物品（锁定样式）中 Tooltip 触发器强化 ===================== */
info + br + t {
    display: inline-block !important;
    margin: 6px 0 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    background: rgba(74,144,226,0.15) !important;
    border: 1px solid rgba(135,206,250,0.4) !important;
    z-index: 99 !important;
}

/* ===================== 辅助锁定（Tooltip hover 重申） ===================== */
t:hover {
    outline: 2px solid #ffcc00 !important;
    outline-offset: 2px !important;
}
/* ===================== 分页组件 ===================== */
.pagination, [class*="pagination"], .cyber-pagination {
    background: linear-gradient(90deg, rgba(26,58,107,0.95), rgba(58,123,213,0.95));
    padding: 10px 0;
    border-radius: 10px;
    margin: 10px 0;
    border: 1px solid #4a90e2;
    box-shadow: 0 0 20px rgba(74,144,226,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
}
.pagination button, .cyber-pagination button {
    background: linear-gradient(145deg, #0d2240, #1a3660);
    border-color: #4a90e2;
    color: #b0e0ff;
    margin: 0 3px;
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(74,144,226,0.4);
    padding: 6px 12px;
    min-width: 32px;
}
.pagination button:hover, .cyber-pagination button:hover {
    background: linear-gradient(145deg, #1a3660, #2a5aa9);
    border-color: #ffcc00;
    box-shadow: 0 0 15px #ffcc00;
}
.pagination .active, .cyber-pagination .active {
    background: linear-gradient(145deg, #ffcc00, #ff9900);
    color: #0a1525;
    font-weight: bold;
    box-shadow: 0 0 15px #ffcc00;
}
/* ===================== 底部控制栏 ===================== */
.bottom-bar, [class*="bottom-bar"], [class*="footer"] {
    background: linear-gradient(to top, rgba(10,20,50,0.8), rgba(30,60,100,0.4), transparent) !important;
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(74,144,226,0.4);
}
/* ===================== 响应式微调 ===================== */
@media (max-width: 480px) {
    .cyber-dialog, [class*="dialog"] { padding: 18px !important; }
    .cyber-bubble, .message { padding: 14px 18px !important; }
    button, .cyber-button { padding: 8px 16px; font-size: 14px; }
}