/* ============================================================
   fclk.css —— 「翻页时钟」独立组件样式
   - 看板卡片：白色圆角卡，内部为深色翻页数字（CSS 3D 上下半页翻转动画）
   - 三种形态：full 完整版（HH:MM:SS + 日期）/ mini 简版（HH:MM + 秒 + 日期）/
     bar 横条（HH:MM + 星期），卡片箭头循环切换。
   - 卡片背景固定白色（与下班倒计时 / 日历组件一致），深色主题下不反色。
   ============================================================ */

/* ===== 看板卡片外壳：宽度撑满左侧组件区，高度 = 两排网址图标 ===== */
.widget-card[data-widget="flipclock"] {
    width: 100%;
    max-width: 100%;
    background: #000000;
    border: none;
    border-radius: 20px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
    padding: 12px 12px;
    height: var(--widget-h);
    margin-bottom: 0;
    color: #d8dae0;
    overflow: visible;
}
.widget-card[data-widget="flipclock"]:hover {
    border: none;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}

/* 卡片内不显示标题：标题栏透明覆盖在卡片顶部，仅作拖拽区与移除按钮容器 */
.widget-card[data-widget="flipclock"] .widget-head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    margin-bottom: 0;
    z-index: 5;
}
.widget-card[data-widget="flipclock"] .widget-title { visibility: hidden; }
.widget-card[data-widget="flipclock"] .widget-remove {
    background: rgba(255, 255, 255, 0.12);
    color: #c7cad3;
}
.widget-card[data-widget="flipclock"] .widget-remove:hover { background: rgba(255, 95, 109, 0.9); color: #fff; }
.widget-card[data-widget="flipclock"] .widget-body {
    overflow-y: auto;
    overflow-x: hidden;
}

/* 卡片下方的组件名称（与网站快捷方式名称同款：白字 + 阴影，适配壁纸背景） */
.fclk-card-name {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--icon-gap);
    height: var(--icon-name-h);
    line-height: var(--icon-name-h);
    text-align: center;
    font-size: var(--icon-name-size, 12px);
    font-weight: 600;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/* 三套布局共存于一个卡片，未选中的用 [hidden] 收起 */
.fclk[hidden] { display: none; }

/* ===== 卡片上的左右切换箭头（探出卡片两侧外缘，hover 显现） ===== */
.fclk-card-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    z-index: 6;
}
.fclk-card-nav .fclk-nav-arrow {
    pointer-events: auto;
    cursor: pointer;
    width: 30px;
    height: 30px;
    margin: 0 -22px;
    border-radius: 50%;
    line-height: 28px;
    font-size: 22px;
    text-align: center;
    background: rgba(255, 255, 255, 0.92);
    color: #8a92a6;
    box-shadow: 0 4px 12px rgba(31, 45, 80, 0.18);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.15s ease, transform 0.15s var(--ease-out), color 0.15s ease;
}
.widget-card[data-widget="flipclock"]:hover .fclk-card-nav .fclk-nav-arrow {
    opacity: 1;
    transform: scale(1);
}
.fclk-card-nav .fclk-nav-arrow:hover { color: #f0a93b; }

/* ===== 简版（中卡片）：宽 2 格、高两排图标 ===== */
.widget-card[data-widget="flipclock"].fclk-style-mini {
    width: 153px;
    width: var(--widget-w-2, 153px);
    padding: 8px 8px;
    height: var(--widget-h);
}
.widget-card[data-widget="flipclock"].fclk-style-mini .widget-body { overflow: hidden; }

/* ===== 横条形态：宽 2 格、高 1 个图标 ===== */
.widget-card[data-widget="flipclock"].fclk-style-bar {
    width: var(--widget-w-2, 153px);
    min-width: 120px;
    max-width: 100%;
    padding: 0 12px;
    height: 56px;
    height: var(--icon-size, 56px);
    min-height: 56px;
    border-radius: 18px;
}
.widget-card[data-widget="flipclock"].fclk-style-bar .widget-body {
    overflow: hidden;
    display: flex;
}

/* ===== 通用布局 ===== */
.fclk {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    user-select: none;
}
.fclk-clock {
    display: flex;
    align-items: center;
    justify-content: center;
}
.fclk-group { display: flex; }
/* 冒号：用伪元素画两个粗圆点（隐藏模板里的文字“:”），对齐数字块的上下半页中心 */
.fclk-colon {
    position: relative;
    flex: none;
    align-self: stretch;
    width: 8px;
    margin: 0 3px;
    font-size: 0;
    line-height: 0;
}
.fclk-colon::before,
.fclk-colon::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b9bcc6;
    transform: translateX(-50%);
}
.fclk-colon::before { top: calc(25% - 3.5px); }
.fclk-colon::after { bottom: calc(25% - 3.5px); }
.fclk-date {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    color: #858996;
    white-space: nowrap;
}

