/* ===== 天氣（動態背景特效、天氣資訊區塊、天氣預報 Modal）===== */
/* Weather Background Effects */
.weather-bg-container {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* Sunny Effect */
.sun-container {
    position: absolute;
    top: -20px; right: -20px;
    width: 180px; height: 180px;
    filter: blur(10px);
    opacity: 0.85;
    pointer-events: none;
}
.sun-glow {
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255, 230, 100, 0.5) 0%, rgba(255, 180, 50, 0.15) 50%, transparent 70%);
    border-radius: 50%;
    filter: blur(15px);
    animation: sun-pulse 8s infinite alternate ease-in-out;
}
.sun-rays {
    position: absolute;
    top: 20px; right: 20px;
    width: 140px; height: 140px;
    background: rgba(255, 225, 100, 0.4);
    animation: sun-spin 12s linear infinite;
}
.sun-rays::before, .sun-rays::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255, 225, 100, 0.4);
}
.sun-rays::before { transform: rotate(30deg); }
.sun-rays::after { transform: rotate(60deg); }
.sun-core {
    position: absolute;
    top: 55px; right: 55px;
    width: 70px; height: 70px;
    background: radial-gradient(circle, rgba(255,250,210,0.95) 0%, rgba(255,225,100,0.8) 50%, rgba(255,180,50,0.5) 100%);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(255, 225, 100, 0.6), 0 0 40px rgba(255, 180, 50, 0.4);
}
@keyframes sun-pulse {
    from { transform: scale(1); opacity: 0.7; }
    to { transform: scale(1.1); opacity: 0.9; }
}
@keyframes sun-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(180deg); }
}

/* Rain Effect */
.rain-drop {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.3);
    width: 2px; height: 15px;
    top: -50px;
    animation: rain-fall linear infinite;
}
@keyframes rain-fall {
    to { transform: translateY(100vh); }
}

/* Storm Effect */
.storm-drop {
    background-color: rgba(255, 255, 255, 0.25);
    width: 3px; height: 30px;
}
.lightning-flash {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: white;
    opacity: 0;
    animation: lightning-strike 7s infinite;
}
@keyframes lightning-strike {
    0%, 93%, 100% { opacity: 0; }
    94% { opacity: 0.1; }
    95% { opacity: 0; }
    96% { opacity: 0.2; }
    97% { opacity: 0; }
}

/* Cloud Effect */
.cloud {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    filter: blur(12px);
    opacity: 0;
    animation: cloud-drift linear infinite, cloud-fade 4s ease-out forwards;
}
.cloud::before,
.cloud::after {
    content: '';
    position: absolute;
    background: inherit;
    border-radius: 50%;
}
.cloud::before {
    width: var(--b1-w, 60%);
    height: var(--b1-h, 80%);
    top: var(--b1-top, -40%);
    left: var(--b1-left, 15%);
}
.cloud::after {
    width: var(--b2-w, 45%);
    height: var(--b2-h, 65%);
    top: var(--b2-top, -25%);
    right: var(--b2-right, 15%);
}
@keyframes cloud-drift {
    0%   { transform: translateX(0) translateY(0); }
    25%  { transform: translateX(25vw) translateY(-8px); }
    50%  { transform: translateX(50vw) translateY(4px); }
    75%  { transform: translateX(75vw) translateY(-6px); }
    100% { transform: translateX(calc(100vw + 200%)) translateY(0); }
}
@keyframes cloud-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* 天氣卡 + 節氣卡並列容器：各佔一半；某張卡隱藏時，另一張自動撐滿整行 */
.info-cards {
    display: flex;
    gap: 15px;
    margin-top: 1.5rem;
    align-items: stretch;
}
.info-cards > .weather-dashboard,
.info-cards > .solarterm-card {
    flex: 1 1 0;
    min-width: 0;
    margin-top: 0;
}
/* 並列時天氣卡寬度砍半：左欄 emoji 疊溫度、右欄日出日落直排，整組置中 */
.info-cards > .weather-dashboard {
    padding: 1.1rem 1.3rem;
    gap: 18px;
}

