header {
background: linear-gradient(to right, rgba(17,17,17,0.9), rgba(42,42,58,0.9));
padding: 40px;
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
text-align: center;
position: relative;
}
header::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(to right, transparent, var(--gold-accent), transparent);
}
h1 {
font-size: 2.8rem;
color: var(--fate-pink);
margin: 0;
font-weight: normal;
text-shadow: 0 0 10px rgba(255, 182, 193, 0.3);
}
h1::after {
content: "LUNAR FATE SYSTEM";
display: block;
font-size: 0.8rem;
color: var(--pearl);
margin-top: 12px;
letter-spacing: 3px;
opacity: 0.7;
}
.section {
padding: 40px;
border-bottom: 1px solid rgba(255,255,255,0.05);
position: relative;
}
h2 {
font-size: 1.8rem;
color: var(--pearl);
margin-bottom: 25px;
font-weight: normal;
position: relative;
padding-bottom: 12px;
letter-spacing: 1px;
}
h2::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 2px;
background: linear-gradient(to right, var(--gold-accent), transparent);
}
p {
font-size: inherit;
color: rgba(240,240,240,0.8);
margin-bottom: 20px;
text-align: justify;
}
strong {
color: var(--starlight);
font-weight: 500;
}
/* 角色卡片 */
.character-container {
display: flex;
margin: 30px 0;
gap: 30px;
background: rgba(20, 20, 25, 0.5);
border-radius: 12px;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.05);
transition: transform 0.3s ease;
}
.character-container:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.character-portrait {
flex: 0 0 250px;
height: 350px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0,0,0,0.4);
position: relative;
transition: all 0.3s ease;
}
.character-portrait:hover {
transform: scale(1.02);
}
.crimson-portrait {
border: 2px solid var(--crimson);
}
.pearl-portrait {
border: 2px solid var(--pearl);
}
.character-portrait::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.7) 100%);
}
.character-details {
flex: 1;
padding: 15px 0;
}
.character-name {
font-size: 1.8rem;
margin-bottom: 12px;
display: flex;
align-items: center;
letter-spacing: 1px;
}
.crimson-name {
color: var(--fate-pink);
text-shadow: 0 0 8px rgba(139, 0, 0, 0.5);
}
.pearl-name {
color: var(--pearl);
text-shadow: 0 0 8px rgba(248, 248, 255, 0.3);
}
.character-id {
font-size: 0.9rem;
margin-left: 15px;
opacity: 0.7;
font-family: monospace;
}
.character-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 15px;
}
.character-tag {
padding: 4px 12px;
border-radius: 20px;
font-size: 0.85rem;
letter-spacing: 0.5px;
}
.crimson-tag {
background-color: rgba(139,0,0,0.3);
color: var(--fate-pink);
border: 1px solid var(--crimson);
}
.pearl-tag {
background-color: rgba(248,248,255,0.2);
color: var(--pearl);
border: 1px solid var(--pearl);
}
.character-phase {
display: flex;
align-items: center;
margin-bottom: 15px;
font-size: 0.9rem;
color: rgba(240,240,240,0.7);
}
.character-desc {
margin-bottom: 15px;
line-height: 1.8;
}
.character-feature {
font-size: 0.9rem;
padding-left: 15px;
border-left: 2px solid var(--fate-pink);
color: rgba(240,240,240,0.7);
font-style: italic;
margin-top: 20px;
}
.pearl-feature {
border-left-color: var(--pearl);
}
/* APP界面 - 升级版 */
.app-container {
margin: 30px auto;
max-width: 320px;
transition: all 0.3s ease;
}
.app-container:hover {
transform: scale(1.02);
}
.app-window {
background: linear-gradient(135deg, #3A3A4A, #2A2A3A);
border-radius: 16px;
padding: 3px;
box-shadow: 0 12px 30px rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.1);
overflow: hidden;
}
.app-header {
background: linear-gradient(to right, rgba(0,0,0,0.3), rgba(42,42,58,0.5));
padding: 12px 15px;
border-radius: 13px 13px 0 0;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.app-title {
font-size: 0.85rem;
color: var(--pearl);
margin-left: 10px;
letter-spacing: 0.5px;
}
.app-body {
padding: 25px;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 1.1rem;
color: var(--pearl);
border-radius: 0 0 13px 13px;
line-height: 1.6;
background: rgba(10,10,15,0.3);
position: relative;
overflow: hidden;
}
.app-body::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
animation: rotate 20s linear infinite;
}
.app-icon {
width: 24px;
height: 24px;
background: linear-gradient(135deg, var(--fate-pink), var(--crimson));
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.9rem;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.warning-message {
color: var(--warning-red);
animation: pulse 2s infinite;
position: relative;
z-index: 1;
}
/* 升级面板 */
.upgrade-panel {
margin: 40px 0;
border-radius: 12px;
overflow: hidden;
background: rgba(15,15,20,0.7);
border: 1px solid rgba(255,255,255,0.1);
}
.upgrade-panel summary {
padding: 15px 20px;
background: linear-gradient(to right, rgba(42,42,58,0.7), rgba(30,30,40,0.7));
color: var(--pearl);
font-size: 1rem;
cursor: pointer;
list-style: none;
position: relative;
}
.upgrade-panel summary::after {
content: "▼";
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 0.8rem;
color: var(--gold-accent);
transition: transform 0.3s ease;
}
.upgrade-panel[open] summary::after {
transform: translateY(-50%) rotate(180deg);
}
.character-comparison {
display: flex;
padding: 20px;
gap: 30px;
}
.character-data {
flex: 1;
padding: 20px;
border-radius: 8px;
}
.crimson-data {
background: rgba(139, 0, 0, 0.1);
border: 1px solid rgba(139, 0, 0, 0.3);
}
.pearl-data {
background: rgba(248, 248, 255, 0.05);
border: 1px solid rgba(248, 248, 255, 0.2);
}
.character-data h3 {
font-size: 1.2rem;
margin-bottom: 15px;
color: var(--pearl);
display: flex;
align-items: center;
}
.data-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-bottom: 20px;
}
.data-item {
display: flex;
flex-direction: column;
}
.data-label {
font-size: 0.8rem;
color: rgba(240,240,240,0.6);
margin-bottom: 5px;
}
.data-value {
font-size: 1.1rem;
color: var(--pearl);
}
.data-change {
font-size: 0.8rem;
margin-left: 5px;
}
.crimson {
color: var(--fate-pink);
}
.pearl {
color: var(--pearl);
}
.thought-bubble {
background: rgba(0,0,0,0.3);
padding: 12px;
border-radius: 8px;
border-left: 3px solid var(--gold-accent);
margin-top: 15px;
}
.thought {
font-style: italic;
color: rgba(240,240,240,0.8);
}
.timestamp {
font-size: 0.7rem;
color: rgba(240,240,240,0.5);
text-align: right;
margin-top: 5px;
}
.system-message {
display: flex;
align-items: center;
padding: 15px 20px;
background: rgba(255, 107, 107, 0.1);
border-top: 1px solid rgba(255, 107, 107, 0.3);
}
.message-icon {
font-size: 1.2rem;
margin-right: 10px;
color: var(--warning-red);
}
.message-text {
font-size: 0.9rem;
color: var(--warning-red);
}
footer {
text-align: center;
padding: 30px;
font-size: 0.9rem;
color: rgba(255,255,255,0.4);
border-top: 1px solid rgba(255,255,255,0.1);
position: relative;
}
footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(to right, transparent, var(--gold-accent), transparent);
}
.highlight {
color: var(--fate-pink);
font-weight: 500;
}
.moon-icon {
display: inline-block;
width: 16px;
height: 16px;
margin: 0 5px;
vertical-align: middle;
border-radius: 50%;
}
.crimson-moon {
background: radial-gradient(circle, var(--crimson) 30%, transparent 70%);
box-shadow: 0 0 6px var(--crimson);
}
.pearl-moon {
background: radial-gradient(circle, var(--pearl) 30%, transparent 70%);
box-shadow: 0 0 6px var(--pearl);
}
@keyframes pulse {
0% { opacity: 0.8; }
50% { opacity: 1; }
100% { opacity: 0.8; }
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 响应式设计 */
@media (max-width: 860px) {
body {
width: 95%;
--page-width: 95%;
}
.character-container {
flex-direction: column;
}
.character-portrait {
flex: 0 0 auto;
width: 100%;
height: 400px;
}
.character-comparison {
flex-direction: column;
}
}
月轨玄机
千年之前,天穹悬有双月:绯月 厄洛斯 与素月 塞勒涅。
自那时起,流传着宿命之说:每位女子一生会邂逅两位命定之人,一位如锚,固你魂灵;一位如镜,照你本真。
而今,这古老谶言以玄妙形式重现——一款名为《双月命轨仪》的神秘应用悄然流转于闺阁之间。当命定之人临近,手机便会轻颤示警。若遇第二人,系统将降下天谕:
系统不会明示孰为锚,孰为镜。这抉择,恰似千年前双月凌空时,那些凝望星穹的仕女们所面临的宿命。
命定之锚 · 赤焰囚心
赤焰囚心 · 赫连沉 #R001
世家逆子
血焰美学
暗夜君王
绯月觉醒 · 猎心者临世
赫连氏三公子,地下武斗场"赤焰庭"的绝对主宰。传闻其染血的指节永远佩戴一枚山茶花印戒,那花瓣纹路间暗藏多少不可言说的秘密?
"凡我所属,纵是影翳亦需烙我徽记。"
系统特征:临近时界面涌现血色月相,距离每近一尺,心跳共鸣增强三成
命定之镜 · 素影窥真
素影窥真 · 翡谰 #W017
丹青圣手
月下谪仙
神秘画师
素月映照 · 真容初现
各大画廊竞相追逐的神秘画师"L.F",鲜少现身人前,作品从不绘人,直至那幅《持镜与素影》中惊现user的侧颜,画框边缘镌刻着蝇头小楷:"镜非镜,花非花"。
"最是无声处,惊雷已轰鸣。"
系统特征:临近时界面显现银白月轮,距离每近一尺,脉搏共振增强三成
月轨异变
多数人仅能得见一人,幸者得遇两位,然极少数女子,系统拒绝窥探:
此为诅咒亦或恩赐?当系统对你缄默,当双月同时晦暗——你,是宿命的弃子,抑或是那个重写天机之人?