/* =====================================================
   翻页数字单元：4 层结构（静态上/下页 + 翻转上/下页）
   ===================================================== */
.fclk-unit {
    position: relative;
    flex: none;
    width: 34px;
    height: 62px;
    margin-right: 3px;
    border-radius: 8px;
    perspective: 300px;
    font-variant-numeric: tabular-nums;
}
.fclk-group .fclk-unit:last-child { margin-right: 0; }

/* 半页公共样式 */
.fclk-half {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
    background: #202124;
    color: #d6d8de;
    font-size: 52px;
    font-weight: 800;
    line-height: 62px;
    text-align: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
/* 上半页：文字从整字顶部自然排布，只露出上半截；静态层与翻转层共用 */
.fclk-static-top,
.fclk-flip-top {
    top: 0;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, #26272b 0%, #202124 100%);
}
/* 下半页：文字盒整体上移一个单元高度，使露出的下半截与上半截拼成整字 */
.fclk-static-bottom,
.fclk-flip-bottom {
    bottom: 0;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(180deg, #1c1d20 0%, #151619 100%);
}
/* 下半页文字盒必须以“单元顶边”为起点排整字，露出的才是字形下半截：
   绝对定位到半页上方（top:-100% = 上提一个半页高），高度为两个半页（200%），
   使字形垂直中心正好压在中缝上，与上半截严丝合缝拼成整字 */
.fclk-static-bottom span,
.fclk-flip-bottom span {
    position: absolute;
    top: -100%;
    left: 0;
    display: block;
    width: 100%;
    height: 200%;
    line-height: 62px;
}
/* 中缝黑线：静态页投影在单元中线，翻转层各以自身顶/底边对齐中线 */
.fclk-unit::after,
.fclk-flip-top::after,
.fclk-flip-bottom::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.85);
    z-index: 2;
}
.fclk-unit::after,
.fclk-flip-top::after { top: 50%; }
.fclk-flip-bottom::after { top: 0; }

/* 翻转页默认隐藏：上页停在水平状态，下页折到 90° */
.fclk-flip-top,
.fclk-flip-bottom {
    z-index: 3;
    visibility: hidden;
    will-change: transform;
}
.fclk-flip-top { transform-origin: 50% 100%; transform: rotateX(0deg); }
.fclk-flip-bottom { transform-origin: 50% 0%; transform: rotateX(90deg); }

/* 翻页动画：上半页向下折 0→-90°，随后下半页 90°→0° 展开，各 0.25s */
.fclk-flip-top.fclk-anim {
    visibility: visible;
    animation: fclkFlipTop 0.25s linear forwards;
}
.fclk-flip-bottom.fclk-anim {
    visibility: visible;
    animation: fclkFlipBottom 0.25s ease-in 0.25s forwards;
}
@keyframes fclkFlipTop {
    from { transform: rotateX(0deg); }
    to { transform: rotateX(-90deg); }
}
@keyframes fclkFlipBottom {
    from { transform: rotateX(90deg); }
    to { transform: rotateX(0deg); }
}

/* ===== 完整版尺寸微调 ===== */
.fclk-full .fclk-clock { gap: 0; }