/* Weather Dashboard */
.weather-dashboard {
    padding: 1.2rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    border: var(--card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    animation: fade-in 0.5s ease-out;
}

@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.weather-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.weather-emoji {
    font-size: clamp(1.9rem, 6vw, 2.3rem);
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.2));
}

.weather-temp {
    font-size: clamp(1.3rem, 4.5vw, 1.6rem);
    font-weight: 800;
    color: var(--primary-color);
    white-space: nowrap;
}

.weather-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 「日出 05:17」標籤與數值相鄰靠左，三行直排（對齊示意圖）*/
.weather-detail-item {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.detail-label {
    opacity: 0.5;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.detail-value {
    font-weight: 700;
    color: var(--text-color);
}

/* 天氣區塊可點擊（開啟天氣預報 Modal） */
.weather-dashboard { cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.weather-dashboard:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }

/* 24 節氣卡（不依賴天氣）：上排 emoji+節氣名+天數，下排迷你進度條。
   並列時與天氣卡各半；天氣卡隱藏時自動撐滿整行變橫條 */
.solarterm-card {
    padding: 1.2rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    border: var(--card-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    animation: fade-in 0.5s ease-out;
    transition: transform 0.15s, box-shadow 0.15s;
}
.solarterm-card:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
/* 上排：emoji + 文字，整組置中 */
.st-card-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.st-card-emoji {
    font-size: clamp(1.6rem, 6vw, 2rem);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
}
/* emoji+文字整組在卡片內置中，但文字兩行各自靠左對齊 */
.st-card-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.st-card-name {
    font-size: clamp(1rem, 4.5vw, 1.25rem);
    font-weight: 800;
    color: var(--primary-color);
    letter-spacing: 1px;
}
.st-card-next { font-size: 0.72rem; opacity: 0.6; font-weight: 600; }

/* 下排：迷你進度條（當前節氣 → 下個節氣）
   最大寬約 85%（大致對齊左邊天氣卡內容寬度）、置中；最小寬不限，靠 flex 自然縮 */
.st-card-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 85%;
    margin: 0 auto;
}
.st-cp-label {
    font-size: 0.62rem;
    opacity: 0.55;
    font-weight: 600;
    white-space: nowrap;
    flex: 0 0 auto;
}
.st-cp-track {
    flex: 1 1 auto;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    position: relative;
}
.st-cp-fill {
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: linear-gradient(to right, var(--secondary-color, var(--primary-color)), var(--primary-color));
    box-shadow: 0 0 6px var(--primary-color);
    transition: width 0.4s ease;
}

/* 四季輔助色：色相不隨主題切換（節氣的季節屬性是固定的，跟著主題變會失去辨識度），
   但亮度要跟著底色走 —— 這組是為暗底調的，在 minimal/flow 等亮底主題上對比不足，
   故亮底主題另行加深（見下方 [data-theme] 覆寫）。
   只用在細線與節點邊框等小面積，避免大色塊破壞玻璃擬態 */
:root {
    --st-season-0: #6ee7a8; /* 春 */
    --st-season-1: #ff7a59; /* 夏 */
    --st-season-2: #f5c26b; /* 秋 */
    --st-season-3: #7cc4ff; /* 冬 */
    /* 四季刻度：混文字色，暗底得到淺色、亮底得到深色，壓在填充上都看得見 */
    --st-tick: color-mix(in srgb, var(--text-color) 45%, transparent);
}
/* 亮底主題：四季色改用同色相的深色版，確保線與邊框在白底上看得見 */
[data-theme="flow"], [data-theme="minimal"] {
    --st-season-0: #1a9e5f; /* 春 */
    --st-season-1: #d94f2b; /* 夏 */
    --st-season-2: #b8862b; /* 秋 */
    --st-season-3: #2b7fc4; /* 冬 */
}

/* 節氣 Modal 頂部年度總覽條：一眼看出整年走了多少。
   軌道與填充直接沿用首頁 .progress-wrapper / .progress-bar 的配色規則
   （--bar-bg + secondary→primary 漸層 + --glow），八個主題的適配由既有變數承接，
   只在尺寸上縮成細條版 */
.st-year { margin: 2px 0 16px; }
.st-year-track {
    position: relative;
    height: 10px;
    border-radius: 6px;
    background: var(--bar-bg);
    border: var(--card-border);
    box-sizing: border-box;
    padding: 2px;
}
.st-year-fill {
    height: 100%;
    width: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
    box-shadow: var(--glow);
    transition: width 0.5s cubic-bezier(0.1, 0.7, 0.1, 1);
}
/* 刻度與游標的定位基準層：撐滿軌道的內容區（padding box），
   讓 left:25% 這類百分比與 .st-year-fill 的寬度基準完全一致 */
.st-year-marks {
    position: absolute;
    left: 2px; right: 2px; top: 0; bottom: 0;
    pointer-events: none;
}
/* 四季分界刻度：壓在軌道上把整條均分四段。
   混文字色而非寫死黑色，才能同時在填充色與空軌道上看得見 */
.st-year-tick {
    position: absolute;
    top: 50%;
    width: 2px; height: 10px;
    margin-top: -5px;
    border-radius: 1px;
    background: var(--st-tick);
    z-index: 1;
}
/* 當前位置游標：主題色圓點 + 底色描邊，確保壓在填充色上仍分得出來 */
.st-year-cursor {
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px; height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: var(--glow), 0 0 0 2.5px var(--bar-bg);
    z-index: 2;
    transition: left 0.5s cubic-bezier(0.1, 0.7, 0.1, 1);
}
.st-year-seasons {
    display: flex;
    margin-top: 7px;
    font-size: 0.62rem;
    opacity: 0.45;
    font-weight: 700;
    letter-spacing: 2px;
}
.st-year-seasons span { flex: 1 1 0; text-align: center; }

/* 節氣 Modal 頂部當前節氣摘要 */
.st-current {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 4px 2px 12px;
    flex-wrap: wrap;
}
.st-cur-emoji { font-size: 1.8rem; }
.st-cur-name { font-size: 1.5rem; font-weight: 800; color: var(--primary-color); }
.st-cur-sub { font-size: 0.8rem; opacity: 0.6; font-weight: 600; }

/* 24 節氣時間軸：整輪 24 個節氣，6 個一排共 4 排（由 JS 切排），
   每排內節氣名在上、圓點串在該排橫線上、日期在下 */
.st-timeline {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 6px 2px;
    margin: 2px 0 4px;
}
/* 單排 = 一季：6 個節點平均分佈，橫線相對此排絕對定位。
   --st-season 由 JS 依排序（0春 1夏 2秋 3冬）設定 */
.st-row {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2px;
    padding-left: 16px; /* 讓出左緣季節字（水平正放）的寬度，避免壓到第一個節氣 */
}
/* 貫穿該排所有 emoji 底座中心的橫線（底座約在 name 高度 + 自身半徑處），
   染上該季的輔助色但壓低透明度，只當暗示不搶焦點 */
.st-line {
    position: absolute;
    left: 32px; right: 18px;
    top: 32px;
    height: 2px;
    background: var(--st-season, rgba(255, 255, 255, 0.15));
    opacity: 0.35;
    z-index: 0;
}
/* 排左緣的季節字：水平正放（不旋轉），用最低視覺成本標出四季段落。
   色相取該季輔助色但混入文字色壓深，確保亮底主題也讀得到 */
.st-season-tag {
    position: absolute;
    left: -2px;
    top: 32px;
    transform: translateY(-50%);
    font-size: 0.62rem;
    font-weight: 800;
    color: color-mix(in srgb, var(--st-season) 65%, var(--text-color));
    opacity: 0.9;
    pointer-events: none;
}
.st-node {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
}
.st-name {
    font-size: 0.72rem;
    opacity: 0.55;
    white-space: nowrap;
    font-weight: 600;
}
/* emoji 底座：圓形背景，emoji 由內層 .st-glyph 絕對定位釘死圓心 */
.st-dot {
    box-sizing: border-box;
    position: relative;
    width: 32px; height: 32px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.12);
    opacity: 0.55;
    transition: transform 0.15s, box-shadow 0.15s;
}
/* emoji 字符：絕對置中。emoji 字形在文字盒內天生偏上（glyph box 高於 font-size），
   盒子置中後仍視覺偏上，故 Y 方向多補一個相對字級的微調（約 0.08em）壓回視覺正中 */
.st-glyph {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 0.08em));
    font-size: 1rem;
    line-height: 1;
}
.st-date {
    font-size: 0.65rem;
    opacity: 0.4;
    white-space: nowrap;
}
/* 已過的節氣：亮起 + 該季輔助色邊框，形成「走過的路」 */
.st-node.past .st-dot {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--st-season, rgba(255, 255, 255, 0.12));
}
.st-node.past .st-name { opacity: 0.85; }
.st-node.past .st-date { opacity: 0.55; }
/* 未來的節氣：灰階 + 壓低透明度，明顯退到背景去 */
.st-node.future .st-dot { opacity: 0.3; }
.st-node.future .st-name { opacity: 0.3; }
.st-node.future .st-date { opacity: 0.22; }
.st-node.future .st-glyph { filter: grayscale(1); }

