/* clock.css - 機械時鐘滾動模組 (標準乾淨版) */

.clock-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    vertical-align: middle;
}

/* 🟢 當 JS 把數字排好後，就會加上這個 class 讓時鐘優雅浮現 */
.clock-container.ready {
    opacity: 1;
}

.ticker-digit {
    position: relative;
    display: inline-block; 
    width: 12px;  
    height: 22px; 
    overflow: hidden; /* 完美裁切 */
    text-align: center;
}

.time-colon {
    display: inline-block;
    margin: 0 1px;
    height: 22px;
    line-height: 22px;
    transform: translateY(-1px);
}

.ticker-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 44px; 
    transform: translateY(-22px); 
}

.ticker-track.rolling {
    animation: rollDown 0.6s var(--apple-spring) forwards;
}

@keyframes rollDown {
    0% { transform: translateY(-22px); }
    100% { transform: translateY(0px); }
}

.new-val, 
.old-val {
    position: absolute;
    left: 0;
    width: 100%;
    height: 22px;
    line-height: 22px;
    display: block;
}

.new-val { top: 0px; }
.old-val { top: 22px; }

/* 齒輪連動延遲 */
#min-units .ticker-track.rolling { animation-delay: 0s; }
#min-tens .ticker-track.rolling { animation-delay: 0.08s; }
#hour-units .ticker-track.rolling { animation-delay: 0.16s; }
#hour-tens .ticker-track.rolling { animation-delay: 0.24s; }

/* =========================================
   左舷母艦：靈動膠囊與圖示圖層 (幾何圓心錨點版)
   ========================================= */

   .left-capsule-icon {
    position: absolute;
    
    /* 💥 Apple 靈動島級別的幾何錨點：
       因為膠囊高度是 44px，右側半圓的半徑就是 22px。
       把 right 設為 22px，就等於把 SVG 放在這個半圓的絕對圓心！
    */
    right: 22px; 
    
    top: 50%;
    
    /* translate(50%, -50%) 確保是 SVG 的「正中心」對齊這個 22px 的錨點 */
    transform: translate(50%, -50%);
    
    width: 18px;  
    height: 18px;
    z-index: 5;
    pointer-events: none;
}

/* 🟢 2. 靈動膠囊引擎：數學錨點鎖死大法 */
.left-capsule.top-capsule {
    /* 解除左側錨點，防止雙向運算造成的抖動 */
    left: auto !important;
    
    /* 115px 是原本的 left(20) + width(95)。
       利用 100% 減去 115px，能讓右邊界像釘子一樣死死釘在原地！ */
    right: calc(100% - 115px) !important;
    
    width: var(--capsule-width, 95px) !important;
    
    /* 🟢 拔除 left 的動畫，現在只專心處理 width，徹底消滅小數點渲染抖動！ */
    transition: width var(--capsule-dur, 1s) var(--capsule-ease, linear), 
                opacity 0.2s ease, 
                transform 0.5s var(--apple-spring), 
                scale 0.4s var(--apple-spring) !important;
}

/* ==========================================
   🟢 智慧警示燈號色彩系統 (Light/Dark Mode 自動切換)
========================================== */

/* 1. 預設：淺色模式 (Light Mode) 的參數 */
:root {
    /* 淺色底：需要較深的橘黃色才清楚，且「不需要」發光 (發光會糊掉) */
    --sync-yellow-color: #D97706; 
    --sync-yellow-glow: 0 0 0px transparent; 
    
    /* 淺色底：使用純度較高的紅色，同樣不需要發光 */
    --sync-red-color: #E32400; 
    --sync-red-glow: 0 0 0px transparent; 
}

/* 2. 覆蓋：深色模式 (Dark Mode) 的參數 */
@media (prefers-color-scheme: dark) {
    :root {
        /* 深色底：使用明亮的 Apple 系統黃色，加上適度光暈 */
        --sync-yellow-color: #FFCC00;
        --sync-yellow-glow: 0 0 8px rgba(255, 204, 0, 0.5);
        
        /* 深色底：使用 Apple 系統紅色。
           ✨ 視覺校正魔法：因為紅色較暗，我們疊加「兩層」陰影，外圈大擴散 + 內圈高濃度，讓它徹底亮起來！ */
        --sync-red-color: #FF3B30;
        --sync-red-glow: 0 0 16px rgba(255, 59, 48, 0.8), 0 0 4px rgba(255, 59, 48, 0.6); 
    }
}

/* ==========================================
   🟢 實際套用樣式 (地毯式轟炸選擇器，保證抓到冒號！)
========================================== */

/* 🟡 1~5 分鐘：黃色警告狀態 */
/* ✨ 核心魔法：使用 * (萬用字元)，不管裡面的數字、冒號叫什麼名字，全部強制上色！ */
#entry-time-display.sync-warning-yellow,
#entry-time-display.sync-warning-yellow * {
    color: var(--sync-yellow-color) !important;
    text-shadow: var(--sync-yellow-glow) !important;
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

/* 🔴 5 分鐘以上：紅色斷線狀態 */
/* ✨ 核心魔法：同樣使用 * (萬用字元) 強制覆蓋所有子元素 */
#entry-time-display.sync-warning-red,
#entry-time-display.sync-warning-red * {
    color: var(--sync-red-color) !important;
    text-shadow: var(--sync-red-glow) !important;
    transition: color 0.5s ease, text-shadow 0.5s ease;
}