/* 使用 Noto Serif SC 字体，营造古典感 */
body {
    font-family: 'Noto Serif SC', serif;
    transition: background-color 0.5s, color 0.5s;
}

/* 主题配色方案 */
.theme-jade { background-color: #f0f5f1; color: #1a3a3a; } /* 仿翡翠绿，搭配米白 */
.theme-imperial { background-color: #fdfaf2; color: #0d1b2a; } /* 仿乾隆蓝，搭配淡黄 */
.theme-crimson { background-color: #fff8f1; color: #5c1a1b; } /* 仿故宫红，搭配象牙白 */
.theme-parchment { background-color: #f5eeda; color: #4e342e; } /* 仿宣纸黄，搭配深棕 */

/* 不同主题下元素的颜色 */
.theme-jade .static-card { background-color: #d1e2d8; color: #1a3a3a; }
.theme-jade .header-decoration { border-color: #6a9c89; }
.theme-jade .day { color: #6a9c89; }

.theme-imperial .static-card { background-color: #fff8dc; color: #0d1b2a; }
.theme-imperial .header-decoration { border-color: #e6b800; }
.theme-imperial .day { color: #e6b800; }

.theme-crimson .static-card { background-color: #faebd7; color: #5c1a1b; }
.theme-crimson .header-decoration { border-color: #b94547; }
.theme-crimson .day { color: #b94547; }

.theme-parchment .static-card { background-color: #fffbf0; color: #4e342e; border: 1px solid #dcd1b8;}
.theme-parchment .header-decoration { border-color: #4e342e; }
.theme-parchment .day { color: #4e342e; }

/* -- Card Color Variations -- */
/* Jade */
.theme-jade .card-review, .theme-jade .card-reading, .theme-jade .card-culture, .theme-jade .card-homework { background-color: #e0ebe5; }
.theme-jade .flip-card-front.static-card { background-color: #c1d1c8; }
.theme-jade .flip-card-back.static-card { background-color: #b1c1b8; }
/* Imperial */
.theme-imperial .card-review, .theme-imperial .card-reading, .theme-imperial .card-culture, .theme-imperial .card-homework { background-color: #fffaf0; }
.theme-imperial .flip-card-front.static-card { background-color: #f5efd2; }
.theme-imperial .flip-card-back.static-card { background-color: #ebe5c8; }
/* Crimson */
.theme-crimson .card-review, .theme-crimson .card-reading, .theme-crimson .card-culture, .theme-crimson .card-homework { background-color: #fff5eb; }
.theme-crimson .flip-card-front.static-card { background-color: #f0e1ca; }
.theme-crimson .flip-card-back.static-card { background-color: #e6d7bd; }
/* Parchment */
.theme-parchment .card-review, .theme-parchment .card-reading, .theme-parchment .card-culture, .theme-parchment .card-homework { background-color: #fffdf5; }
.theme-parchment .flip-card-front.static-card { background-color: #f5f1e6; }
.theme-parchment .flip-card-back.static-card { background-color: #ebe7dc; }

/* 卡片样式 */
.static-card {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.static-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.separator {
    /* 主题相关的颜色在下面定义 */
}
.theme-jade .separator { border-color: #c1d1c8; }
.theme-imperial .separator { border-color: #e6dca9; }
.theme-crimson .separator { border-color: #e8d7c7; }
.theme-parchment .separator { border-color: #dcd1b8; }

.theme-button {
    transition: all 0.2s ease;
    border: 2px solid transparent;
}
.theme-button.active {
    transform: scale(1.1);
    border-color: currentColor;
}

/* 竖排文字 */
.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin-bottom: 20px;
    border-radius: 8px; /* Added for rounded corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Added for shadow */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 段落首行缩进 */
.static-card p:not(.opacity-80) {
    text-indent: 2em;
}

/* 翻转卡片样式 */
.flip-card {
    background-color: transparent;
    height: 220px;
    perspective: 1000px;
    cursor: pointer;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-back {
    transform: rotateY(180deg);
}