/* ================================================================
   theme-light.css —— 亮色「晴空」主题
   浅蓝渐变背景，左侧旋转地球，右侧翻牌时钟
   ================================================================ */

body.theme-light {
    background: #d6e9fb;
    /* 地球在左，时钟整体靠右 */
    justify-content: flex-end;
}

body.theme-light .clock-wrapper {
    margin-right: 6vw;
}

/* ---- 加载闪屏 ---- */
body.theme-light .loading-shimmer {
    background: #e8f3fd;
    color: rgba(60, 110, 180, 0.40);
    text-shadow: 0 0 24px rgba(120, 175, 235, 0.45);
}

/* ---- 日期 ---- */
body.theme-light .date-display {
    color: rgba(35, 80, 145, 0.88);
    letter-spacing: 5px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(120, 165, 220, 0.38);
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.8);
    box-shadow:
        0 4px 22px rgba(90, 140, 205, 0.16),
        inset 0 0 20px rgba(255, 255, 255, 0.45);
}

body.theme-light .date-display::before {
    content: '☀ ';
    color: rgba(235, 165, 60, 0.95);
    text-shadow: 0 0 12px rgba(240, 180, 80, 0.65);
}

/* ---- 时钟主体 ---- */
body.theme-light .clock {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(120, 165, 220, 0.32);
    box-shadow:
        0 10px 40px rgba(80, 130, 195, 0.18),
        0 24px 80px rgba(80, 130, 195, 0.12),
        inset 0 0 60px rgba(255, 255, 255, 0.40);
}

/* ---- 翻牌卡片 ---- */
body.theme-light .flip-card {
    box-shadow:
        0 4px 18px rgba(80, 130, 195, 0.20),
        0 1px 4px rgba(80, 130, 195, 0.14);
}

body.theme-light .flip-face {
    background: linear-gradient(160deg, #ffffff 0%, #f2f8fe 55%, #e6f0fa 100%);
    border: 1px solid rgba(120, 165, 220, 0.42);
    box-shadow:
        inset 0 0 24px rgba(255, 255, 255, 0.65),
        inset 0 -14px 28px rgba(140, 180, 225, 0.12);
}

body.theme-light .flip-back {
    background: linear-gradient(160deg, #f2f8fe, #e2edf9);
    border-color: rgba(100, 150, 210, 0.48);
}

/* ---- 数字：晴空蓝 ---- */
body.theme-light .digit {
    color: #1c4b8a;
    text-shadow:
        0 0 10px rgba(90, 150, 220, 0.28),
        0 0 26px rgba(90, 150, 220, 0.14);
    animation: digitBreathLight 8s ease-in-out infinite;
}

@keyframes digitBreathLight {
    0%, 100% {
        text-shadow:
            0 0 10px rgba(90, 150, 220, 0.28),
            0 0 26px rgba(90, 150, 220, 0.14);
    }
    50% {
        text-shadow:
            0 0 16px rgba(90, 150, 220, 0.42),
            0 0 40px rgba(90, 150, 220, 0.24);
    }
}

body.theme-light .flip-card.flipping .digit {
    filter: brightness(1.12);
}

/* ---- 卡片中线 ---- */
body.theme-light .flip-unit::after {
    height: 1.5px;
    background: linear-gradient(90deg,
        transparent,
        rgba(90, 145, 210, 0.40),
        rgba(60, 115, 190, 0.70),
        rgba(90, 145, 210, 0.40),
        transparent);
    box-shadow: 0 0 10px rgba(90, 145, 210, 0.30);
    opacity: 0.75;
}

body.theme-light .flip-unit::before {
    background: radial-gradient(ellipse at center, rgba(90, 145, 210, 0.14) 0%, transparent 70%);
}

/* ---- 冒号 ---- */
body.theme-light .colon {
    color: rgba(50, 100, 170, 0.65);
    animation: colonPulseLight 2s ease-in-out infinite alternate;
}

@keyframes colonPulseLight {
    0% {
        opacity: 0.40;
        text-shadow: 0 0 6px rgba(90, 145, 210, 0.20);
    }
    100% {
        opacity: 0.95;
        text-shadow:
            0 0 12px rgba(90, 150, 220, 0.55),
            0 0 28px rgba(90, 150, 220, 0.30);
    }
}

/* ---- 悬浮按钮 ---- */
body.theme-light .fullscreen-btn,
body.theme-light .settings-btn {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(120, 165, 220, 0.38);
    color: rgba(55, 105, 175, 0.85);
    box-shadow:
        0 4px 20px rgba(80, 130, 195, 0.20),
        inset 0 0 16px rgba(255, 255, 255, 0.50);
}

body.theme-light .fullscreen-btn:hover,
body.theme-light .settings-btn:hover {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(80, 135, 205, 0.60);
    color: #1c4b8a;
    box-shadow:
        0 0 22px rgba(90, 150, 220, 0.35),
        0 6px 26px rgba(80, 130, 195, 0.28);
}

/* ---- 设置面板 ---- */
body.theme-light .settings-panel {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(120, 165, 220, 0.40);
    box-shadow:
        0 12px 40px rgba(80, 130, 195, 0.22),
        inset 0 0 24px rgba(255, 255, 255, 0.55);
}

body.theme-light .panel-title {
    color: rgba(45, 95, 165, 0.80);
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.8);
}

body.theme-light .panel-label {
    color: rgba(80, 125, 180, 0.60);
}

body.theme-light .theme-option {
    background: rgba(230, 242, 252, 0.55);
    border: 1px solid rgba(120, 165, 220, 0.28);
    color: rgba(45, 90, 155, 0.85);
}

body.theme-light .theme-option:hover {
    background: rgba(210, 232, 250, 0.75);
    border-color: rgba(80, 135, 205, 0.55);
    color: #1c4b8a;
    box-shadow: 0 0 16px rgba(90, 150, 220, 0.22);
}

body.theme-light .theme-option.is-active {
    border-color: rgba(70, 125, 200, 0.65);
    background: rgba(195, 225, 250, 0.80);
    color: #1c4b8a;
    box-shadow:
        0 0 20px rgba(90, 150, 220, 0.28),
        inset 0 0 14px rgba(255, 255, 255, 0.55);
}

body.theme-light .theme-check {
    color: #2f6cb8;
    text-shadow: 0 0 8px rgba(90, 150, 220, 0.55);
}

/* ---- 响应式：移动端地球移到上方，时钟回中 ---- */
@media (max-width: 720px) {
    body.theme-light {
        justify-content: center;
    }
    body.theme-light .clock-wrapper {
        margin-right: 0;
        margin-top: 16vh;
    }
}