.game-ui-container {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Noto Sans SC';
    background-color: #1a1a2e; /* Dark theme background */
    color: #e0e0e0; /* Light text color */
    border: 1px solid #0f3460;
    border-radius: 8px;
    padding: 10px;
    margin: 10px auto;
    max-width: 600px; /* Constrain width for better readability */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    line-height: 1.6;
    font-size: 14px; /* Base font size */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.game-ui-container a {
    color: #a7d9ff;
    text-decoration: none;
}

.game-ui-container a:hover {
    text-decoration: underline;
}

.ui-section {
    margin-bottom: 8px;
    background-color: #16213e; /* Slightly lighter dark for sections */
    border: 1px solid #0f3460;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.ui-section[open] {
    background-color: #0d162c; /* Darker when open */
    border-color: #0f3460;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.ui-summary {
    display: block; /* Ensures the whole area is clickable */
    padding: 12px 15px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    outline: none; /* Remove outline on focus */
    color: #e0e0e0;
    position: relative;
    user-select: none; /* Prevent text selection on summary */
    border-bottom: 1px solid transparent; /* For transition effect */
    transition: all 0.3s ease;
}

.ui-section[open] .ui-summary {
    border-bottom-color: #0f3460;
    color: #a7d9ff; /* Highlight summary when open */
}

.ui-summary::-webkit-details-marker {
    display: none;
}

.ui-summary::before {
    content: '+';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.ui-section[open] .ui-summary::before {
    content: '-';
    transform: translateY(-50%) rotate(0deg); /* No rotation needed for - */
}

.ui-details-content {
    padding: 10px 15px 15px;
    border-top: 1px solid #0f3460;
    background-color: #0d162c;
    border-radius: 0 0 6px 6px;
    animation: fadeIn 0.3s ease-out; /* Simple fade-in effect */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* General spacing for content */
.ui-details-content div {
    margin-bottom: 6px;
}

.ui-details-content strong {
    color: #f7cac9; /* Accent color for labels */
}

.ui-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Flexible columns */
    gap: 8px 15px; /* Row and column gap */
}

.ui-info-grid .full-width {
    grid-column: 1 / -1; /* Make specific items span full width */
}

.item-list {
    list-style: none; /* Remove default list styling */
    padding: 0;
    margin: 5px 0 0 0;
}

.item-list li {
    padding: 4px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.item-list li:last-child {
    border-bottom: none;
}

.female-details {
    margin-top: 10px;
    padding-left: 15px;
    border-left: 2px solid #e94560; /* Highlight for female-specific details */
    background-color: rgba(233, 69, 96, 0.05);
    border-radius: 4px;
    padding-bottom: 0;
}

.sub-heading {
    color: #a7d9ff; /* Accent color for sub-headings */
    font-size: 15px;
    margin-top: 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(167, 217, 255, 0.2);
    padding-bottom: 5px;
}

.npc-card {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #1a2747;
    border: 1px solid #0f3460;
    border-radius: 5px;
}

.separator {
    border: none;
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
    margin: 20px 0;
}

/* Progress Bar Styling */
.progress-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.progress-bar {
    flex-grow: 1;
    height: 18px;
    background-color: #2b3a55; /* Track color */
    border: 1px solid #0f3460;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(to right, #4a90e2, #50e3c2); /* Gradient fill */
    border-radius: 9px; /* Slightly smaller to fit inside track */
    transition: width 0.5s ease-in-out;
}

.progress-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #e0e0e0;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Task and Relationship Items */
.task-item, .relationship-item {
    background-color: rgba(26, 42, 71, 0.5);
    border: 1px solid rgba(15, 52, 96, 0.5);
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 8px;
}

.task-item .task-title {
    margin-bottom: 8px;
    font-size: 15px;
    color: #f7cac9;
}

/* Memory Table Styling */
.memory-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 13px;
    table-layout: fixed; /* Ensures columns respect width */
}

.memory-table th,
.memory-table td {
    border: 1px solid #0f3460;
    padding: 8px;
    text-align: left;
    word-wrap: break-word; /* Prevent long words from overflowing */
}

.memory-table th {
    background-color: #2b3a55;
    color: #a7d9ff;
    font-weight: bold;
}

.memory-table tbody tr:nth-child(even) {
    background-color: #1a2747;
}

.memory-table tbody tr:hover {
    background-color: #22304d;
}

/* Scroll Box for Tables */
.scroll-box {
    max-height: 200px; /* Fixed height for scrollable area */
    overflow-y: auto;
    margin-bottom: 15px;
    border: 1px solid #0f3460;
    border-radius: 4px;
}

/* Custom Scrollbar */
.scroll-box::-webkit-scrollbar {
    width: 8px;
}

.scroll-box::-webkit-scrollbar-track {
    background: #16213e; /* Track color */
    border-radius: 10px;
}

.scroll-box::-webkit-scrollbar-thumb {
    background-color: #4a90e2; /* Thumb color */
    border-radius: 10px;
    border: 2px solid #16213e; /* Padding around thumb */
}

.scroll-box::-webkit-scrollbar-thumb:hover {
    background-color: #50e3c2;
}

/* Action List Styling */
.action-list {
    list-style: none; /* Remove default numbering */
    padding: 0;
    margin: 0;
}

.action-list li {
    background-color: #2b3a55;
    border: 1px solid #0f3460;
    border-radius: 5px;
    padding: 10px 15px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.action-list li:hover {
    background-color: #3b4a65;
    box-shadow: 0 0 8px rgba(74, 144, 226, 0.5);
    border-color: #4a90e2;
}

.action-list li::before {
    counter-increment: action-item; /* Custom numbering */
    content: counter(action-item) ". ";
    color: #a7d9ff;
    font-weight: bold;
    margin-right: 5px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .game-ui-container {
        padding: 8px;
        margin: 5px auto;
        border-radius: 0; /* Full width on small screens */
        max-width: 100%;
    }

    .ui-summary {
        font-size: 15px;
        padding: 10px 12px;
    }

    .ui-summary::before {
        font-size: 16px;
        right: 12px;
    }

    .ui-details-content {
        padding: 8px 12px 12px;
    }

    .ui-info-grid {
        grid-template-columns: 1fr; /* Stack items on small screens */
        gap: 5px;
    }

    .full-width {
        grid-column: 1; /* Ensure full width even if template changes */
    }

    .memory-table th,
    .memory-table td {
        padding: 6px;
        font-size: 12px;
    }

    .scroll-box {
        max-height: 150px; /* Reduce max-height for tables on mobile */
    }

    .action-list li {
        padding: 8px 12px;
        font-size: 13px;
    }

    .progress-bar {
        height: 16px;
    }
}

@media (max-width: 480px) {
    .game-ui-container {
        font-size: 13px;
    }

    .ui-summary {
        font-size: 14px;
        padding: 8px 10px;
    }

    .ui-summary::before {
        font-size: 15px;
        right: 10px;
    }

    .ui-details-content {
        padding: 6px 10px 10px;
    }

    .sub-heading {
        font-size: 14px;
        margin-top: 10px;
        margin-bottom: 8px;
    }

    .memory-table th,
    .memory-table td {
        font-size: 11px;
        padding: 5px;
    }

    .action-list li {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* --- 加载动画：古朴阵法流转与符文闪烁美化版 (保持原样，作为内层元素) --- */ /* 容器：背景模拟灵气流转 */ .flex.items-center.justify-center.w-6.h-5 { position: relative !important; width: 100px !important; /* 阵法尺寸略大 */ height: 100px !important; margin: 20px auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; overflow: visible !important; /* 背景灵气流转效果 */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%' cy='50%' r='50%'%3E%3Cstop offset='0%' stop-color='%236a5acd' stop-opacity='0.1'/%3E%3Cstop offset='100%' stop-color='%23483d8b' stop-opacity='0.3'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect x='0' y='0' width='100' height='100' fill='url(%23g)'/%3E%3Cpath d='M20 50 L50 20 L80 50 L50 80 Z' fill='none' stroke='%238a2be2' stroke-width='1' opacity='0.2'/%3E%3Ccircle cx='50' cy='50' r='15' fill='none' stroke='%238a2be2' stroke-width='1' opacity='0.2'/%3E%3C/svg%3E") !important; background-size: 50px 50px !important; /* 调整灵气纹理大小 */ animation: spiritual-flow 8s linear infinite !important; /* 灵气流转动画 */ border-radius: 50% !important; /* 稍微柔化边缘 */ box-shadow: 0 0 15px rgba(138, 43, 226, 0.5), inset 0 0 10px rgba(138, 43, 226, 0.3) !important; /* 阵法光晕 */ } /* 主阵法核心：符文阵列自旋转与能量涌动效果 */ .flex.items-center.justify-center.w-6.h-5::before { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 70px !important; /* 阵法核心尺寸 */ height: 70px !important; margin-top: -35px !important; margin-left: -35px !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; /* 古朴符文阵列SVG */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='grad' x1='0%' y1='0%' x2='100%' y2='100%'%3E%3Cstop offset='0%' stop-color='%239370db'/%3E%3Cstop offset='100%' stop-color='%236a5acd'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='45' stroke='url(%23grad)' stroke-width='2' fill='none'/%3E%3Cpath d='M50 5 L95 50 L50 95 L5 50 Z' stroke='url(%23grad)' stroke-width='1.5' fill='none'/%3E%3Cpath d='M50 20 C60 20 70 30 70 50 C70 70 60 80 50 80 C40 80 30 70 30 50 C30 30 40 20 50 20 Z' fill='none' stroke='url(%23grad)' stroke-width='1'/%3E%3Ctext x='47' y='30' font-family='serif' font-size='12' fill='%239370db'%3E符%3C/text%3E%3Ctext x='70' y='53' font-family='serif' font-size='12' fill='%239370db'%3E阵%3C/text%3E%3Ctext x='47' y='76' font-family='serif' font-size='12' fill='%239370db'%3E法%3C/text%3E%3Ctext x='25' y='53' font-family='serif' font-size='12' fill='%239370db'%3E灵%3C/text%3E%3C/svg%3E") !important; /* 核心动画：旋转 + 能量涌动缩放 */ animation: array-spin 6s ease-in-out infinite alternate !important; /* 阵法正反转 */ transform-origin: center center !important; filter: drop-shadow(0 0 8px rgba(147, 112, 219, 0.8)) !important; /* 符文光晕 */ } /* 提示文字：修改为修仙主题提示 */ .flex.items.center.justify-center.w-6.h-5::after { content: "天道运转，吾辈求索。" !important; /* 更符合修仙主题的提示 */ position: absolute !important; bottom: -40px !important; /* 调整位置 */ width: 250px !important; text-align: center !important; font-size: 14px !important; color: #9370db !important; /* 紫色系 */ text-shadow: 0 0 10px rgba(147, 112, 219, 0.5) !important; letter-spacing: 2px !important; font-family: "KaiTi", "STKaiti", "SimSun", serif !important; /* 更古风的字体 */ animation: text-pulse 3s ease-in-out infinite !important; /* 呼吸效果 */ white-space: nowrap !important; z-index: 2 !important; /* 确保文字在小狐狸上方 */ } /* 阵法核心旋转与能量涌动关键帧 */ @keyframes array-spin { 0% { transform: rotate(0deg) scale(0.9); opacity: 0.8; } 50% { transform: rotate(180deg) scale(1.05); /* 轻微放大 */ opacity: 1; } 100% { transform: rotate(360deg) scale(0.9); opacity: 0.8; } } /* 背景灵气流转关键帧 */ @keyframes spiritual-flow { from { background-position: 0 0; } to { background-position: 100px 100px; /* 对角线移动，模拟灵气流转 */ } } /* 文字柔和呼吸关键帧 */ @keyframes text-pulse { 0%, 100% { opacity: 0.6; transform: translateY(0) scale(1); filter: blur(0.5px); } 50% { opacity: 1; transform: translateY(-3px) scale(1.02); /* 略微上浮和放大 */ filter: blur(0px); } } /* 移动端适配 */ @media (max-width: 480px) { .flex.items-center.justify-center.w-6.h-5 { transform: scale(0.8) !important; /* 整体缩小 */ margin: 15px auto !important; } .flex.items.center.justify-center.w-6.h-5::after { font-size: 12px !important; bottom: -35px !important; width: 200px !important; } /* 移动端适配小狐狸和外框 */ .fox-container { width: 150px !important; height: 150px !important; margin-top: -75px !important; margin-left: -75px !important; } .fox-spirit { width: 30px !important; height: 30px !important; } } /* --- 新增：粉色的框子，红色的小狐狸在框子里面乱走 --- */ /* 外层容器：粉色框子 */ /* 我们将原来的 .flex.items-center.justify-center.w-6.h-5 作为阵法本体， 在它外部再包裹一层新的容器来制作“粉色的框子”和“小狐狸”。 为了不破坏原有CSS结构，我们创建一个新的父级div来承载一切。 这里假定你的HTML结构会变成： <div class="loading-wrapper"> &lt;-- 这个是新的粉色框子容器 <div class="flex items-center justify-center w-6 h-5"> &lt;-- 原有的阵法容器 <!-- ... 阵法内容 ... --> </div> </div> 或者，如果你不能修改HTML，我们可以利用伪元素来模拟这个框子， 但为了更好地控制小狐狸的运动范围，贫道建议使用新的父级容器。 此处，贫道先演示如果添加新的父级容器的情况。 */ /* 如果你无法添加新的父级HTML元素，可以尝试将粉框和小狐狸放在 .flex.items-center.justify-center.w-6.h-5 内部， 并将其定位到阵法的周围。以下是将其作为独立容器的方案： */ .loading-wrapper { /* 这个是你新创建的包裹所有内容的父级容器 */ position: relative; width: 200px; /* 粉框的整体宽度 */ height: 200px; /* 粉框的整体高度 */ border: 3px solid #ff69b4; /* 粉色边框 */ border-radius: 15px; /* 圆角 */ background-color: rgba(255, 192, 203, 0.1); /* 浅粉色半透明背景 */ box-shadow: 0 0 20px rgba(255, 105, 180, 0.7); /* 粉色光晕 */ display: flex; align-items: center; justify-content: center; margin: 30px auto; /* 让它居中显示 */ overflow: hidden; /* 确保小狐狸不会跑出框子 */ } /* 调整原有的阵法容器，使其在新框子中居中 */ .loading-wrapper .flex.items-center.justify-center.w-6.h-5 { position: absolute !important; /* 让阵法可以在粉框中自由定位 */ top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; /* 精确居中 */ margin: 0 !important; /* 清除原有margin */ z-index: 1; /* 确保阵法在粉框和狐狸之间 */ } /* 红色的小狐狸 */ .fox-spirit { position: absolute; width: 40px; /* 小狐狸尺寸 */ height: 40px; background-color: transparent; /* 小狐狸本身是透明的，我们用SVG或图片 */ background-size: contain; background-repeat: no-repeat; background-position: center; /* 假设小狐狸的SVG，这是一个示例，你可以替换成更精细的狐狸图案 */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50,10 C70,10 85,30 85,50 C85,70 70,90 50,90 C30,90 15,70 15,50 C15,30 30,10 50,10 Z' fill='%23ff0000' /%3E%3Cpath d='M40,40 Q45,30 50,40 Q55,30 60,40' fill='none' stroke='%23ffffff' stroke-width='3' /%3E%3Ccircle cx='42' cy='48' r='3' fill='%23ffffff' /%3E%3Ccircle cx='58' cy='48' r='3' fill='%23ffffff' /%3E%3Cpath d='M40,65 C45,70 55,70 60,65' fill='none' stroke='%23ffffff' stroke-width='2' /%3E%3Cpath d='M30,30 Q35,20 40,30' fill='%23ff0000' /%3E%3Cpath d='M70,30 Q65,20 60,30' fill='%23ff0000' /%3E%3C/svg%3E") !important; animation: fox-wander 10s linear infinite; /* 小狐狸乱走动画 */ z-index: 3; /* 确保小狐狸在最上层 */ filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.8)); /* 狐狸光晕 */ } /* 小狐狸乱走关键帧 */ @keyframes fox-wander { 0% { top: 10%; left: 10%; transform: rotateY(0deg); } 25% { top: 70%; left: 20%; transform: rotateY(0deg); /* 向右 */ } 50% { top: 30%; left: 80%; transform: rotateY(180deg); /* 转身向左 */ } 75% { top: 80%; left: 60%; transform: rotateY(180deg); /* 向左 */ } 100% { top: 10%; left: 10%; transform: rotateY(0deg); /* 转身向右 */ } }