@import url('fonts.css');

:root {
    /* 浪漫配色方案：暮光与玫瑰 (Twilight & Rose) */
    --bg-gradient-start: #fff0f5; /* 浅粉色 Lavender Blush */
    --bg-gradient-mid: #fff5f8;   /* 极淡蓝紫 Alice Blueish */
    --bg-gradient-end: #ffffff;   /* 纯白 */

    --text-main: #5c4b51;         /* 温暖的深紫灰色 */
    --text-muted: #8c7b83;        /* 柔和的灰色 */

    /* 代码区域配色 - 更加柔和，不刺眼 */
    --code-text: #5c4b51;
    --code-comment: #d45d79;      /* 干燥玫瑰色，用于情话注释 */
    --code-keyword: #a06cd5;      /* 柔和紫 */
    --code-string: #7fab78;       /* 鼠尾草绿 */

    /* 核心强调色 */
    --accent-primary: #ff6b81;    /* 浪漫的主粉红 */
    --accent-hover: #ff8fa3;      /* 浅粉 */
}

html {
    min-height: 100vh;
    background: linear-gradient(180deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 60%, var(--bg-gradient-end) 100%);
}

body {
    background: transparent;
    font-family: "Nunito", "Helvetica Neue", "Microsoft YaHei", sans-serif;
    color: var(--text-main);
    margin: 0;
    padding: 0;
    font-size: 14px;
    overflow: auto;
    -webkit-font-smoothing: antialiased;
}

#mainDiv { width:100%; height:100% }
#loveHeart { float:left; width:670px; height:625px; position: relative }
#garden { width:100%; height:100% }

/* 计时器区域 */
#elapseClock {
    text-align: center;
    font-size: 18px;
    color: #c0392b; /* 深胭脂红，比灰色更浪漫，比粉色更清晰 */
    margin: 10px 0;
    font-weight: 300;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.9); /* 白色柔光，增加通透感 */
}

#elapseClock .digit {
    font-family: "Playfair Display", serif;
    font-size: 36px;
    font-weight: 400;
    color: #c0392b;
    margin: 0 2px;
}

#words {
    font-family: "Nunito", sans-serif;
    width: 500px;
    font-size: 24px;
    color: var(--text-muted);
}

#messages {
    display: none;
    font-size: 28px;
    color: var(--text-main); /* 修改为更深沉的颜色 */
    text-align: center;
    font-family: "Great Vibes", cursive; /* 浪漫的手写体标题 */
    line-height: 1.5;
    font-weight: 400;
}

#loveu {
    padding: 5px;
    font-size: 35px;
    margin-top: 80px;
    margin-right: 120px;
    text-align: right;
    display: none;
    color: var(--text-main); /* 修改为更深沉的颜色 */
    font-family: "Great Vibes", cursive;
    animation: fadeIn 2s;
}

#loveu .signature {
    margin-top: 10px;
    font-size: 24px;
    font-style: normal;
    color: var(--text-muted);
}

#clickSound { display:none }

/* 代码区域 */
#code {
    float: left;
    width: 440px;
    height: 400px;
    color: var(--code-text);
    /* 使用专门的代码字体 */
    font-family: "Fira Code", "Consolas", monospace;
    font-size: 16px;
    line-height: 1.8;
}

#code .string { color: var(--code-string); }
#code .keyword { color: var(--code-keyword); font-weight: bold; }
#code .placeholder { margin-left: 15px; }
#code .space { margin-left: 7px; }

/* 代码中的注释 - 浪漫的核心 */
#code .comments {
    color: var(--code-comment);
    font-family: "Great Vibes", cursive;
    font-size: 24px; /* 手写体稍微大一点才容易看清 */
}

#copyright { margin-top: 10px; text-align: center; width: 100%; color: #999; }
#copyright a { color: #999; text-decoration: none; }

#errorMsg { width: 100%; text-align: center; font-size: 24px; position: absolute; top: 100px; left: 0; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.space {
    display: block;
    height: 20px;
}