/* 當前節氣：名稱亮起、底座放大帶主題色高亮框與光暈、日期加深。
   邊框寬度維持 2px（與非當前一致）避免 box 尺寸變化把 emoji 擠偏。
   主題色一律蓋過季節色，確保焦點不被季節色稀釋 */
.st-node.current .st-name { opacity: 1; color: var(--primary-color); font-weight: 700; }
/* 當前底座：改用「更大固定尺寸」而非 scale 放大，
   避免 scale 縮放座標系把內層 glyph 的絕對定位/補償一起放大而偏移 */
.st-node.current .st-dot {
    width: 38px; height: 38px;
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-color);
    box-shadow: 0 0 10px var(--primary-color);
}
/* 底座變大，emoji 同步放大填滿（font-size 放大，0.08em 補償等比跟隨）*/
.st-node.current .st-glyph { font-size: 1.2rem; }
.st-node.current .st-date { opacity: 0.75; font-weight: 700; }

/* 天氣預報 Modal */
.wf-body { max-height: min(62vh, 540px); overflow-y: auto; }
.wf-location {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary-color);
}
.wf-hourly {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}
.wf-hour {
    flex: 0 0 auto;
    min-width: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: var(--card-border);
    font-size: 0.7rem;
}
.wf-hour.now {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.08);
}
.wf-hour-time { opacity: 0.6; }
.wf-hour-emoji { font-size: 1.2rem; }
.wf-hour-temp { font-weight: 700; }
.wf-hour-pop { opacity: 0.75; }

