@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Share+Tech+Mono&display=swap');
.bg-gray-100\/90.w-2.h-3.clip-path-triangle-right {
display: none !important;
}
.relative.inline-block.px-4.py-3.w-full.bg-gray-100\/90.rounded-b-2xl.rounded-tl-2xl {
background: none !important;
border: none !important;
color: inherit !important;
border-radius: 0 !important;
padding: 0 !important;
font-size: 16px !important; /* 设定一个基础字号 */
width: 100% !important; /* 确保它撑满可用宽度 */
}
.zzz-container {
font-family: 'Share Tech Mono', 'Orbitron', monospace;
background-color: #1a1a1a; /* 核心深黑背景 */
color: #f0f0f0; /* 默认文字颜色 */
padding: 20px;
border: 2px solid #333;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(10, 10, 10, 0.5);
position: relative;
overflow: hidden; /* 隐藏溢出的装饰元素 */
}
/* 容器的装饰性伪元素，增加复杂性 */
.zzz-container::before {
content: 'SYSTEM ONLINE';
position: absolute;
top: 5px;
right: 15px;
font-size: 10px;
color: #00FF7F; /* 核心绿色 */
text-shadow: 0 0 5px #00FF7F;
letter-spacing: 2px;
opacity: 0.7;
}
.zzz-container::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: repeating-linear-gradient(
-45deg,
#FF9900,
#FF9900 2px,
transparent 2px,
transparent 4px
);
opacity: 0.8;
}
.zzz-container > p:first-of-type,
.zzz-container > p:nth-of-type(2) {
color: #00FF7F; /* 绿色 */
text-transform: uppercase;
font-size: 0.9em;
padding-bottom: 5px;
margin-bottom: 15px;
border-bottom: 1px dashed rgba(0, 255, 127, 0.3);
letter-spacing: 1.5px;
text-shadow: 0 0 3px rgba(0, 255, 127, 0.5);
}
/* 给时间地点前加上小图标 */
.zzz-container > p:first-of-type::before {
content: '[TIME] // ';
}
.zzz-container > p:nth-of-type(2)::before {
content: '[LOC] // ';
}
maintext {
display: block;
background-color: rgba(0, 0, 0, 0.2);
border: 1px solid #444;
padding: 1.5em;
margin-bottom: 25px;
color: #ffffff; /* 主文本白色 */
line-height: 1.7;
font-size: 1.05em;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%); /* 右下角切角 */
}
status {
display: block;
border: 1px solid #FF9900; /* 核心橙色 */
padding: 15px 20px;
margin: 25px 0;
position: relative;
background: linear-gradient(135deg, rgba(255, 153, 0, 0.05), rgba(255, 153, 0, 0.15));
box-shadow: 0 0 10px rgba(255, 153, 0, 0.2);
}
status::before {
content: '[ 周围环境 // 在场角色 // 主要事件 ]';
position: absolute;
top: -12px;
left: 15px;
background-color: #1a1a1a; /* 与主背景同色以“打断”边框 */
color: #FF9900;
padding: 0 10px;
font-weight: bold;
font-size: 0.9em;
text-shadow: 0 0 5px rgba(255, 153, 0, 0.5);
}
Master, npc {
display: block; /* 使自定义标签成为块级元素 */
}
/* 通用details卡片样式 */
details.card, details.npc-card {
background-color: #222;
border: 1px solid #555;
margin-bottom: 1.5em;
position: relative;
transition: all 0.3s ease-in-out;
}
/* 卡片标题 <summary> */
details.card > summary, details.npc-card > summary {
background: linear-gradient(90deg, #FF9900 0%, #cc7a00 100%);
color: #111;
font-weight: bold;
padding: 10px 20px;
cursor: pointer;
list-style: none; /* 移除默认的箭头 */
position: relative;
transition: background 0.2s;
text-transform: uppercase;
}
details.card > summary:hover, details.npc-card > summary:hover {
background: linear-gradient(90deg, #ffad33 0%, #e68a00 100%);
}
/* 自定义展开/折叠指示器 */
details.card > summary::before, details.npc-card > summary::before {
content: '+';
font-size: 1.2em;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%) rotate(0deg);
transition: transform 0.3s;
color: #1a1a1a;
}
details[open].card > summary::before, details[open].npc-card > summary::before {
content: '-';
transform: translateY(-50%) rotate(180deg);
}
/* 卡片打开时的内容区域 */
details[open].card > div, details[open].npc-card > div,
/* 为了兼容您不使用div包裹的情况，直接作用于details元素 */
details[open].card, details[open].npc-card {
padding: 20px;
padding-top: 10px; /* 因为summary已经有内边距了 */
border-top: 2px solid #FF9900;
}
/* 卡片关闭时，除了summary都不可见 */
details:not([open]) > *:not(summary) {
display: none;
}
/* 卡片打开时的动画效果 */
details[open] {
box-shadow: 0 0 20px rgba(255, 153, 0, 0.4);
}
/* 卡片内部文本行样式 */
details.card p, details.npc-card p {
margin: 8px 0;
padding-left: 15px;
border-left: 2px solid #00FF7F;
color: #ccc;
transition: all 0.2s;
}
details.card p:hover, details.npc-card p:hover {
background-color: rgba(0, 255, 127, 0.1);
color: #fff;
}
/* 特别为NPC卡片增加的细节，增加选择器复杂度 */
details.npc-card {
border-color: #00FF7F;
}
details.npc-card > summary {
background: linear-gradient(90deg, #00FF7F 0%, #00cc66 100%);
}
details.npc-card > summary:hover {
background: linear-gradient(90deg, #4dff99 0%, #00e673 100%);
}
details[open].npc-card {
border-top-color: #00FF7F;
box-shadow: 0 0 20px rgba(0, 255, 127, 0.4);
}
/* 针对特定状态的行进行高亮（假设您未来会用class标记） */
details.npc-card p.highlight-desire {
color: #ff4d4d; /* 欲望值高亮 */
border-left-color: #ff4d4d;
font-weight: bold;
}
details.npc-card p.highlight-status {
color: #ffdd57; /* 异常状态高亮 */
border-left-color: #ffdd57;
}
Rope {
display: block;
height: 10px;
width: 100%;
margin: 30px 0;
background: repeating-linear-gradient(
-55deg,
#333,
#333 10px,
#444 10px,
#444 20px
);
border-top: 2px solid #FF9900;
border-bottom: 2px solid #00FF7F;
box-shadow: inset 0 0 10px #000;
}
@keyframes text-glow-green {
0%, 100% { text-shadow: 0 0 5px rgba(0, 255, 127, 0.7); }
50% { text-shadow: 0 0 10px rgba(0, 255, 127, 1); }
}
@keyframes text-glow-orange {
0%, 100% { text-shadow: 0 0 5px rgba(255, 153, 0, 0.7); }
50% { text-shadow: 0 0 10px rgba(255, 153, 0, 1); }
}
/* 应用动画 */
.zzz-container > p:first-of-type,
.zzz-container > p:nth-of-type(2) {
animation: text-glow-green 3s infinite;
}
status::before {
animation: text-glow-orange 2.5s infinite;
}

memory {
    display: none;
}
fairy {
display: block;
margin-top: 30px;
padding: 15px;
background-color: #282c34; /* 电视机外壳颜色 */
border-radius: 10px 10px 25px 10px; /* 不对称圆角增加设计感 */
border: 3px solid #1a1a1a;
box-shadow: 0 0 10px rgba(0,0,0,0.5), inset 0 0 15px #111;
position: relative;
}
/* 屏幕区域，应用噪点和扫描线特效 */
fairy > .fairy-screen {
background-color: #21252b; /* 屏幕暗色背景 */
padding: 20px;
border: 2px solid #111;
border-radius: 5px;
position: relative;
overflow: hidden; /* 关键：隐藏溢出的特效 */
}
/* 动态噪点/扫描线特效层 */
fairy > .fairy-screen::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* 让鼠标可以点击下层内容 */
background: repeating-linear-gradient(
0deg,
rgba(255, 255, 255, 0.02) 0px,
rgba(255, 255, 255, 0.02) 1px,
transparent 1px,
transparent 3px
);
opacity: 0.5;
animation: tv-noise 0.2s infinite steps(4);
}
@keyframes tv-noise {
0% { transform: translate(0, 0); }
25% { transform: translate(-2px, 2px); }
50% { transform: translate(2px, -2px); }
75% { transform: translate(1px, 1px); }
100% { transform: translate(-1px, -1px); }
}
/* Fairy 头部区域：图标 + 标题 */
fairy .fairy-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
/* CSS绘制的Fairy图标 */
fairy .fairy-icon {
flex-shrink: 0; /* 防止图标被压缩 */
width: 40px;
height: 40px;
border: 3px solid #001f4d; /* 1. 深蓝色外圈 */
background-color: #004aad; /* 2. 蓝色内圈 */
border-radius: 50%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 10px rgba(137, 207, 240, 0.5); /* 浅蓝辉光 */
}
/* 绘制四角星 (使用 clip-path) */
fairy .fairy-icon::before {
content: '';
position: absolute;
width: 65%;
height: 65%;
background-color: #003380; /* 3. 稍深一点的四角星 */
clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}
/* 绘制中心实心圆 */
fairy .fairy-icon::after {
content: '';
position: absolute;
width: 25%;
height: 25%;
background-color: #add8e6; /* 4. 浅蓝色的实心圆 */
border-radius: 50%;
border: 1px solid #fff; /* 增加一点高光 */
}
/* Fairy 标题 */
fairy .fairy-title {
font-family: 'Orbitron', sans-serif;
font-size: 1.5em;
color: #00FF7F; /* 沿用主题绿色 */
text-shadow: 0 0 8px rgba(0, 255, 127, 0.7);
font-weight: bold;
}
/* 对话区域 */
fairy .fairy-dialogue {
position: relative;
padding-left: 20px; /* 为聊天气泡留出空间 */
}
/* 聊天气泡样式 */
fairy .fairy-dialogue .chat-bubble {
background-color: rgba(62, 68, 81, 0.7); /* 半透明气泡背景 */
padding: 15px 20px;
border-radius: 8px;
position: relative;
color: #f0f0f0;
border: 1px solid #4a505c;
backdrop-filter: blur(2px); /* 毛玻璃效果 */
}
/* 绘制聊天气泡的左侧小三角 */
fairy .fairy-dialogue .chat-bubble::before {
content: '';
position: absolute;
left: -10px;
top: 15px;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #4a505c transparent transparent;
}
/* 选项列表 */
fairy .fairy-options {
list-style: none;
padding: 10px 0 0 0;
margin: 10px 0 0 0;
border-top: 1px dashed rgba(255, 153, 0, 0.3);
}
fairy .fairy-options li {
padding: 8px 0;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
/* 选项前的自定义编号 */
fairy .fairy-options li::before {
content: '> ' counter(option-counter) ':';
counter-increment: option-counter;
color: #FF9900; /* 沿用主题橙色 */
font-weight: bold;
margin-right: 10px;
display: inline-block;
width: 30px;
}
fairy .fairy-options li:hover {
background-color: rgba(255, 153, 0, 0.1);
color: #fff;
transform: translateX(5px);
}
@media (max-width: 768px) {

    /* --- 全局容器调整 --- */
    .zzz-container {
        padding: 10px; /* 减小主容器内边距 */
        font-size: 14px; /* 略微缩小基础字号，容纳更多内容 */
    }

    .zzz-container::before {
        font-size: 9px; /* 缩小右上角系统状态文字 */
        right: 10px;
    }

    /* --- 基础信息模块调整 --- */
    .zzz-container > p:first-of-type,
    .zzz-container > p:nth-of-type(2) {
        font-size: 0.85em; /* 缩小时间地点字号 */
        letter-spacing: 1px;
    }
    
    /* --- 主要文本调整 --- */
    maintext {
        padding: 1em; /* 减小主文本区域内边距 */
        line-height: 1.6; /* 调整行高以适应更小的字号 */
    }

    /* --- 状态模块调整 --- */
    status {
        padding: 12px 15px; /* 减小状态模块内边距 */
        margin: 20px 0;
    }
    
    status::before {
        font-size: 0.8em; /* 缩小状态模块标题字号 */
        top: -10px;
        left: 10px;
    }

    /* --- 卡片模块调整 --- */
    details.card > summary, 
    details.npc-card > summary {
        padding: 8px 15px; /* 减小卡片标题内边距 */
    }

    details[open].card, 
    details[open].npc-card {
        padding: 15px; /* 减小卡片展开后内容区域的内边距 */
        padding-top: 8px;
    }

    /* --- Fairy 模块调整 --- */
    fairy {
        padding: 10px; /* 减小Fairy模块外框内边距 */
        margin-top: 20px;
    }

    fairy > .fairy-screen {
        padding: 15px; /* 减小电视屏幕内边距 */
    }

    fairy .fairy-header {
        gap: 10px; /* 减小图标与标题的间距 */
    }

    /* 缩小Fairy图标和标题以适应屏幕 */
    fairy .fairy-icon {
        width: 35px;
        height: 35px;
    }

    fairy .fairy-title {
        font-size: 1.3em; 
    }

    fairy .fairy-dialogue {
        padding-left: 15px; /* 减小对话气泡的左侧留白 */
    }

    fairy .fairy-dialogue .chat-bubble {
        padding: 12px 15px; /* 减小聊天气泡内边距 */
    }

    /* 优化选项列表的点击区域和间距 */
    fairy .fairy-options li {
        padding: 10px 5px; 
    }

    fairy .fairy-options li::before {
        margin-right: 8px;
    }

}