/* 导入字体 */
@font-face {
    font-family: 'love-zh';
    src: url('https://ziyanlovejintao.pages.dev/source/love-zh.woff') format('woff');
}

@font-face {
    font-family: 'love-en';
    src: url('https://ziyanlovejintao.pages.dev/source/love-en.woff') format('woff');
}

/* 背景 */
body {
    background: #ffebff;
}

/* 欢迎词 */
.welcome {
    width: 100%;
    text-align: center;
    margin: 0;
    letter-spacing: -55px;
    filter: contrast(10);
    animation: welcome 3s forwards;
}

.welcome-word {
    font-family: love-zh;
    font-size: 50px;
}

@keyframes welcome {
    from {
        letter-spacing: -55px;
    }

    to {
        letter-spacing: 0px;
    }
}

.weather-container {
    padding: 10px;
    margin: 10px;
    position: absolute;
    top: 50px;
    right: 0%;
    text-align: right;
    font-size: 20px;
    font-family: love-zh;
}

/* 诗词 */
/* 父级容器 */
#quoteContainer {
    margin: 10px;
    position: relative;
    /* 绝对定位 */
    padding: 10px;
    background-color: rgba(88, 178, 36, 0.5);
    /* 半透明背景 */
    border-radius: 10px;
    /* 圆角 */
    text-align: center;
    /* 内容居中对齐 */
    color: white;
    /* 白色文字 */
    width: auto;
    /* 宽度 */
    display: inline-block;
    font-family: love-zh;
    max-width: 65%;
}

/* 子级样式 */
#quote {
    position: relative;
    /* 相对定位 */
    font-size: 24px;
    /* 字体大小 */
    margin-bottom: 10px;
    /* 名言和作者之间的间距 */
}

#author {
    position: relative;
    /* 相对定位 */
    font-size: 18px;
    /* 字体大小 */
    font-style: italic;
    /* 斜体 */
    text-align: right;

}

/* 碎碎念 */
#content-container {
    width: 70%;
}

.card {
    margin: 10px;
    position: relative;
    width: 100%;
    line-height: 1.8;
    border-radius: 10px;
    background: repeating-linear-gradient(-45deg, #e8544d 0 10px, #fff 10px 20px, #75adf8 20px 30px, #fff 30px 40px) -20px, -20px/ 200% 200%;
    padding: 5px;
    transition: 0.2s;
    font-size: larger;
    text-align: justify;
    text-justify: inter-word;
}

.card:hover {
    background-position: 0 0;
}

.card-text {
    background-color: #fff;
    border-radius: inherit;
}

.card-end {
    text-align: right;
}


.rongqi {
    --m: 200px;
    --s: min(20%, var(--m));
    width: var(--s);
    position: fixed;
    right: 0px;
    top: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    /* 水平居中 */
    overflow: hidden;
}

/* 天气 */
.weather-container {
    text-align: center;
    position: relative;

    /* 根据需要调整间距 */
}

.weatherword {
    text-align: center;
    position: relative;

}

/* 可爱的头像 */
.img-user {
    position: relative;
    /* 确保它在文档流中 */
    --b: 5px;
    /* 边框厚度 */
    --c: #C02942;
    /* 边框颜色 */
    --f: 1;
    /* 初始缩放比例 */
    width: 100%;
    aspect-ratio: 1;
    padding-top: calc(var(--s)/5);
    cursor: pointer;
    border-radius: 0 0 999px 999px;
    --_g: 50%/calc(100%/var(--f)) 100% no-repeat content-box;
    --_o: calc((1/var(--f) - 1)*var(--s)/2 - var(--b));
    outline: var(--b) solid var(--c);
    outline-offset: var(--_o);
    background:
        radial-gradient(circle closest-side,
            #ECD078 calc(99% - var(--b)), var(--c) calc(100% - var(--b)) 99%, #0000) var(--_g);
    mask: linear-gradient(#000 0 0) no-repeat 50% calc(1px - var(--_o)) / calc(100% / var(--f) - 2 * var(--b) - 2px) 50%,
        radial-gradient(circle closest-side, #000 99%, #0000) var(--_g);

    -webkit-mask: linear-gradient(#000 0 0) no-repeat 50% calc(1px - var(--_o)) / calc(100% / var(--f) - 2 * var(--b) - 2px) 50%,
        radial-gradient(circle closest-side, #000 99%, #0000) var(--_g);

    transform: scale(var(--f));
    transition: 0.8s;

}

.img-user:hover {
    --f: 1.2;
    /* hover scale */
}

.playable {
    perspective: 1000px;
    /* 让 3D 旋转生效 */
    display: inline-block;
}

.card1 {
    width: 100%;
    height: 100%;
    display: grid;
    /* 关键：使用 Grid 让 front 和 back 叠加 */
    place-items: center;
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
}

.face {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    /* 让背面隐藏 */
    grid-area: 1 / 1;
    /* 让 front 和 back 共享同一个 Grid 区域 */
}

.front {
    transform: rotateY(0deg);
}

.back {
    transform: rotateY(180deg);
    font-family: love-en;
    font-size: 10px;
    text-align: center;
    color: #000;
    background-color: transparent;
}

.front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.playable:hover .card1 {
    transform: rotateY(180deg);
}

#record-time {
    font-family: love-zh;
}

/* 控制 */
.control {
    font-family: love-zh;
    width: 100%;
    margin: auto;
    padding: 10px;
    border-radius: 10px;

}

#previous-week {
    padding: 10px 10px;
    background-color: azure;
    border-radius: 10px;
}

#next-week {
    border-radius: 10px;
    background-color: cornsilk;
    padding: 10px 10px;
}

#more {
    border-radius: 10px;
    background-color: chocolate;
    padding: 10px;
}

.canvas {
    bottom: 0px;
    position: fixed;
    margin: 10px;
}

.loading {
    position: fixed;
    bottom: 10px;
}

.loadtime {
    right: 5px;
    position: fixed;
    bottom: 10px;
    font-family: love-en;

}

/* 弹窗样式 */
#updateBanner {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    font-family: love-zh;
    /* 最大宽度设为600px，防止太大 */
    background: #f8f8f8;
    color: #333;
    text-align: center;
    padding: 15px;
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    display: none;
    border-radius: 8px;
    /* 边角圆润 */
    box-sizing: border-box;
    /* 计算padding和border的宽度 */
}

/* 按钮样式 */
#updateBanner button {
    margin-left: 15px;
    padding: 8px 16px;
    background-color: #5c6bc0;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;

}

/* 
/* 响应式调整 */
@media (max-width: 768px) {
    #updateBanner {
        width: 95%;
        /* 小屏幕上宽度设置为 95% */
        padding: 10px;
        /* 小屏幕上稍微减少 padding*/
    }

    #updateBanner button {
        padding: 6px 12px;
        /* 按钮在小屏幕上稍微变小 */
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    #updateBanner {
        width: 100%;
        /* 超小屏幕上宽度设为 100% */
        padding: 8px;
        /* 再次调整 padding */
    }

    #updateBanner button {
        padding: 5px 10px;
        /* 按钮进一步减小 */
        font-size: 12px;
    }
}