:root {
    font-family: system-ui, -apple-system, "Microsoft JhengHei", sans-serif;
    color: #24313d
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: #f5f7fa
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 16px max(20px, calc((100vw - 1180px)/2));
    background: #fff;
    box-shadow: 0 2px 10px #21394b12;
    flex-wrap: wrap
}

    .toolbar strong {
        display: block;
        font-size: 18px
    }

    .toolbar small {
        display: block;
        color: #607587;
        margin-top: 4px
    }

.controls {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap
}

    .controls label {
        font-size: 14px
    }

    .controls select {
        padding: 8px 12px;
        border: 1px solid #b6c8d5;
        border-radius: 7px;
        background: #fff;
        font: inherit
    }

.check {
    white-space: nowrap
}

.weather-banner {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 560px;
    overflow: hidden;
    background: #8ecbfa
}

.weather-scene,
.sky,
.soft-vignette,
.rain-field,
.stars,
.lightning {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.weather-scene {
    z-index: -1
}

.sky {
    background: linear-gradient(180deg, #74b7ed 0%, #99cff6 55%, #d7edff 100%);
    transition: background 1s
}

.soft-vignette {
    background: radial-gradient(ellipse at 50% 47%, transparent 28%, #ffffff18 100%)
}

.sun,
.moon {
    position: absolute;
    right: 12%;
    top: 8%;
    width: 155px;
    height: 155px;
    border-radius: 50%;
    pointer-events: none;
    transition: opacity 1s
}

.sun {
    background: radial-gradient(circle, #fff7ce 0 16%, #fff2b4cc 19%, #fff4c855 35%, transparent 72%);
    box-shadow: 0 0 95px 40px #fff2b333;
    animation: light-pulse 9s ease-in-out infinite
}

.moon {
    width: 88px;
    height: 88px;
    right: 15%;
    top: 10%;
    background: radial-gradient(circle at 36% 33%, #fff 0, #e4f3ff 62%, #b2cde5 100%);
    box-shadow: 0 0 42px 15px #cde5ff4d;
    opacity: 0
}

.stars {
    opacity: 0;
    background-image: radial-gradient(circle at 12% 20%, #fff 0 1px, transparent 2px), radial-gradient(circle at 25% 9%, #fff 0 1px, transparent 2px), radial-gradient(circle at 41% 25%, #fff 0 1px, transparent 2px), radial-gradient(circle at 70% 16%, #fff 0 1px, transparent 2px), radial-gradient(circle at 88% 34%, #fff 0 1px, transparent 2px);
    background-size: 440px 260px;
    transition: opacity 1s
}

.cloud-layer {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.cloud {
    --cloud-color: rgba(255, 255, 255, .78);
    position: absolute;
    width: 450px;
    height: 115px;
    opacity: .75;
    filter: blur(17px);
    background: radial-gradient(ellipse at 21% 67%, var(--cloud-color) 0 23%, transparent 56%), radial-gradient(ellipse at 48% 37%, var(--cloud-color) 0 26%, transparent 58%), radial-gradient(ellipse at 75% 65%, var(--cloud-color) 0 23%, transparent 56%);
    animation: drift 52s ease-in-out infinite alternate;
    will-change: transform
}

.far .cloud {
    opacity: .55;
    filter: blur(25px);
    animation-duration: 70s
}

.near .cloud {
    opacity: .83
}

.c1 {
    top: 0;
    left: -7%;
    width: 580px
}

.c2 {
    top: 7%;
    right: -10%;
    width: 630px;
    animation-delay: -17s !important
}

.c3 {
    bottom: 0;
    left: 8%;
    width: 520px;
    animation-delay: -28s !important
}

.c4 {
    bottom: -1%;
    left: -9%;
    width: 650px;
    animation-delay: -13s !important
}

.c5 {
    bottom: -3%;
    right: -8%;
    width: 620px;
    animation-delay: -35s !important
}

.c6 {
    top: 3%;
    right: 8%;
    width: 320px;
    opacity: .28 !important;
    animation-delay: -23s !important
}

.rain-field {
    overflow: hidden;
    opacity: 0;
    transition: opacity .7s
}

.drop {
    position: absolute;
    top: -25%;
    height: clamp(12px, 2.2vw, 28px);
    width: 1.2px;
    border-radius: 100%;
    background: linear-gradient(180deg, transparent, #e5f5ffb8);
    transform: rotate(10deg);
    animation: rain-fall var(--duration, 1.3s) linear infinite;
    animation-delay: var(--delay, 0s);
    opacity: var(--alpha, .55)
}

.lightning {
    opacity: 0;
    background: radial-gradient(ellipse at 78% 20%, #e5f4ff70, transparent 32%);
    animation: flash 11s linear infinite
}

    .lightning svg {
        position: absolute;
        right: 17%;
        top: 6%;
        height: 42%;
        width: 12%;
        filter: drop-shadow(0 0 15px #e8f8ff);
        opacity: .7
    }

.weather-content {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
    min-height: 560px;
    padding: 35px 0;
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(270px, 1fr);
    align-items: stretch;
    gap: 22px
}

.info-card {
    background: #e9f4ffdb;
    border-radius: 6px;
    padding: 16px;
    box-shadow: 0 2px 9px #264f7020;
    backdrop-filter: blur(5px)
}

    .info-card h2 {
        margin: 0;
        font-size: 19px
    }

        .info-card h2 small {
            font-weight: 400;
            font-size: 12px
        }

.current {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 15px;
    min-height: 150px
}

    .current strong {
        font-size: 68px
    }

    .current sup {
        font-size: 18px
    }

    .current > div:nth-child(2) {
        font-size: 14px;
        line-height: 1.9;
        font-weight: 600
    }

.chart {
    flex: 1;
    min-width: 120px;
    max-width: 300px;
    height: 105px;
    border-bottom: 1px solid #9aadc0;
    background: repeating-linear-gradient(to bottom, transparent 0 24px, #8ea2b327 25px)
}

    .chart svg {
        width: 100%;
        height: 100%
    }

.forecast h3 {
    font-size: 17px;
    margin: 16px 0
}

.week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    text-align: center
}

    .week span {
        line-height: 2.2;
        font-size: 14px;
        font-weight: 600
    }

.warning {
    display: flex;
    flex-direction: column
}

.warning-body {
    margin: 12px auto 0;
    background: white;
    width: 86%;
    flex: 1;
    min-height: 230px;
    border: 1px solid #d0d6d9
}

.warning-head {
    padding: 8px;
    background: #37666a;
    color: #fff;
    font-weight: 700;
    font-size: 14px
}

.warning-body p {
    font-size: 13px;
    margin: 12px
}

.warning-foot {
    text-align: right;
    padding-top: 10px
}

.hint {
    max-width: 1160px;
    margin: 16px auto;
    padding: 0 20px;
    color: #657b8b;
    font-size: 14px
}

@keyframes drift {
    0% {
        transform: translate3d(-18px, 0, 0)
    }

    50% {
        transform: translate3d(7px, -5px, 0)
    }

    100% {
        transform: translate3d(23px, 2px, 0)
    }
}

@keyframes rain-fall {
    from {
        transform: translate3d(0, -120px, 0) rotate(10deg)
    }

    to {
        transform: translate3d(-55px, 780px, 0) rotate(10deg)
    }
}

@keyframes light-pulse {
    50% {
        opacity: .78
    }
}

@keyframes flash {

    0%, 32%, 33%, 33.5%, 34.2%, 68%, 69%, 69.5%, 70%, 100% {
        opacity: 0
    }

    32.3%, 33.8% {
        opacity: .55
    }

    68.4% {
        opacity: .28
    }
}

/* 天氣狀態 */
[data-mode="night"] .sky {
    background: linear-gradient(180deg, #081d43, #16467f 63%, #386eaa)
}

[data-mode="night"] .sun {
    opacity: 0
}

[data-mode="night"] .moon,
[data-mode="night"] .stars {
    opacity: 1
}

[data-mode="night"] .cloud {
    --cloud-color: rgba(157, 188, 222, .52)
}

[data-weather="cloudy"] .sky {
    background: linear-gradient(180deg, #849eb5, #b4c9d9 65%, #d3e1ed)
}

[data-weather="cloudy"] .cloud {
    --cloud-color: rgba(225, 234, 242, .92);
    opacity: .95
}

[data-weather="cloudy"] .sun {
    opacity: .15
}

[data-weather="rainy"] .sky,
[data-weather="thunderstorm"] .sky {
    background: linear-gradient(180deg, #647f9b, #8baac3 65%, #b7d0e2)
}

[data-weather="rainy"] .cloud,
[data-weather="thunderstorm"] .cloud {
    --cloud-color: rgba(196, 214, 228, .94);
    opacity: .95
}

[data-weather="rainy"] .rain-field,
[data-weather="thunderstorm"] .rain-field {
    opacity: .75
}

[data-weather="thunderstorm"] .rain-field {
    opacity: 1
}

[data-weather="thunderstorm"] .sky {
    background: linear-gradient(180deg, #3b5877, #6988a5 65%, #9ab7d0)
}

[data-weather="thunderstorm"] .lightning {
    animation-play-state: running
}

[data-weather="partly-rainy"] .rain-field {
    opacity: .42;
    clip-path: inset(0 0 0 60%)
}

[data-weather="partly-rainy"] .cloud {
    opacity: .8
}

[data-weather="sunny"] .lightning,
[data-weather="cloudy"] .lightning,
[data-weather="rainy"] .lightning,
[data-weather="partly-rainy"] .lightning {
    display: none
}

[data-weather="rainy"] .sun,
[data-weather="thunderstorm"] .sun {
    opacity: .05
}

[data-weather="cloudy"][data-mode="night"] .sky {
    background: linear-gradient(180deg, #172940, #354d66 70%, #506c86)
}

[data-weather="rainy"][data-mode="night"] .sky {
    background: linear-gradient(180deg, #0e2745, #294767 75%, #496784)
}

[data-weather="thunderstorm"][data-mode="night"] .sky {
    background: linear-gradient(180deg, #07182d, #193b5a 80%, #315b79)
}

[data-weather="cloudy"][data-mode="night"] .moon,
[data-weather="rainy"][data-mode="night"] .moon,
[data-weather="thunderstorm"][data-mode="night"] .moon {
    opacity: .15
}

[data-weather="thunderstorm"] .lightning {
    display: block
}

/* 三種構圖：桌面、平板、手機 */
@media(max-width:1199px) {

    .weather-banner,
    .weather-content {
        min-height: 650px
    }

    .weather-content {
        width: min(920px, calc(100% - 36px));
        grid-template-columns: 1.6fr 1fr;
        gap: 14px
    }

    .c1 {
        left: -22%;
        top: 0
    }

    .c2 {
        right: -26%;
        top: 8%
    }

    .c4 {
        left: -24%;
        bottom: 0
    }

    .c5 {
        right: -24%;
        bottom: 0
    }

    .current {
        flex-wrap: wrap
    }

    .chart {
        min-width: 200px;
        max-width: none;
        width: 100%;
        flex-basis: 100%
    }
}

@media(max-width:767px) {
    .toolbar {
        padding: 14px
    }

    .controls {
        gap: 9px
    }

    .weather-banner,
    .weather-content {
        min-height: 760px
    }

    .weather-content {
        width: calc(100% - 28px);
        display: flex;
        flex-direction: column;
        padding: 20px 0;
        gap: 14px
    }

    .forecast {
        flex: 0 0 auto
    }

    .warning {
        min-height: 280px;
        flex: 1
    }

    .warning-body {
        min-height: 145px
    }

    .current {
        min-height: 115px
    }

        .current strong {
            font-size: 50px
        }

    .chart {
        height: 65px;
        flex-basis: 100%
    }

    .week span {
        font-size: 11px
    }

    .week {
        gap: 1px
    }

    .info-card {
        padding: 12px
    }

        .info-card h2 {
            font-size: 17px
        }

    .c1 {
        top: 0;
        left: -95%;
        width: 470px
    }

    .c2 {
        top: 20%;
        right: -115%;
        width: 510px
    }

    .c3 {
        bottom: 25%;
        left: -100%;
        width: 500px
    }

    .c4 {
        bottom: -2%;
        left: -90%;
        width: 560px
    }

    .c5 {
        bottom: 5%;
        right: -115%;
        width: 560px
    }

    .c6 {
        top: 45%;
        right: -120%
    }

    .sun {
        right: -7%;
        top: 5%
    }

    .moon {
        right: 8%;
        top: 4%
    }
}

.motion-off .cloud,
.motion-off .sun,
.motion-off .drop,
.motion-off .lightning {
    animation: none !important
}

.motion-off .lightning {
    opacity: 0 !important
}

@media(prefers-reduced-motion:reduce) {

    .cloud,
    .sun,
    .drop,
    .lightning {
        animation: none !important
    }

    .lightning {
        opacity: 0 !important
    }
}

/* v2: 更清楚的雲層、雨絲：不改動背景與資訊卡片位置 */
.cloud {
    --cloud-color: rgba(255, 255, 255, .98);
    height: 165px;
    opacity: .98;
    filter: blur(8px);
    background: radial-gradient(ellipse 29% 40% at 17% 71%, var(--cloud-color) 0 63%, transparent 98%), radial-gradient(ellipse 25% 47% at 36% 51%, var(--cloud-color) 0 62%, transparent 98%), radial-gradient(ellipse 29% 50% at 56% 42%, var(--cloud-color) 0 61%, transparent 98%), radial-gradient(ellipse 31% 39% at 77% 67%, var(--cloud-color) 0 65%, transparent 99%), radial-gradient(ellipse 45% 25% at 52% 86%, rgba(80, 128, 170, .25) 0 40%, transparent 100%);
    filter: blur(9px) drop-shadow(0 13px 13px rgba(54, 101, 145, .24));
    animation: cloud-drift 44s ease-in-out infinite alternate;
}

.far .cloud {
    opacity: .75;
    filter: blur(17px) drop-shadow(0 10px 14px rgba(67, 109, 149, .18));
    animation-duration: 66s
}

.near .cloud {
    opacity: .98
}

.c6 {
    opacity: .63 !important
}

@keyframes cloud-drift {
    0% {
        transform: translate3d(-27px, 0, 0)
    }

    50% {
        transform: translate3d(0, -3px, 0)
    }

    100% {
        transform: translate3d(35px, 1px, 0)
    }
}

[data-weather="cloudy"] .cloud {
    --cloud-color: rgba(231, 241, 250, .98);
    opacity: 1
}

[data-weather="rainy"] .cloud {
    --cloud-color: rgba(205, 225, 240, .99);
    opacity: 1
}

[data-weather="thunderstorm"] .cloud {
    --cloud-color: rgba(139, 164, 190, .98);
    opacity: 1;
    filter: blur(10px) drop-shadow(0 17px 19px rgba(17, 43, 70, .42))
}

[data-weather="partly-rainy"] .cloud {
    opacity: .98
}

[data-mode="night"] .cloud {
    --cloud-color: rgba(141, 175, 209, .82)
}

[data-weather="cloudy"][data-mode="night"] .cloud {
    --cloud-color: rgba(127, 151, 180, .95)
}

[data-weather="rainy"][data-mode="night"] .cloud {
    --cloud-color: rgba(106, 139, 174, .98)
}

[data-weather="thunderstorm"][data-mode="night"] .cloud {
    --cloud-color: rgba(73, 105, 142, .99)
}

.rain-field {
    z-index: 2
}

.drop {
    width: var(--rain-width, 2px);
    height: var(--rain-length, 32px);
    background: linear-gradient(180deg, transparent 0%, rgba(245, 252, 255, .92) 58%, rgba(225, 245, 255, .98) 100%);
    box-shadow: 0 0 2px rgba(255, 255, 255, .38);
    border-radius: 2px;
    animation: rain-fall var(--duration, 1s) linear infinite;
    opacity: var(--alpha, .85)
}

    .drop.back {
        background: linear-gradient(180deg, transparent, rgba(176, 215, 246, .9));
        filter: blur(.45px)
    }

[data-weather="rainy"] .rain-field {
    opacity: .96
}

[data-weather="thunderstorm"] .rain-field {
    opacity: 1
}

[data-weather="partly-rainy"] .rain-field {
    opacity: .78;
    clip-path: inset(0 0 0 55%)
}

@keyframes rain-fall {
    from {
        transform: translate3d(0, -150px, 0) rotate(8deg)
    }

    to {
        transform: translate3d(-78px, 950px, 0) rotate(8deg)
    }
}

/* 動畫在靜止模式與系統減少動態模式下停用 */
.motion-off .cloud,
.motion-off .drop {
    animation: none !important
}

@media(prefers-reduced-motion:reduce) {

    .cloud,
    .drop {
        animation: none !important
    }
}

/* V3: 以去背的自然雲層圖片取代 CSS 橢圓雲；雨絲沿用 V2 */
.photo-cloud-layer {
    position: absolute;
    inset: -8% -3%;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    will-change: transform;
    transition: opacity 1.2s ease, filter 1.2s ease;
}

.photo-cloud-back {
    background-image: url('../img/gif/cloud-left.webp');
    opacity: .83;
    animation: photo-cloud-left 68s ease-in-out infinite alternate;
    filter: blur(3px)
}

.photo-cloud-front {
    background-image: url('../img/gif/cloud-right.webp');
    opacity: .95;
    animation: photo-cloud-right 54s ease-in-out infinite alternate;
    filter: drop-shadow(0 8px 12px rgba(56, 97, 135, .16))
}

@keyframes photo-cloud-left {
    from {
        transform: translate3d(-1.2%, 0, 0)
    }

    to {
        transform: translate3d(1.5%, -.5%, 0)
    }
}

@keyframes photo-cloud-right {
    from {
        transform: translate3d(1.2%, 0, 0)
    }

    to {
        transform: translate3d(-1.3%, .3%, 0)
    }
}

[data-weather="sunny"] .photo-cloud-back {
    opacity: .67
}

[data-weather="sunny"] .photo-cloud-front {
    opacity: .86
}

[data-weather="cloudy"] .photo-cloud-back,
[data-weather="rainy"] .photo-cloud-back {
    opacity: 1;
    filter: grayscale(.75) brightness(.89) contrast(1.12)
}

[data-weather="cloudy"] .photo-cloud-front,
[data-weather="rainy"] .photo-cloud-front {
    opacity: 1;
    filter: grayscale(.7) brightness(.83) drop-shadow(0 14px 15px rgba(36, 65, 94, .22))
}

[data-weather="thunderstorm"] .photo-cloud-back {
    opacity: 1;
    filter: grayscale(1) brightness(.64) contrast(1.25)
}

[data-weather="thunderstorm"] .photo-cloud-front {
    opacity: 1;
    filter: grayscale(1) brightness(.62) contrast(1.2)
}

[data-weather="partly-rainy"] .photo-cloud-back {
    opacity: .75
}

[data-mode="night"] .photo-cloud-back {
    filter: brightness(.56) saturate(.72)
}

[data-mode="night"] .photo-cloud-front {
    filter: brightness(.52) saturate(.72)
}

[data-weather="thunderstorm"][data-mode="night"] .photo-cloud-back,
[data-weather="thunderstorm"][data-mode="night"] .photo-cloud-front {
    filter: grayscale(1) brightness(.36)
}

@media(max-width:1199px) {
    .photo-cloud-layer {
        inset: -4% -26%;
        background-size: 100% 100%
    }
}

@media(max-width:767px) {
    .photo-cloud-layer {
        inset: -3% -100%;
        background-size: 100% 100%
    }

    .photo-cloud-back {
        opacity: .72
    }
}

.motion-off .photo-cloud-layer {
    animation: none !important
}

@media(prefers-reduced-motion:reduce) {
    .photo-cloud-layer {
        animation: none !important
    }
}


/* V4: 月光降低亮度；增加自然雲層位移幅度與速度，保留 V2 雨絲設定 */
[data-mode="night"] .moon {
    opacity: .38;
    background: radial-gradient(circle at 36% 33%, #c9d7e7 0%, #a8bed6 64%, #7896b6 100%);
    box-shadow: 0 0 26px 7px rgba(161, 194, 228, .15);
}

[data-weather="partly-rainy"][data-mode="night"] .moon {
    opacity: .32
}

[data-weather="cloudy"][data-mode="night"] .moon,
[data-weather="rainy"][data-mode="night"] .moon,
[data-weather="thunderstorm"][data-mode="night"] .moon {
    opacity: .10
}

/* 左右交錯飄移，固定鏡頭，不改變圖片尺寸 */
.photo-cloud-layer {
    inset: -10% -12%;
    background-size: 100% 100%;
}

.photo-cloud-back {
    animation: photo-cloud-back-v4 32s ease-in-out infinite alternate;
}

.photo-cloud-front {
    animation: photo-cloud-front-v4 24s ease-in-out infinite alternate;
}

@keyframes photo-cloud-back-v4 {
    0% {
        transform: translate3d(-6%, -1%, 0)
    }

    50% {
        transform: translate3d(0%, 1%, 0)
    }

    100% {
        transform: translate3d(6%, -1%, 0)
    }
}

@keyframes photo-cloud-front-v4 {
    0% {
        transform: translate3d(6%, 1%, 0)
    }

    50% {
        transform: translate3d(0%, -1%, 0)
    }

    100% {
        transform: translate3d(-6%, 1%, 0)
    }
}

@media(max-width:1199px) {
    .photo-cloud-layer {
        inset: -8% -35%
    }
}

@media(max-width:767px) {
    .photo-cloud-layer {
        inset: -5% -115%
    }
}

/* V5: 不顯示太陽、月亮；雷雨才出現自然的局部閃電（兩段短閃） */
.sun,
.moon {
    display: none !important
}

.lightning {
    display: none !important;
    opacity: 0;
    animation: none;
    z-index: 3;
    background: none;
    overflow: hidden
}

[data-weather="thunderstorm"] .lightning {
    display: block !important;
    animation: storm-flash-v5 9s linear infinite
}

.lightning-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 30% 55% at 77% 32%, rgba(215, 238, 255, .48), transparent 75%)
}

.lightning .lightning-bolt {
    position: absolute;
    right: 16%;
    top: 2%;
    height: 69%;
    width: 15%;
    opacity: 1;
    filter: drop-shadow(0 0 7px rgba(228, 248, 255, .95)) drop-shadow(0 0 19px rgba(160, 209, 255, .55))
}

@keyframes storm-flash-v5 {

    0%, 19.9%, 20.5%, 21.0%, 21.6%, 64.9%, 65.6%, 66.1%, 66.7%, 100% {
        opacity: 0
    }

    20%, 20.35% {
        opacity: .9
    }

    21.2%, 21.4% {
        opacity: .55
    }

    65.1%, 65.4% {
        opacity: .75
    }

    66.3%, 66.5% {
        opacity: .38
    }
}

.motion-off .lightning {
    animation: none !important;
    opacity: 0 !important
}

@media(prefers-reduced-motion:reduce) {
    .lightning {
        animation: none !important;
        opacity: 0 !important
    }
}

@media(max-width:767px) {
    .lightning .lightning-bolt {
        right: 10%;
        width: 35%;
        height: 48%;
        top: 4%
    }
}