:root {
    --gold: #ffcf40;
    --red: #d32f2f;
    --dark-bg: #4a0000;
    --glass-bg: rgba(255, 255, 255, 0.98);
}

body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    background-color: var(--dark-bg);
    font-family: 'STKaiti', 'Microsoft YaHei', serif;
    color: white; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}

canvas { position: fixed; top: 0; left: 0; z-index: 1; pointer-events: none; }

/* --- 核心容器 --- */
.app-wrapper {
    position: relative; z-index: 10;
    width: 85vw;
    max-width: 750px;
    display: flex; flex-direction: column; align-items: center;
    transition: all 0.5s ease;
}

/* --- 标题 --- */
.year-text { 
    font-size: clamp(2rem, 8vw, 3.2rem); 
    color: var(--gold); font-weight: 900; margin-bottom: 2vh; 
    text-shadow: 0 0 15px rgba(255, 207, 64, 0.5);
    letter-spacing: 2px;
}

/* --- 倒计时 --- */
.timer { display: flex; gap: 2.5vw; justify-content: center; margin-bottom: 3vh; }

.time-unit {
    background: rgba(0,0,0,0.75); border: 0.4vw solid var(--gold);
    padding: 2vw; border-radius: 2vw; 
    min-width: 12vw; max-width: 120px; text-align: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
.time-unit b { 
    display: block; 
    font-size: clamp(2.2rem, 7vw, 4rem); 
    color: var(--gold); 
    font-family: 'Arial Black', sans-serif;
    line-height: 1.1;
}
.time-unit span { font-size: 1rem; font-weight: bold; margin-top: 5px; display: block; }

/* --- 日历主体 --- */
.calendar-main {
    position: relative; width: 100%;
    background: var(--glass-bg); border-radius: 3vw;
    padding: 2vw; box-sizing: border-box; color: #333;
    box-shadow: 0 1.5vw 5vw rgba(0,0,0,0.7);
}

.nav-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 6vw; height: 6vw; max-width: 55px; max-height: 55px;
    background: var(--red); color: var(--gold);
    border: 2px solid var(--gold); border-radius: 50%; cursor: pointer;
    z-index: 30; display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; transition: 0.3s;
}
.btn-prev { left: -3vw; }
.btn-next { right: -3vw; }
.btn-prev:hover, .btn-next:hover { transform: translateY(-50%) scale(1.1); }

.calendar-viewport { 
    width: 100%; overflow-x: auto; 
    scroll-snap-type: x mandatory; 
    scroll-behavior: smooth;
}
.calendar-viewport::-webkit-scrollbar { display: none; }

.month-container { display: flex; }
.month-page { min-width: 100%; scroll-snap-align: start; box-sizing: border-box; padding: 0 3vw; }

.month-name { 
    text-align: center; 
    font-size: clamp(1.8rem, 5vw, 2.5rem); 
    font-weight: bold; color: var(--red); margin-bottom: 2.5vh; 
}

/* --- 日历网格 --- */
.grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.2vw; }

.cell {
    aspect-ratio: 1 / 1; 
    display: flex; align-items: center; justify-content: center;
    position: relative; font-weight: 900; background: #fff; border-radius: 15%;
    font-size: clamp(1.2rem, 3vw, 1.8rem); 
    border: 1px solid #eee;
}

/* --- 特殊状态样式 --- */

/* 1. 已过去的日子 (红灯笼) */
.lantern-icon {
    position: absolute; width: 95%; height: 95%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 130"><defs><radialGradient id="g" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="%23ff4d4d"/><stop offset="100%" stop-color="%23b30000"/></radialGradient></defs><path d="M50 5 V15" stroke="%23ffcf40" stroke-width="4"/><ellipse cx="50" cy="55" rx="32" ry="38" fill="url(%23g)"/><path d="M50 17 Q30 55 50 93 M50 17 Q70 55 50 93" fill="none" stroke="%23ffcf40" stroke-width="1.5" opacity="0.6"/><rect x="30" y="15" width="40" height="8" rx="2" fill="%23ffcf40"/><rect x="30" y="87" width="40" height="8" rx="2" fill="%23ffcf40"/><path d="M45 110 V125 M50 110 V130 M55 110 V125" stroke="%23ffcf40" stroke-width="2"/></svg>') no-repeat center;
    background-size: contain; z-index: 5;
}
.passed { color: transparent !important; }
/* 即使是节日，如果过去了也变灰一点 */
.passed.festival-day { background-color: #f0f0f0; border-color: #eee; }

/* 2. 普通传统节日 (腊八、小年等) */
.festival-day {
    background-color: #fff5f5;
    border: 1px solid #ffcccc;
    color: var(--red);
}
.festival-day::before {
    content: attr(data-name);
    position: absolute; bottom: 2px; left: 0; width: 100%;
    text-align: center;
    font-size: clamp(0.6rem, 2vw, 0.8rem);
    font-weight: normal; color: var(--red); line-height: 1;
}

/* 3. 春节当天 (高亮) */
.target-day { 
    background: #fffde7 !important; 
    border: 3px solid var(--gold) !important; 
    color: var(--red) !important;
    z-index: 2;
}
.target-day::after { 
    content: '🐎'; position: absolute; top: -1.5vw; right: -1.5vw; 
    font-size: clamp(1.2rem, 3vw, 2.5rem); 
}
.target-day::before { 
    content: '春节'; position: absolute; bottom: -2.5vh; left: 50%; transform: translateX(-50%); 
    font-size: 0.9rem; color: var(--gold); font-weight: bold; white-space: nowrap; 
    text-shadow: 1px 1px 2px #000; 
}

/* 4. 冲刺模式 (最后24小时) */
.state-final-day .calendar-main { display: none; }
.state-final-day .year-text { font-size: 15vw; margin-top: -5vh; }
.state-final-day .timer { transform: scale(2); }
.state-final-day .time-unit:first-child { display: none; }

.hint { text-align: center; font-size: 1rem; color: #bbb; margin-top: 1.5vh; font-weight: bold; }

/* 移动端微调 */
@media (max-width: 500px) {
    .app-wrapper { width: 92vw; }
    .nav-btn { width: 40px; height: 40px; }
    .btn-prev { left: -10px; }
    .btn-next { right: -10px; }
    .time-unit { min-width: 18vw; }
}