/**
 * Shared pink glass style + sizing for homepage & immersive clock/calendar widgets
 */

/* 1. 基礎樣式 — 玻璃粉紅材質 */
#immersiveClock.immersive-widget,
#immersiveDate.immersive-widget,
.homepage-desktop-widget.immersive-widget {
    background: linear-gradient(
        145deg,
        rgba(255, 120, 170, 0.28),
        rgba(255, 70, 130, 0.16)
    ) !important;
    backdrop-filter: blur(22px) saturate(1.35);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
    border: 1px solid rgba(255, 175, 205, 0.48) !important;
    box-shadow:
        0 12px 36px rgba(180, 40, 90, 0.22),
        inset 0 1px 0 rgba(255, 220, 235, 0.35),
        inset 0 -1px 0 rgba(120, 20, 60, 0.12) !important;
    text-shadow: 0 0 12px rgba(255, 200, 220, 0.45);
    color: #ffe8f4;
}

/* 2. 布局樣式 — 與首頁一致 */
#immersiveClock.immersive-widget.immersive-clock,
#homepageClock.immersive-widget.immersive-clock {
    box-sizing: border-box;
    min-width: 0 !important;
    min-height: 0;
    width: max-content;
    max-width: calc(100vw - 24px);
    padding: 6px !important;
    text-align: center;
    font-size: 32px;
}

#immersiveDate.immersive-widget.immersive-calendar,
#homepageDate.immersive-widget.immersive-calendar {
    box-sizing: border-box;
    width: max-content;
    min-width: 0;
    padding: 6px !important;
}

#immersiveClock .widget-digital-time,
#homepageClock .widget-digital-time {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 32px;
    line-height: 1;
    letter-spacing: 2px;
    color: #e8f8ff;
    text-shadow:
        0 0 12px rgba(180, 240, 255, 0.85),
        0 0 22px rgba(255, 120, 180, 0.35);
}

#immersiveDate .mini-cal-header,
#homepageDate .mini-cal-header {
    font-size: 14px;
    color: #ffe8f2;
    text-shadow: 0 0 10px rgba(255, 140, 190, 0.65);
}

#immersiveDate .mini-day-name,
#homepageDate .mini-day-name {
    color: rgba(255, 225, 235, 0.55);
}

#immersiveDate .mini-day.today,
#homepageDate .mini-day.today {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    flex-shrink: 0;
    margin-inline: auto;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid rgba(255, 200, 220, 0.65);
    box-sizing: border-box;
}

#immersiveDate .mini-cal-grid,
#homepageDate .mini-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    font-size: 11px;
}

/* 3. 交互樣式 — 尺寸（小 0.8 / 中 1.0 / 大 1.6） */
.immersive-widget.small-size {
    transform: scale(0.8);
}

.immersive-widget.large-size {
    transform: scale(1.6);
}

/* 4. 響應式 — 平板大號略縮 */
@media screen and (max-width: 1366px) {
    .immersive-widget.large-size {
        transform: scale(1.2);
    }
}