/**
 * 彩虹橋主題 (Rainbow Bridge)
 * 寵物專屬主題 —— 色彩繽紛，充滿希望與愛
 * -------------------------------------------------------------------------
 * ⚠️ 2026-09-19：這套主題「做好了但從來沒生效過」。
 *    api/create.php:219 建立寵物追思頁時會存 theme='rainbow'，
 *    但 core/ThemeCatalog.php（以及在它之前 view.php 裡的硬編碼白名單）
 *    從來沒有這一筆 —— 前台一律 fallback 成 starry。7 個寵物頁被這樣顯示了好幾個月。
 *    這次已把 rainbow 註冊進 ThemeCatalog，並修掉下面兩個讓它「就算註冊了也不會對」的問題。
 *
 * ⚠️ 這是全站唯一的**淺色**主題。深色主題能省的事，它都不能省：
 *    html:has() 的採樣色必須是淺色，否則 iOS 26 PWA 頂部會出現一條突兀的深藍
 *    （memorial-view.css 的 fallback 是 starry 的 #0d0d1a）。
 */

/* ★ 不是贅碼，不要順手刪（2026-09-10 iOS 26 Liquid Glass，見 CLAUDE.md 8.24）
   Safari 26 直接讀 CSS 的 computed 值決定頂部那層玻璃染什麼色。
   memorial-view.css 的 html:has() 清單只涵蓋 8 套深色主題，這套要自己補，
   而且色值必須與下面頁面漸層的**起點**一致（天空藍，不是深色）。 */
html:has(body.theme-rainbow) {
    background-color: #87ceeb;
}

.theme-rainbow {
    --theme-primary: #5b7bb2;
    --theme-secondary: #7da4d4;
    --theme-accent: #f9a825;
    --theme-bg-start: #e8f4fd;
    --theme-bg-end: #d4e8f7;
    --theme-text: #3a5070;
    --theme-text-light: #6a8aaa;
}

/* ⚠️ 相鄰選擇器（中間沒有空格）。原本寫成 `.theme-rainbow .memorial-view-page`
   是「.theme-rainbow 底下的 .memorial-view-page」，但 body 上是
   class="memorial-view-page theme-rainbow"，兩個 class 在同一個元素，
   後代選擇器永遠不匹配 —— 這段漸層從來沒有被畫出來過。
   （starry.css 原本也是同樣的錯，2026-09-19 一起修掉。） */
.theme-rainbow.memorial-view-page {
    background: linear-gradient(180deg, #87ceeb 0%, #e0f0ff 30%, #fff8e1 70%, #ffe0b2 100%);
    /* ⚠️ 上面的 background 是簡寫，會把 body.memorial-view-page 設的
       background-attachment: fixed 重設成 scroll，也會把 background-color 清成透明。
       漸層變成 scroll 會被拉伸到整份文件高度，長專頁捲一整頁都看不出顏色在變。 */
    background-attachment: fixed;
    background-color: #87ceeb;
    min-height: 100vh;
    position: relative;
    color: var(--theme-text);
}

/* Hero 遮罩底部邊框要與波浪同色，否則會看到一條接縫 */
.theme-rainbow .hero-cover-overlay {
    border-bottom-color: #87ceeb;
}

/* B 層儀式動效（ritual.js）的配色。
   ⚠️ 這是淺色底，不能沿用 ritual.js 那組為深色底調的預設值 ——
      淺金的光點打在奶油色背景上等於看不見。火要更飽和、煙要更深。 */
.theme-rainbow {
    --rt-flame: #ff8a3d;
    --rt-flame-core: #fff0c2;
    --rt-glow: 249, 168, 37;
    --rt-petal-a: #ff8fab;
    --rt-petal-b: #ffd6e0;
    --rt-petal-core: #f9a825;
    --rt-smoke: 120, 140, 160;
    --rt-glint: #f08a2b;
    --rt-letter-a: #ffffff;
    --rt-letter-b: #fff3d6;
    --rt-letter-line: 120, 96, 56;
}

/* 彩虹背景 */
.theme-rainbow .memorial-cover {
    background: linear-gradient(135deg,
        #87ceeb 0%,
        #98d8c8 20%,
        #b5e48c 40%,
        #ffd93d 60%,
        #ffb347 80%,
        #ff8fab 100%
    );
    position: relative;
}

.theme-rainbow .memorial-cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    animation: rainbowShine 3s ease-in-out infinite;
}

