/**
 * 蓝逸轩计时器小工具 - 前台样式
 *
 * PHP 只输出「数据」，样式的合成与呈现全部在本文件完成：
 *   --lyx-text / --lyx-days / --lyx-hours / --lyx-minutes / --lyx-seconds   文字与四个数字的颜色
 *   --lyx-bg-start-r|g|b / --lyx-bg-end-r|g|b    渐变起止色的 RGB 通道
 *   --lyx-bg-overlay       有背景图时，渐变蒙版的不透明度（0-100）
 *   --lyx-bg-image         背景图（url('...')）
 *   --lyx-inner-r|g|b / --lyx-inner-opacity      内层时间卡的背景色与不透明度（0-100）
 *   --lyx-shadow-strength  内层阴影强度（0-100，0 为无阴影）
 *   --lyx-blur             内层毛玻璃（0 关 / 1 开）
 *   --lyx-radius / --lyx-radius-inner            自定义圆角数值（px 单位由本文件补）
 *
 * 夜间适配：本文件通过 -dark 后缀的变量与状态类覆盖呈现，
 * 不改动 PHP 注入的原值，因此不需要 !important。
 */

/* 透明容器 - 只负责传递主题圆角，间距由主题卡片控制 */
.lyx-love-timer-wrapper {
    margin: 0;
    padding: 0;
    border-radius: inherit;
}

/* ---------------- 卡片外层 ---------------- */

.lyx-love-timer-container {
    position: relative;
    overflow: hidden;
    text-align: center;
    margin: 0;
    padding: 22px 16px 18px;
    /* 跟随主题小工具卡片的圆角 */
    border-radius: inherit;
    background-color: transparent;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    /* 卡片外壳交给主题，自身不再画阴影 */
    box-shadow: none;
}

/* 右上角高光，玻璃质感 */
.lyx-love-timer-container::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--lyx-gloss, linear-gradient(160deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 42%));
}

/* 四种背景组合，由 PHP 输出对应的状态类名切换 */
.lyx-love-timer-container--bg-color {
    background-image: linear-gradient(
        135deg,
        rgba(var(--lyx-bg-start-r, 245), var(--lyx-bg-start-g, 247), var(--lyx-bg-start-b, 250), 1) 0%,
        rgba(var(--lyx-bg-end-r, 195), var(--lyx-bg-end-g, 207), var(--lyx-bg-end-b, 226), 1) 100%
    );
}
.lyx-love-timer-container--bg-image {
    background-image: var(--lyx-bg-image, none);
}
.lyx-love-timer-container--bg-both {
    background-image:
        linear-gradient(
            135deg,
            rgba(var(--lyx-bg-start-r, 245), var(--lyx-bg-start-g, 247), var(--lyx-bg-start-b, 250), calc(var(--lyx-bg-overlay, 60) / 100)) 0%,
            rgba(var(--lyx-bg-end-r, 195), var(--lyx-bg-end-g, 207), var(--lyx-bg-end-b, 226), calc(var(--lyx-bg-overlay, 60) / 100)) 100%
        ),
        var(--lyx-bg-image, none);
}
.lyx-love-timer-container--bg-none {
    background-image: none;
}

/* 有背景图时加强文字可读性 */
.lyx-love-timer-container--has-image {
    box-shadow: var(--lyx-card-shadow-dark, inset 0 0 60px rgba(0, 0, 0, .12), 0 6px 18px rgba(0, 0, 0, .12));
}

/* 自定义圆角模式（跟随主题时保持 inherit，由 JS 写入主题圆角） */
.lyx-love-timer-container--radius {
    border-radius: calc(var(--lyx-radius, 18) * 1px);
}

/* ---------------- 头像行 ---------------- */

.lyx-love-timer-avatars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 16px;
}

.lyx-love-timer-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 2px solid var(--lyx-avatar-ring, rgba(255, 255, 255, .85));
    box-shadow: var(--lyx-avatar-shadow, 0 0 0 4px rgba(255, 255, 255, .18), 0 6px 14px rgba(31, 38, 135, .22));
}

.lyx-love-timer-center {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: block;
    object-fit: cover;
    filter: drop-shadow(0 4px 8px rgba(31, 38, 135, .25));
    animation: lyx-love-timer-pulse 2.4s ease-in-out infinite;
}

@keyframes lyx-love-timer-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .lyx-love-timer-center { animation: none; }
}

/* ---------------- 内层时间卡（玻璃） ---------------- */

.lyx-love-timer-content {
    /* 卡片宽度作为容器，供下面数字字号用 cqw 自适应缩放 */
    container-type: inline-size;
    position: relative;
    z-index: 1;
    border-radius: inherit;
    padding: 14px 12px 12px;
    background: var(
        --lyx-bg-inner-dark,
        rgba(
            var(--lyx-inner-r, 255), var(--lyx-inner-g, 255), var(--lyx-inner-b, 255),
            calc(var(--lyx-inner-opacity, 72) / 100)
        )
    );
    border: 1px solid var(--lyx-inner-border, rgba(255, 255, 255, .7));
    /* 阴影强度 20 时正好等于 0 8px 26px rgba(31,38,135,.16) */
    --lyx-shadow-scale: calc(var(--lyx-shadow-strength, 20) / 20);
    box-shadow: var(
        --lyx-inner-shadow-dark,
        0 calc(8px * var(--lyx-shadow-scale)) calc(26px * var(--lyx-shadow-scale))
        rgba(31, 38, 135, calc(.16 * var(--lyx-shadow-scale)))
    );
    -webkit-backdrop-filter: var(--lyx-inner-blur-dark, blur(calc(14px * var(--lyx-blur, 1))) saturate(160%));
    backdrop-filter: var(--lyx-inner-blur-dark, blur(calc(14px * var(--lyx-blur, 1))) saturate(160%));
}