/* 降雨機率水位視覺化：格子底部填水，水面高度 = 機率 */
.wf-hour { position: relative; overflow: hidden; }
.wf-hour > span { position: relative; z-index: 1; }
/* 兩個帶透明度的水圖層，各自用 mask 把上緣雕成「平緩橢圓長波」：
   - 波形用扁橢圓（不是半圓凸點），一格約 2 個緩波、振幅約 3px，較接近真實水面
   - 兩層波長 26px / 34px、慢速反向橫流，交疊處顏色自然變深
   - 疊加極小幅 translateY 上下浮動（兩層週期不同），模擬液體呼吸感
   - 橫向位移取各自波長整數倍（78 / 102px），循環接縫不跳動
   - 底部 inset -3px 預留浮動位移量，上浮時底邊不會露縫 */
.wf-hour-water {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    pointer-events: none;
}
.wf-hour-water::before,
.wf-hour-water::after {
    content: '';
    position: absolute;
    inset: 0 0 -3px 0;
}
.wf-hour-water::before {
    background: linear-gradient(to bottom, rgba(79, 172, 254, 0.13), rgba(79, 172, 254, 0.04));
    -webkit-mask-image: radial-gradient(16px 8px at 13px 9px, #000 98%, transparent 100%), linear-gradient(#000, #000);
    -webkit-mask-size: 26px 12px, 100% calc(100% - 6px);
    -webkit-mask-repeat: repeat-x, no-repeat;
    -webkit-mask-position: 0 0, 0 6px;
    mask-image: radial-gradient(16px 8px at 13px 9px, #000 98%, transparent 100%), linear-gradient(#000, #000);
    mask-size: 26px 12px, 100% calc(100% - 6px);
    mask-repeat: repeat-x, no-repeat;
    mask-position: 0 0, 0 6px;
    animation: wf-wave-a 18s linear infinite, wf-bob 6s ease-in-out infinite alternate;
}
.wf-hour-water::after {
    background: linear-gradient(to bottom, rgba(0, 242, 254, 0.09), rgba(0, 242, 254, 0.03));
    -webkit-mask-image: radial-gradient(21px 9px at 17px 11px, #000 98%, transparent 100%), linear-gradient(#000, #000);
    -webkit-mask-size: 34px 14px, 100% calc(100% - 7px);
    -webkit-mask-repeat: repeat-x, no-repeat;
    -webkit-mask-position: 0 0, 0 7px;
    mask-image: radial-gradient(21px 9px at 17px 11px, #000 98%, transparent 100%), linear-gradient(#000, #000);
    mask-size: 34px 14px, 100% calc(100% - 7px);
    mask-repeat: repeat-x, no-repeat;
    mask-position: 0 0, 0 7px;
    animation: wf-wave-b 28s linear infinite, wf-bob 9s ease-in-out -3s infinite alternate;
}
@keyframes wf-wave-a {
    to { -webkit-mask-position: -78px 0, 0 6px; mask-position: -78px 0, 0 6px; }
}
@keyframes wf-wave-b {
    to { -webkit-mask-position: 102px 0, 0 7px; mask-position: 102px 0, 0 7px; }
}
@keyframes wf-bob {
    from { transform: translateY(0); }
    to { transform: translateY(-1.5px); }
}

.wf-daily { list-style: none; padding: 0; margin: 0; }
.wf-day {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 30px 60px 76px;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wf-day:last-child { border-bottom: none; }
.wf-day.today .wf-day-name { color: var(--primary-color); font-weight: 700; }
.wf-day-date { opacity: 0.5; font-size: 0.7rem; }
.wf-day-emoji { text-align: center; }
.wf-day-pop { opacity: 0.75; font-size: 0.75rem; }
.wf-day-temp { text-align: right; font-weight: 700; white-space: nowrap; }
.wf-temp-lo { opacity: 0.55; font-weight: 400; }

/* RWD */
@media (max-width: 480px) {
    /* 小螢幕並列太擠 → 天氣卡與節氣卡改上下堆疊 */
    .info-cards {
        flex-direction: column;
        gap: 12px;
    }
    .weather-dashboard {
        flex-direction: row;
        padding: 1rem;
        gap: 10px;
    }
    .weather-details {
        gap: 4px;
    }
    /* 節氣時間軸：一排 6 欄在窄螢幕會擠，整體縮一階（底座、字級、橫線位置同步） */
    .st-timeline { gap: 10px; padding: 4px 0 2px; }
    .st-row { padding-left: 13px; }
    .st-line { left: 26px; right: 12px; top: 28px; }
    .st-season-tag { top: 28px; left: -2px; font-size: 0.56rem; }
    .st-dot { width: 26px; height: 26px; }
    .st-glyph { font-size: 0.85rem; }
    .st-node.current .st-dot { width: 30px; height: 30px; }
    .st-node.current .st-glyph { font-size: 1rem; }
    .st-name { font-size: 0.62rem; }
    .st-date { font-size: 0.55rem; }
    /* 年度總覽條同步縮一階 */
    .st-year { margin-bottom: 13px; }
    .st-year-track { height: 9px; }
    .st-year-tick { height: 9px; margin-top: -4.5px; }
    .st-year-cursor { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
    .st-year-seasons { font-size: 0.58rem; }
}