/* ===== 简版：缩小翻页单元，秒与日期用普通文字 ===== */
.fclk-mini { gap: 2px; }
.fclk-mini-clock .fclk-unit {
    width: 22px;
    height: 44px;
    margin-right: 2px;
    border-radius: 6px;
}
.fclk-mini-clock .fclk-half { font-size: 32px; line-height: 44px; }
.fclk-mini-clock .fclk-static-bottom span,
.fclk-mini-clock .fclk-flip-bottom span { height: 200%; line-height: 44px; }
.fclk-mini-clock .fclk-colon { width: 6px; margin: 0 2px; }
.fclk-mini-clock .fclk-colon::before,
.fclk-mini-clock .fclk-colon::after { width: 5px; height: 5px; }
.fclk-mini-clock .fclk-colon::before { top: calc(25% - 2.5px); }
.fclk-mini-clock .fclk-colon::after { bottom: calc(25% - 2.5px); }
.fclk-mini-sec {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #9aa0ad;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}
.fclk-mini-date {
    margin-top: 3px;
    font-size: 11px;
    letter-spacing: 1px;
    color: #858996;
    white-space: nowrap;
}

/* ===== 横条：左侧时间、右侧星期 ===== */
.fclk.fclk-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.fclk-bar-time {
    font-size: 19px;
    font-weight: 800;
    color: #e8eaef;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.fclk-bar-week {
    font-size: 12px;
    font-weight: 700;
    color: #f0a93b;
    white-space: nowrap;
    line-height: 1;
}

/* ===== 小屏适配：卡片宽度随网格自动收缩，仅收敛翻页字号 ===== */
@media (max-width: 420px) {
    .widget-card[data-widget="flipclock"]:not(.fclk-style-bar) {
        height: 150px;
        padding: 8px 12px 10px;
    }
    .fclk-unit { width: 29px; height: 52px; margin-right: 3px; }
    .fclk-half { font-size: 42px; line-height: 52px; }
    .fclk-static-bottom span,
    .fclk-flip-bottom span { line-height: 52px; height: 200%; }
    .fclk-colon { width: 7px; margin: 0 3px; }
    .fclk-colon::before,
    .fclk-colon::after { width: 6px; height: 6px; }
    .fclk-colon::before { top: calc(25% - 3px); }
    .fclk-colon::after { bottom: calc(25% - 3px); }
}

/* 用户偏好减少动态效果时，直接换字不翻页 */
@media (prefers-reduced-motion: reduce) {
    .fclk-flip-top.fclk-anim,
    .fclk-flip-bottom.fclk-anim { animation: none; }
}

/* =====================================================
   大弹窗：点击看板卡片弹出的黑色大窗翻页时钟
   ===================================================== */
.fclk-modal-mask {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: fclkMaskIn 0.18s ease;
}
@keyframes fclkMaskIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.fclk-modal {
    position: relative;
    width: 720px;
    max-width: 92vw;
    height: 460px;
    max-height: 82vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    animation: fclkModalIn 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fclk-modal:fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    background: #000000;
}
@keyframes fclkModalIn {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}

/* 右上角工具条：全屏 + 关闭 */
.fclk-modal-tools {
    position: absolute;
    top: 12px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 5;
}
.fclk-modal-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.fclk-modal-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.fclk-modal-btn.fclk-modal-close { font-size: 24px; }

/* 弹窗内翻页数字：放大复用卡片同款结构与翻页动画 */
.fclk-modal-clock .fclk-unit {
    width: 82px;
    height: 148px;
    margin-right: 10px;
    border-radius: 12px;
    perspective: 800px;
}
.fclk-modal-clock .fclk-group .fclk-unit:last-child { margin-right: 0; }
.fclk-modal-clock .fclk-half {
    font-size: 124px;
    line-height: 148px;
    border-radius: inherit;
}
.fclk-modal-clock .fclk-static-top,
.fclk-modal-clock .fclk-flip-top { border-radius: 12px 12px 0 0; }
.fclk-modal-clock .fclk-static-bottom,
.fclk-modal-clock .fclk-flip-bottom { border-radius: 0 0 12px 12px; }
.fclk-modal-clock .fclk-static-bottom span,
.fclk-modal-clock .fclk-flip-bottom span { height: 200%; line-height: 148px; }
.fclk-modal-clock .fclk-colon {
    width: 18px;
    margin: 0 14px;
}
.fclk-modal-clock .fclk-colon::before,
.fclk-modal-clock .fclk-colon::after {
    width: 12px;
    height: 12px;
}
.fclk-modal-clock .fclk-colon::before { top: calc(25% - 6px); }
.fclk-modal-clock .fclk-colon::after { bottom: calc(25% - 6px); }

/* 小窗 / 小屏：数字与窗口随视口宽度等比缩放，避免溢出 */
@media (max-width: 760px) {
    .fclk-modal { width: 92vw; height: 52vw; min-height: 220px; max-height: 82vh; padding: 0 10px; }
    .fclk-modal-clock .fclk-unit { width: 12vw; height: 22vw; margin-right: 1.5vw; border-radius: 2vw; }
    .fclk-modal-clock .fclk-half { font-size: 18vw; line-height: 22vw; }
    .fclk-modal-clock .fclk-static-top,
    .fclk-modal-clock .fclk-flip-top { border-radius: 2vw 2vw 0 0; }
    .fclk-modal-clock .fclk-static-bottom,
    .fclk-modal-clock .fclk-flip-bottom { border-radius: 0 0 2vw 2vw; }
    .fclk-modal-clock .fclk-static-bottom span,
    .fclk-modal-clock .fclk-flip-bottom span { line-height: 22vw; }
    .fclk-modal-clock .fclk-colon { width: 3vw; margin: 0 1.5vw; }
    .fclk-modal-clock .fclk-colon::before,
    .fclk-modal-clock .fclk-colon::after { width: 1.8vw; height: 1.8vw; }
    .fclk-modal-clock .fclk-colon::before { top: calc(25% - 0.9vw); }
    .fclk-modal-clock .fclk-colon::after { bottom: calc(25% - 0.9vw); }
}

/* 全屏态：数字按视口宽度等比放大，铺满整屏 */
.fclk-modal:fullscreen { padding: 0; }
.fclk-modal:fullscreen .fclk-modal-clock .fclk-unit {
    width: 12.6vw;
    height: 22.6vw;
    margin-right: 0.8vw;
    border-radius: 1.3vw;
}
.fclk-modal:fullscreen .fclk-modal-clock .fclk-half {
    font-size: 19vw;
    line-height: 22.6vw;
}
.fclk-modal:fullscreen .fclk-modal-clock .fclk-static-top,
.fclk-modal:fullscreen .fclk-modal-clock .fclk-flip-top { border-radius: 1.3vw 1.3vw 0 0; }
.fclk-modal:fullscreen .fclk-modal-clock .fclk-static-bottom,
.fclk-modal:fullscreen .fclk-modal-clock .fclk-flip-bottom { border-radius: 0 0 1.3vw 1.3vw; }
.fclk-modal:fullscreen .fclk-modal-clock .fclk-static-bottom span,
.fclk-modal:fullscreen .fclk-modal-clock .fclk-flip-bottom span { line-height: 22.6vw; }
.fclk-modal:fullscreen .fclk-modal-clock .fclk-colon {
    width: 2vw;
    margin: 0 2.2vw;
}
.fclk-modal:fullscreen .fclk-modal-clock .fclk-colon::before,
.fclk-modal:fullscreen .fclk-modal-clock .fclk-colon::after {
    width: 1.7vw;
    height: 1.7vw;
}
.fclk-modal:fullscreen .fclk-modal-clock .fclk-colon::before { top: calc(25% - 0.85vw); }
.fclk-modal:fullscreen .fclk-modal-clock .fclk-colon::after { bottom: calc(25% - 0.85vw); }