/* 内层不透明度为 0：背景、描边、阴影、毛玻璃一并去掉，彻底隐形 */
.lyx-love-timer-content--plain {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* 内层圆角自定义模式 */
.lyx-love-timer-content--radius {
    border-radius: calc(var(--lyx-radius-inner, 10) * 1px);
}

/* ---------------- 徽标 ---------------- */

.lyx-love-timer-badge {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1.4;
    margin-bottom: 10px;
    color: var(--lyx-text-dark, var(--lyx-text, #2c3e50));
}

/* ---------------- 计时器：一排 4 个等宽药丸 ---------------- */

.lyx-love-timer-time {
    display: flex;
    gap: 5px;
    letter-spacing: 0;
}

.lyx-love-timer-time .lyx-seg {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 7px 2px 5px;
    border-radius: 10px;
    background: var(
        --lyx-pill-bg,
        linear-gradient(180deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .55) 100%)
    );
    box-shadow: var(
        --lyx-pill-shadow,
        inset 0 0 0 1px rgba(255, 255, 255, .9), 0 2px 6px rgba(31, 38, 135, .08)
    );
}

/* 四个数字大小完全一致，只靠颜色区分；字号随卡片宽度自适应，窄侧栏也不会溢出格子 */
.lyx-love-timer-time .num {
    font-weight: 800;
    line-height: 1.12;
    font-variant-numeric: tabular-nums;
    font-size: 20px; /* 不支持容器查询时的兜底 */
    font-size: clamp(14px, 8.2cqw, 22px);
    text-shadow: var(--lyx-num-shadow, 0 1px 6px rgba(255, 255, 255, .75));
}

.lyx-love-timer-time .unit {
    font-weight: 700;
    letter-spacing: 1px;
    opacity: .6;
    font-size: 11px; /* 不支持容器查询时的兜底 */
    font-size: clamp(9px, 4.2cqw, 11px);
    color: var(--lyx-text-dark, var(--lyx-text, #2c3e50));
}

.lyx-love-timer-time .days    { color: var(--lyx-days-dark,    var(--lyx-days, #e74c3c)); }
.lyx-love-timer-time .hours   { color: var(--lyx-hours-dark,   var(--lyx-hours, #3498db)); }
.lyx-love-timer-time .minutes { color: var(--lyx-minutes-dark, var(--lyx-minutes, #2ecc71)); }
.lyx-love-timer-time .seconds { color: var(--lyx-seconds-dark, var(--lyx-seconds, #f39c12)); }

/* ---------------- 移动端适配 ---------------- */

@media (max-width: 480px) {
    .lyx-love-timer-container {
        padding: 16px 12px 14px;
    }
    .lyx-love-timer-avatars {
        gap: 10px;
        margin-bottom: 12px;
    }
    .lyx-love-timer-avatar {
        width: 44px;
        height: 44px;
    }
    .lyx-love-timer-center {
        width: 32px;
        height: 32px;
    }
    .lyx-love-timer-content {
        padding: 12px 9px 9px;
    }
    .lyx-love-timer-badge {
        font-size: 14px;
        letter-spacing: 2px;
    }
    .lyx-love-timer-time {
        gap: 4px;
    }
}

/* ---------------- 夜间（跟随系统主题，无需设置项） ---------------- */

@media (prefers-color-scheme: dark) {
    .lyx-love-timer-container {
        /* 只定义 -dark 变量与夜间专属呈现，PHP 注入的原值保持不变 */
        --lyx-text-dark: #e9edf5;
        --lyx-days-dark: #ff8a8a;
        --lyx-hours-dark: #7ab8ff;
        --lyx-minutes-dark: #7ee0a1;
        --lyx-seconds-dark: #ffd166;
        --lyx-gloss: linear-gradient(160deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 42%);
        --lyx-avatar-ring: rgba(255, 255, 255, .14);
        --lyx-avatar-shadow: 0 0 0 4px rgba(255, 255, 255, .05), 0 6px 14px rgba(0, 0, 0, .45);
        --lyx-card-shadow-dark: inset 0 0 60px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .35);
        --lyx-inner-border: rgba(255, 255, 255, .1);
        --lyx-inner-shadow-dark: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 22px rgba(0, 0, 0, .38);
        --lyx-inner-blur-dark: blur(10px);
        --lyx-pill-bg: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .04) 100%);
        --lyx-pill-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 2px 8px rgba(0, 0, 0, .28);
        --lyx-num-shadow: 0 2px 10px rgba(0, 0, 0, .45);
    }

    /* 内层时间卡转黑玻璃 */
    .lyx-love-timer-content {
        --lyx-bg-inner-dark: rgba(18, 20, 26, .55);
    }

    /* 渐变：有背景图时按蒙版强度叠加，无背景图时用固定的深色渐变 */
    .lyx-love-timer-container--bg-color {
        background-image: linear-gradient(135deg, #2b3350 0%, #1d2233 100%);
    }
    .lyx-love-timer-container--bg-both {
        background-image:
            linear-gradient(
                135deg,
                rgba(43, 51, 80, calc(var(--lyx-bg-overlay, 60) / 100)) 0%,
                rgba(29, 34, 51, calc(var(--lyx-bg-overlay, 60) / 100)) 100%
            ),
            var(--lyx-bg-image, none);
    }
}