@keyframes rainbowShine {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

.theme-rainbow .memorial-profile-card {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(255, 183, 71, 0.3);
    box-shadow: 0 10px 40px rgba(91, 123, 178, 0.15);
}

.theme-rainbow .memorial-avatar-placeholder {
    background: linear-gradient(135deg, #ff8fab 0%, #ffd93d 50%, #98d8c8 100%);
}

.theme-rainbow .memorial-name {
    color: var(--theme-primary);
}

.theme-rainbow .memorial-age {
    background: linear-gradient(90deg, #ff8fab, #ffd93d);
    color: #5b3a00;
}

.theme-rainbow .memorial-section {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(91, 123, 178, 0.1);
}

.theme-rainbow .memorial-section-title {
    color: var(--theme-primary);
}

.theme-rainbow .memorial-section-title .material-icons {
    color: #ff8fab;
}

.theme-rainbow .memorial-timeline-dot {
    background: linear-gradient(180deg, #ff8fab, #ffd93d);
}

.theme-rainbow .memorial-timeline::before {
    background: linear-gradient(180deg,
        #ff8fab 0%,
        #ffb347 25%,
        #ffd93d 50%,
        #98d8c8 75%,
        #87ceeb 100%
    );
    width: 3px;
}

/* 爪印裝飾 */
.theme-rainbow .memorial-tribute-section::before {
    content: '🐾';
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 2rem;
    opacity: 0.2;
}

.theme-rainbow .memorial-tribute-btn {
    border-color: rgba(91, 123, 178, 0.2);
}

.theme-rainbow .memorial-tribute-btn:hover {
    border-color: var(--theme-accent);
    background: rgba(249, 168, 37, 0.1);
}

.theme-rainbow .memorial-tribute-btn.active {
    border-color: var(--theme-accent);
    background: rgba(249, 168, 37, 0.15);
}

/* 特殊：寵物專用圖示 */
.theme-rainbow .memorial-stat-label::before {
    content: '🌈 ';
}

/* 訊息區塊 */
.theme-rainbow .memorial-message-item {
    background: linear-gradient(135deg, rgba(135, 206, 235, 0.1) 0%, rgba(255, 224, 178, 0.1) 100%);
    border-left: 3px solid #ffd93d;
}

.theme-rainbow .memorial-message-author {
    color: var(--theme-primary);
}

/* 愛心動畫 */
.theme-rainbow .memorial-tribute-btn[data-type="flower"].active .memorial-tribute-icon {
    animation: heartBeat 0.6s ease-in-out;
}

@keyframes heartBeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1); }
    75% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Footer
   ⚠️ 2026-09-23：原本這裡是一塊橫向彩虹漸層底，疊在奶油黃頁面底上變成
      一個方方正正、邊界突兀的色塊，已拿掉，footer 直接透出頁面底色。
   ⚠️ memorial-view.css 的 .memorial-footer 與其連結寫死 #fff（深色主題用），
      淺色底上等於白字壓奶油黃，文字幾乎看不到 —— 這裡必須覆寫。 */
.theme-rainbow footer {
    background: transparent;
}

.theme-rainbow .memorial-footer,
.theme-rainbow .memorial-footer .view-count {
    color: #4a6a8a;
}

.theme-rainbow .memorial-footer a {
    color: #5b7bb2;
}

/* ═════════════════════════════════════════════════════════
   淺色底的文字覆寫（2026-09-19 新增）

   ⚠️ 這一整段不是「調色」，是**讓字看得見**。
      memorial-view.css 是照深色主題寫的，把這些元素的顏色寫死成
      白／淺灰而且帶 `!important`：
        .pet-name #fff  .pet-dates #ccc  .pet-age #eee  .pet-epitaph #ddd
        .section-title #fff  .letter-content #ddd  .timeline-title #fff
      在唯一的淺色主題（本檔）上，那就是白字壓在天空藍與奶油黃上面 ——
      實測截圖裡姓名、生卒年、墓誌銘、區塊標題全部幾乎看不到。

   ⚠️ 所以下面每一條都必須帶 `!important`，少一條那一行就會消失。
      新增淺色主題時把這一段整段複製過去，只換顏色。
   ═════════════════════════════════════════════════════════ */

.theme-rainbow .pet-name {
    color: #2c4a6b !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}

.theme-rainbow .pet-title {
    color: #5b7bb2 !important;
}

.theme-rainbow .pet-nickname {
    color: #6a8aaa !important;
}

.theme-rainbow .pet-dates {
    color: #52709a !important;
}

.theme-rainbow .pet-age {
    color: #3a5070 !important;
}

.theme-rainbow .pet-epitaph {
    color: #3a5070 !important;
}

.theme-rainbow .pet-epitaph::before,
.theme-rainbow .pet-epitaph::after {
    color: rgba(249, 168, 37, 0.85) !important;
}

/* ⚠️ 基準規則（memorial-view.css:551）的 background 是帶 !important 的紫紅漸層，
   不加 !important 蓋不掉 —— 淺色主題上會變成一塊突兀的粉紅方塊（實機截圖抓到）。 */
.theme-rainbow .pet-avatar-placeholder {
    color: #2c4a6b !important;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(224, 240, 255, 0.92) 55%,
            rgba(255, 248, 225, 0.92) 100%) !important;
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 6px 24px rgba(90, 120, 160, 0.25);
    text-shadow: none;
}

.theme-rainbow .section-title,
.theme-rainbow .memorial-section-title {
    color: #2c4a6b !important;
}

.theme-rainbow .section-title::before,
.theme-rainbow .section-title::after {
    background: linear-gradient(90deg, transparent, rgba(91, 123, 178, 0.55), transparent);
}

.theme-rainbow .memorial-section-title .material-icons {
    color: #f9a825;
}

/* ⚠️ memorial-view.css:674 是 `.story-content, .letter-content { color:#ddd !important }`，
   不加 !important 蓋不掉 —— 這條漏了 !important 的話，生平故事會是淺灰壓在白卡片上。 */
.theme-rainbow .story-content {
    color: #3a5070 !important;
}

.theme-rainbow .memorial-section p {
    color: #3a5070;
}

.theme-rainbow .letter-content {
    color: #3a5070 !important;
}

.theme-rainbow .letter-signature {
    color: #5b7bb2;
}

.theme-rainbow .timeline-title {
    color: #2c4a6b !important;
}

.theme-rainbow .timeline-date {
    color: #c77d00;
}

.theme-rainbow .timeline-desc {
    color: #4a6480;
}

.theme-rainbow .timeline::before {
    background: linear-gradient(180deg,
            transparent,
            rgba(91, 123, 178, 0.45) 12%,
            rgba(91, 123, 178, 0.45) 88%,
            transparent);
}

.theme-rainbow .timeline-dot {
    background: #f9a825;
    box-shadow: 0 0 0 4px rgba(249, 168, 37, 0.22);
}

/* 區塊底色：半透明白卡片配深字，透出底下的天空漸層
   （2026-09-23：原本 0.86 幾乎是實白，整頁一塊塊白板太刺眼，降到 0.6） */
.theme-rainbow .memorial-section {
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 6px 22px rgba(90, 120, 160, 0.1);
}

/* 區塊內的卡片再疊一層淡白，與區塊做出層次但不搶眼 */
.theme-rainbow .message-compose-card,
.theme-rainbow .message-preview-card,
.theme-rainbow .message-empty-card,
.theme-rainbow .message-login-card {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(91, 123, 178, 0.14);
}

/* ── 手寫祈福（modules/handwriting.php）──
   ⚠️ 該模組內嵌 CSS 是照深色主題寫的（白字、白框、半透明白底），
      它的淺色主題清單只有 cloud／sakura／minimal，沒有 rainbow，
      於是下拉選單的文字、空狀態圖示在這套主題上全部看不到。 */
.theme-rainbow .handwriting-select-area {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(91, 123, 178, 0.14);
}

.theme-rainbow .select-group label {
    color: #2c4a6b;
}

.theme-rainbow .handwriting-select-area .form-control {
    background: rgba(255, 255, 255, 0.85);
    color: #2c4a6b;
    border-color: rgba(91, 123, 178, 0.3);
}

.theme-rainbow .handwriting-select-area .form-control:focus {
    border-color: #f9a825;
    background: #fff;
}

.theme-rainbow .handwriting-select-area .form-control option {
    background: #fff;
    color: #2c4a6b;
}

.theme-rainbow .handwriting-card {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(91, 123, 178, 0.14);
}

.theme-rainbow .handwriting-card:hover {
    border-color: rgba(91, 123, 178, 0.3);
    box-shadow: 0 8px 24px rgba(91, 123, 178, 0.15);
}

.theme-rainbow .handwriting-image {
    border-bottom-color: rgba(91, 123, 178, 0.12);
}

.theme-rainbow .handwriting-meta strong {
    color: #2c4a6b;
}

.theme-rainbow .handwriting-meta .author {
    color: #4a6a8a;
}

.theme-rainbow .handwriting-meta .date {
    color: #7890a8;
}

.theme-rainbow .handwriting-section .empty-state {
    color: #5a7590;
}

.theme-rainbow .handwriting-section .empty-state .material-icons {
    color: #7da4d4;
    opacity: 0.6;
}

.theme-rainbow .preview-author {
    color: #2c4a6b;
}

.theme-rainbow .preview-date,
.theme-rainbow .preview-content {
    color: #5a7590;
}

.theme-rainbow .photo-item {
    border: 1px solid rgba(91, 123, 178, 0.2);
}

.theme-rainbow .photo-item:hover {
    border-color: rgba(249, 168, 37, 0.6);
    box-shadow: 0 8px 24px rgba(90, 120, 160, 0.22);
}

/* 點燈數字原本是 #f1c40f（金黃），在奶油色背景上等於看不見 */
.theme-rainbow .candle-count {
    color: #c77d00 !important;
}

.theme-rainbow .light-candle-btn {
    background: linear-gradient(135deg, #ff8fab 0%, #f9a825 100%);
    color: #4a2c0a;
    border: 1px solid rgba(249, 168, 37, 0.6);
}

.theme-rainbow .light-candle-btn:hover:not(:disabled):not(.lit) {
    /* 全域規範：hover 只加深背景，不改文字顏色 */
    background: linear-gradient(135deg, #e87a95 0%, #dd9017 100%);
    color: #4a2c0a;
}

.theme-rainbow .light-candle-btn.lit {
    background: rgba(249, 168, 37, 0.25);
    color: #6b4a10;
}

.theme-rainbow .submit-btn,
.theme-rainbow .section-action-btn {
    background: linear-gradient(135deg, #7da4d4 0%, #f9a825 100%);
    color: #2a2410;
}

/* 減少動態：本主題的動畫只有封面的漸層，這裡一併關掉 */
@media (prefers-reduced-motion: reduce) {

    .theme-rainbow .memorial-cover::before,
    .theme-rainbow .memorial-cover::after {
        animation: none !important;
        transition: none !important;
    }
}