/* css/style.css */

html {
    scroll-behavior: smooth;
}

/* CSS Variables */
:root {
    --color-primary: #d6204b;
    --color-secondary: #f39c12;
    --color-text-dark: #1a1a1a;
    --color-text-grey: #666;
    --color-bg-white: #fff;
    --color-bg-yellow: #F7EBB1;
    --color-gold: #cfa835;
    --font-main: 'Noto Sans TC', sans-serif;
    --font-serif: 'Noto Serif TC', serif;
}

/* 初始化與基本設定 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    color: var(--color-text-dark);
    background-color: var(--color-bg-yellow);
    /* 桌機預設底色 */
    -webkit-font-smoothing: antialiased;
}

/* 防止手機選單開啟時背景滑動 */
body.menu-open {
    overflow: hidden;
}

/* Header */
.header {
    background-color: var(--color-bg-white);
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
}

.header-inner {
    padding: 12px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.logo-wrapper {
    display: inline-flex;
    align-items: center;
}

.nav-logo {
    height: 16px;
    /* logo 高度縮小至 16px */
    width: auto;
}

/* 隱藏手機專用區塊 (包含漢堡選單內文、支援/品牌故事/活動辦法區塊等) */
.mobile-menu-overlay,
.mobile-only,
.support-section,
.story-section,
.rules-section {
    display: none;
}

/* 導覽列與選單 (預設隱藏，手機版才顯示) */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
    position: absolute;
    right: 15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.menu-toggle img {
    width: 30px;
    height: 30px;
    display: block;
}

.icon-close {
    display: none !important;
}

.mobile-nav {
    display: none;
}

/* 彩色橫條 */
.colorful-bar {
    width: 100%;
    height: auto;
    display: block;
}

/* 主內容區容器 */
.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 54px);
    padding: 60px 20px;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

.bg-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
}

/* 雲朵圖案 */
.bg-cloud {
    position: absolute;
    z-index: 2;
}

.cloud-left {
    top: 50%;
    /* 上下置中 */
    left: 10%;
    /* 往右移一些 */
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 25%;
    max-width: 180px;
    -webkit-animation: fadeOpacityIn 1.5s ease backwards, floatLeft 6s ease-in-out infinite 1.5s;
    animation: fadeOpacityIn 1.5s ease backwards, floatLeft 6s ease-in-out infinite 1.5s;
}

.cloud-right {
    top: 8%;
    right: -2%;
    width: 30%;
    max-width: 220px;
    -webkit-animation: fadeOpacityIn 1.5s ease backwards, floatRight 8s ease-in-out infinite 1.5s;
    animation: fadeOpacityIn 1.5s ease backwards, floatRight 8s ease-in-out infinite 1.5s;
}

@-webkit-keyframes floatLeft {

    0%,
    100% {
        -webkit-transform: translateY(-50%) translateX(0);
    }

    50% {
        -webkit-transform: translateY(calc(-50% - 10px)) translateX(10px);
    }
}

@keyframes floatLeft {

    0%,
    100% {
        transform: translateY(-50%) translateX(0);
    }

    50% {
        transform: translateY(calc(-50% - 10px)) translateX(10px);
    }
}

@-webkit-keyframes floatRight {

    0%,
    100% {
        -webkit-transform: translateY(0) translateX(0);
    }

    50% {
        -webkit-transform: translateY(-15px) translateX(-10px);
    }
}

@keyframes floatRight {

    0%,
    100% {
        transform: translateY(0) translateX(0);
    }

    50% {
        transform: translateY(-15px) translateX(-10px);
    }
}

/* 神明呼吸擺動 (Loop) */
@-webkit-keyframes godFloat {

    0%,
    100% {
        -webkit-transform: translateY(0) rotate(0deg);
        transform: translateY(0) rotate(0deg);
    }

    50% {
        -webkit-transform: translateY(-8px) rotate(-1deg);
        transform: translateY(-8px) rotate(-1deg);
    }
}

@keyframes godFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-8px) rotate(-1deg);
    }
}

/* =========================================
   寺廟主視覺區塊 (包覆寺廟與神明) 
   ========================================= */
.temple-wrapper {
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    /* 高度設定100%，以利內部元素(神明/寺廟)能使用 bottom 負值延展 */
    max-width: 1920px;
    /* 限制最大寬度以符合大型桌面螢幕比例 */
    pointer-events: none;
    overflow: hidden;
    /* 使用 overflow: hidden 遮罩方式，遮掉超出底部的神明與寺廟區塊 */
}

/* 寺廟圖片 - 作為視覺基底 */
.temple-img {
    position: absolute;
    bottom: -10%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 90%;
    /* 寺廟圖寬度差不多要90%左右 */
    height: auto;
    z-index: 10;
    -webkit-animation: enterTemple 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    animation: enterTemple 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.god {
    position: absolute;
    z-index: 5;
    -webkit-animation: enterGods 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) backwards, godFloat 4s ease-in-out infinite;
    animation: enterGods 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) backwards, godFloat 4s ease-in-out infinite;
}

/* =========================================
   桌面版神明比例與精準定位 
   神明層級 (z-index) 邏輯:
   l1, r1 為前景主神明 (z-index: 6)
   l2, r2 為後景輔神明 (z-index: 4)
   寺廟為背景基底 (z-index: 10)
   ========================================= */
.god-l1 {
    /* 左邊 01 神明：固定在畫面左側偏下方 */
    left: 0%;
    bottom: -10vh;
    height: 35vh;
    width: auto;
    z-index: 6;
    /* 確保在l2前方，呈現立體感 */
    -webkit-animation-delay: 0.8s, 2s;
    animation-delay: 0.8s, 2s;
}

.god-l2 {
    /* 左邊 02 神明：配置在 01 神明右上方，達成約 10-20% 的視覺重疊 */
    left: 5%;
    bottom: -3vh;
    height: 35vh;
    width: auto;
    z-index: 4;
    /* 被 l1 遮擋 */
    -webkit-animation-delay: 0.9s, 2.5s;
    animation-delay: 0.9s, 2.5s;
}

.god-r1 {
    /* 右邊 01 神明：固定在畫面右側偏下方，尺寸較左側稍大 */
    right: -2%;
    bottom: -5vh;
    height: 40vh;
    width: auto;
    z-index: 6;
    /* 確保在r2前方 */
    -webkit-animation-delay: 0.85s, 2.2s;
    animation-delay: 0.85s, 2.2s;
}

.god-r2 {
    /* 右邊 02 神明：配置在 01 神明左上方，達成約 10-20% 的視覺重疊 */
    right: 7%;
    bottom: 5vh;
    height: 40vh;
    width: auto;
    z-index: 4;
    /* 被 r1 遮擋 */
    -webkit-animation-delay: 0.95s, 2.6s;
    animation-delay: 0.95s, 2.6s;
}

.content-section {
    position: relative;
    z-index: 20;
    /* 確保內容高於背景視覺 */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 800px;
    padding-bottom: 20px;
}

/* 標題與說明文字圖案替代 */
.title-wrapper {
    margin-bottom: 25px;
    width: 100%;
    display: flex;
    justify-content: center;
    -webkit-animation: enterContent 1s cubic-bezier(0.2, 0.8, 0.2, 1) 1.6s backwards;
    animation: enterContent 1s cubic-bezier(0.2, 0.8, 0.2, 1) 1.6s backwards;
}

.slogan-img {
    width: 90%;
    max-width: 500px;
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.subtitle-wrapper {
    margin-bottom: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    -webkit-animation: enterContent 1s cubic-bezier(0.2, 0.8, 0.2, 1) 1.8s backwards;
    animation: enterContent 1s cubic-bezier(0.2, 0.8, 0.2, 1) 1.8s backwards;
}

.subtitle-img {
    width: 80%;
    max-width: 400px;
    height: auto;
    display: block;
}

/* 桌面版專屬：QR Code */
.desktop-only {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mobile-only {
    display: none !important;
}

/* 手機版專屬背景圖層 */
.mobile-bg-pattern {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: url('../assets/images/index-00_bg.png') no-repeat bottom center;
    background-size: cover;
    pointer-events: none;
    z-index: 1 !important;
    -webkit-animation: fadeOpacityIn 1.5s ease backwards;
    animation: fadeOpacityIn 1.5s ease backwards;
}

/* QR與按鈕區塊進場動畫 */
.qr-container,
.action-container {
    -webkit-animation: enterContent 1s cubic-bezier(0.2, 0.8, 0.2, 1) 2.0s backwards;
    animation: enterContent 1s cubic-bezier(0.2, 0.8, 0.2, 1) 2.0s backwards;
}

.scan-alert-img {
    width: 100%;
    max-width: 140px;
    height: auto;
    margin-bottom: 12px;
}

.qr-image {
    width: 100%;
    max-width: 200px;
    height: auto;
    object-fit: contain;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    border-radius: 8px;
    /* 圓角修飾 */
    background-color: #fff;
    /* 防爆版 SVG 沒有自帶白底 */
}

.qr-image:hover {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
}

/* 動畫設定 */
@-webkit-keyframes fadeOpacityIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOpacityIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes enterTemple {
    from {
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(40px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(-50%) translateY(0);
    }
}

@keyframes enterTemple {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@-webkit-keyframes enterGods {
    from {
        opacity: 0;
        -webkit-transform: translateY(40px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes enterGods {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes enterContent {
    from {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes enterContent {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes floatLeftMobile {

    0%,
    100% {
        -webkit-transform: translateY(0) translateX(0);
    }

    50% {
        -webkit-transform: translateY(-10px) translateX(10px);
    }
}

@keyframes floatLeftMobile {

    0%,
    100% {
        transform: translateY(0) translateX(0);
    }

    50% {
        transform: translateY(-10px) translateX(10px);
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(10px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        box-shadow: 0 8px 15px rgba(184, 39, 39, 0.4);
    }

    50% {
        -webkit-transform: scale(1.05);
        box-shadow: 0 12px 25px rgba(184, 39, 39, 0.6);
    }

    100% {
        -webkit-transform: scale(1);
        box-shadow: 0 8px 15px rgba(184, 39, 39, 0.4);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 8px 15px rgba(184, 39, 39, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 25px rgba(184, 39, 39, 0.6);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 8px 15px rgba(184, 39, 39, 0.4);
    }
}

/* =========================================
   手機版視角 Responsive ( max-width: 768px ) 
   ========================================= */
@media screen and (max-width: 768px) {
    .header-inner {
        justify-content: flex-start;
        /* 手機版 Logo 置左 */
        width: 100%;
    }

    .main-container {
        justify-content: flex-start;
        padding: 40px 15px;
        background-color: #fff;
        /* 手機版改回白色背景 */
    }

    .menu-toggle {
        display: block !important;
    }

    /* 選單開啟時，切換圖示 */
    .menu-open .icon-menu {
        display: none !important;
    }

    .menu-open .icon-close {
        display: block !important;
    }

    /* 手機版導覽選單黑色半透明遮罩 */
    .mobile-nav {
        display: block;
        position: absolute;
        top: 100%;
        /* 接在 header 下方 */
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease-in-out;
    }

    .menu-open .mobile-nav {
        opacity: 1;
        visibility: visible;
    }

    .nav-list {
        background-color: var(--color-bg-white);
        list-style: none;
        padding: 50px 30px 70px;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
        transition: transform 0.3s ease-in-out;
    }

    .menu-open .nav-list {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    .nav-list li {
        border-bottom: 1px solid #f6efdf;
    }

    .nav-link {
        display: flex;
        align-items: center;
        padding: 16px 0;
        text-decoration: none;
        color: var(--color-text-dark);
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 1px;
    }

    .nav-icon-img {
        width: 24px;
        height: 24px;
        margin-right: 15px;
        display: block;
    }

    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 10px;
    }

    .mobile-bg-pattern {
        display: block !important;
    }

    /* 手機版雲朵調整 */
    .cloud-right {
        top: 0%;
        /* 在畫面的右上角 */
        right: 0%;
        width: 30%;
    }

    .cloud-left {
        top: auto;
        bottom: 25%;
        /* 大約在按鈕旁邊 */
        left: 0%;
        width: 25%;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        /* 更新手機版飄浮動畫，只定義一次 */
        -webkit-animation: fadeOpacityIn 1.5s ease backwards, floatLeftMobile 6s ease-in-out infinite 1.5s;
        animation: fadeOpacityIn 1.5s ease backwards, floatLeftMobile 6s ease-in-out infinite 1.5s;
    }

    /* =========================================
       手機版寺廟與神明主視覺調整 
       手機版因版面限制，將寺廟放大至160%並下移，
       神明群組則依比例重新定位，貼齊寺廟屋緣。
       ========================================= */


    /* 寺廟調整：放大並向下切齊邊緣 */
    .temple-img {
        -webkit-animation: enterTempleMobile 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
        animation: enterTempleMobile 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
        bottom: -3%;
        left: 50%;
        /* 讓動畫從 base CSS 繼承，不在此宣告 */
        width: 160%;
        height: auto;
        /* 復原基礎定位所需的 transform */
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .god {
        -webkit-animation: enterGodsMobile 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) backwards, godFloat 4s ease-in-out infinite;
        animation: enterGodsMobile 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) backwards, godFloat 4s ease-in-out infinite;
    }

    /* =========================================
       手機版神明層級調整
       ========================================= */
    .god-l1 {
        /* 左前神明 */
        left: 0%;
        bottom: 1%;
        height: 20vh;
        -webkit-animation-delay: 0.8s, 2s;
        animation-delay: 0.8s, 2s;
    }

    .god-l2 {
        /* 左後神明：重疊於 l1 後方 */
        left: 10%;
        bottom: 5%;
        height: 20vh;
        -webkit-animation-delay: 0.9s, 2.5s;
        animation-delay: 0.9s, 2.5s;
    }

    .god-r1 {
        /* 右前神明：尺寸稍大 */
        right: -4%;
        bottom: 1%;
        height: 24vh;
        -webkit-animation-delay: 0.85s, 2.2s;
        animation-delay: 0.85s, 2.2s;
    }

    .god-r2 {
        /* 右後神明：重疊於 r1 後方 */
        right: 15%;
        bottom: 7%;
        height: 24vh;
        -webkit-animation-delay: 0.95s, 2.6s;
        animation-delay: 0.95s, 2.6s;
    }

    /* 手機版行動呼籲按鈕 */
    .btn-start {
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #e64a4a 0%, #b82727 100%);
        color: white;
        border: none;
        padding: 16px 24px;
        width: 90%;
        max-width: 320px;
        border-radius: 40px;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 2px;
        box-shadow: 0 8px 15px rgba(184, 39, 39, 0.4);
        cursor: pointer;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        -webkit-animation: pulse 2s infinite 3s;
        animation: pulse 2s infinite 3s;
        /* 延遲 pulse 動畫避免與進場動畫衝突 */
    }

    .btn-icon {
        width: 24px;
        height: 24px;
        display: block;
    }

    .btn-start:hover,
    .btn-start:active {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
        box-shadow: 0 4px 10px rgba(184, 39, 39, 0.4);
        -webkit-animation: none;
        animation: none;
    }
}

/* =========================================
   手機版專屬進場動畫：因手機版 scale / transform 不同，需獨立拆分
   (注意：@keyframes 必須寫在 @media 外面，否則部分 iOS Safari 無法讀取)
   ========================================= */
@-webkit-keyframes enterTempleMobile {
    from {
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(40px);
        transform: translateX(-50%) translateY(40px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(-50%) translateY(0);
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes enterTempleMobile {
    from {
        opacity: 0;
        -webkit-transform: translateX(-50%) translateY(40px);
        transform: translateX(-50%) translateY(40px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(-50%) translateY(0);
        transform: translateX(-50%) translateY(0);
    }
}

@-webkit-keyframes enterGodsMobile {
    from {
        opacity: 0;
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes enterGodsMobile {
    from {
        opacity: 0;
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

/* =========================================
   選擇神明頁面 (deity.html)
   ========================================= */
.deity-page {
    background-color: var(--color-bg-yellow);
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.deity-main {
    flex: 1;
    position: relative;
    overflow: hidden;
    padding: 50px 0px 30px;
}

/* 雲朵背景 */
.deity-bg-clouds {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
}

.deity-cloud {
    position: absolute;
    opacity: 0.8;
}

.deity-cloud.cloud-left {
    top: 28%;
    left: -10%;
    width: 35%;
    max-width: 180px;
    -webkit-animation: fadeOpacityIn 1.5s ease backwards, floatLeftMobile 6s ease-in-out infinite 1.5s;
    animation: fadeOpacityIn 1.5s ease backwards, floatLeftMobile 6s ease-in-out infinite 1.5s;
}

.deity-cloud.cloud-right {
    top: 2%;
    right: -10%;
    width: 45%;
    max-width: 220px;
    -webkit-animation: fadeOpacityIn 1.5s ease backwards, floatRight 8s ease-in-out infinite 1.5s;
    animation: fadeOpacityIn 1.5s ease backwards, floatRight 8s ease-in-out infinite 1.5s;
}

/* 內容區 */
.deity-content {
    position: relative;
    z-index: 10;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 15px;
    text-align: center;
}

/* 標題區塊 */
.deity-title-wrapper {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    -webkit-animation: fadeIn 1s ease backwards;
    animation: fadeIn 1s ease backwards;
}

/* 共用語意標題圖示與裝飾線 */
.title-icon-sun {
    width: 60px;
    margin-bottom: 5px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.title-line-deco {
    height: 17px;
    width: auto;
    margin: 5px auto 5px;
    display: block;
}

/* 共用文字樣式 (Typography) */
.title {
    color: #581E1E;
    font-size: 26px;
    font-weight: 900;
    margin: 5px 0px;
    letter-spacing: 2px;
    line-height: 1.35;
    font-family: var(--font-serif);
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    text-align: center;
}

.subtitle {
    color: #581E1E;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    text-align: center;
    line-height: 1.4;
}

.card-title {
    color: #581E1E;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 5px 0;
}

.card-quote {
    color: #581E1E;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.paragraph {
    color: #323232;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
}

/* Specific layout adjustments for unified typography */
.support-header .paragraph {
    max-width: 400px;
    margin: 0 auto;
}

.story-card .paragraph {
    margin-bottom: 25px;
    line-height: 1.8;
    text-align: justify;
}

.rule-block .paragraph {
    margin-bottom: 20px;
    text-align: justify;
}


/* 神明網格區 */
.deity-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 0 10px;
    -webkit-animation: enterContent 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s backwards;
    animation: enterContent 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s backwards;
}

.deity-card-link {
    display: block;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
    border-radius: 20px;
    position: relative;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.deity-card-link img {
    width: 100%;
    height: auto;
    display: block;
}

/* 點擊 / Hover 的互動感 */
.deity-card-link:hover,
.deity-card-link:active {
    -webkit-transform: translateY(-8px) scale(1.03);
    transform: translateY(-8px) scale(1.03);
    filter: drop-shadow(0 15px 25px rgba(220, 76, 76, 0.4));
    z-index: 2;
}


/* 響應式調整 */
@media screen and (min-width: 769px) {
    .deity-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        padding: 0 20px;
    }

    .deity-cloud.cloud-left {
        left: 5%;
        width: 15%;
    }

    .deity-cloud.cloud-right {
        right: 5%;
        width: 15%;
    }
}

/* =========================================
   手機第 1 屏：支持區塊 (僅限手機版顯示)
   ========================================= */
.support-section {
    display: none;
    /* 預設桌機版隱藏 */
}

@media screen and (max-width: 768px) {
    .support-section {
        display: block;
        position: relative;
        z-index: 10;
        max-width: 100%;
        padding: 50px 15px 50px;
        /* Create room for bottom bg */
        background-color: var(--color-bg-yellow);
        background-image: url('../assets/images/index-01_bg.png'), url('../assets/images/index-00_bg.png');
        background-position: bottom center, top center;
        background-size: 100% auto, cover;
        background-repeat: no-repeat, no-repeat;
    }

    .support-header {
        text-align: center;
        margin-bottom: 25px;
    }

    .support-main-title {
        color: #581E1E;
        font-size: 26px;
        font-weight: 900;
        line-height: 1.35;
        margin: 10px 0;
        font-family: var(--font-serif);
        text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    }



    /* 支持卡片 */
    .support-card {
        background-color: transparent;
        border-radius: 0;
        /* 內凹圓角 (Concave Corners) 用 background 畫，避免 mask 裁切掉超出範圍的裝飾圖 */
        background: radial-gradient(circle at 0 0, transparent 24px, #fff 25px) top left,
            radial-gradient(circle at 100% 0, transparent 24px, #fff 25px) top right,
            radial-gradient(circle at 0 100%, transparent 24px, #fff 25px) bottom left,
            radial-gradient(circle at 100% 100%, transparent 24px, #fff 25px) bottom right;
        background-size: 51% 51%;
        background-repeat: no-repeat;

        padding: 50px 25px 30px;
        margin-top: 40px;
        margin-bottom: 25px;
        text-align: center;
        position: relative;
        /* drop-shadow 會精準貼合 cutout 邊緣與凸出的 .card-deco-top */
        filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.05));
    }

    .support-card .card-deco-top {
        position: absolute;
        top: -25px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
    }

    .support-card .card-divider {
        border: none;
        border-top: 1px solid #BC9841;
        border-bottom: 4px solid #BC9841;
        height: 8px;
        /* 雙線間距 */
        margin: 15px auto 20px;
        width: 100%;
    }

    .support-card .card-list {
        text-align: left;
        list-style: none;
        padding: 0;
        margin: 0 0 25px 0;
    }

    .support-card .card-list li {
        color: #323232;
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 8px;
    }

    .support-card .btn-support-red {
        margin-top: 10px;
        max-width: 100%;
        display: inline-flex;
    }

    /* =========================================
       手機第 2 屏：HAPPY GO 品牌故事區塊
       ========================================= */
    .story-section {
        display: block;
        position: relative;
        z-index: 10;
        max-width: 100%;
        padding: 50px 15px 15px;
        background-color: #fff;
        /* White background separating from previous section */
    }

    .story-header {
        text-align: center;
        margin-bottom: 40px;
        position: relative;
    }

    .story-dragon-deco {
        position: absolute;
        top: -60px;
        right: -10px;
        width: 120px;
        z-index: 2;
        /* Optional: add floating animation */
        -webkit-animation: floatRight 6s ease-in-out infinite;
        animation: floatRight 6s ease-in-out infinite;
    }

    .story-card {
        margin-bottom: 50px;
    }

    .story-img-wrapper {
        position: relative;
        width: 100%;
        border-radius: 12px;
    }

    .story-img {
        width: 100%;
        height: auto;
        border-radius: 12px;
        display: block;
    }

    .story-badge {
        position: absolute;
        width: 60px;
        z-index: 5;
    }

    /* Badge Positioning Classes */
    .badge-bottom-left {
        bottom: -15px;
        left: -10px;
    }

    .badge-bottom-right {
        bottom: -15px;
        right: -10px;
        width: 50px;
        /* Star is slightly smaller */
    }

    .badge-bottom-left-dino {
        bottom: 0px;
        left: 0px;
        height: 50px;
        /* Dinosaur is larger */
    }

    /* =========================================
       手機第 3 屏：活動辦法區塊
       ========================================= */
    .rules-section {
        display: block;
        position: relative;
        z-index: 10;
        max-width: 100%;
        padding: 50px 20px 50px;
        background-color: var(--color-bg-yellow);
        /* 側邊條紋背景 */
        background-image: url('../assets/images/index-03_bg.png');
        background-size: 100% auto;
        background-position: top center;
        background-repeat: repeat-y;
    }

    .rules-container {
        background-color: transparent;
        border-radius: 0;
        padding: 30px 25px;
        border: none;
        /* 內凹圓角特效 */
        background: radial-gradient(circle at 0 0, transparent 24px, #fff 25px) top left,
            radial-gradient(circle at 100% 0, transparent 24px, #fff 25px) top right,
            radial-gradient(circle at 0 100%, transparent 24px, #fff 25px) bottom left,
            radial-gradient(circle at 100% 100%, transparent 24px, #fff 25px) bottom right;
        background-size: 51% 51%;
        background-repeat: no-repeat;
        filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.05));
    }

    .rules-header {
        text-align: center;
        margin-bottom: 30px;
    }

    .rule-block {
        margin-bottom: 25px;
    }

    .rule-block:last-child {
        margin-bottom: 0;
    }

    /* 對獎項內部有次標題的區塊微調 */
    .rule-sub-block {
        margin-bottom: 15px;
    }



    .rule-desc strong {
        color: #581E1E;
    }

    .rule-list {
        color: #323232;
        font-size: 14px;
        line-height: 1.6;
        padding-left: 20px;
        margin: 0;
    }

    .rule-list li {
        margin-bottom: 5px;
    }

    hr.rules-divider {
        border: none;
        border-top: 1px solid #F3E089;
        width: 100%;
        margin: 10px 0;
        height: 1px;
    }

    /* 注意事項 (可展開) */
    .precautions-header {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        padding: 10px 0;
        position: relative;
        z-index: 5;
        /* 防止選取文字 */
        -webkit-user-select: none;
        user-select: none;
    }

    .toggle-icon {
        width: 20px;
        transition: transform 0.3s ease;
    }

    .precautions-content {
        display: none;
        /* 預設隱藏 */
        margin-top: 15px;
        padding-top: 15px;
    }

    .precautions-content.is-open {
        display: block;
        animation: fadeIn 0.4s ease-out forwards;
    }

    .precautions-list {
        color: #555;
        /* 注意事項顏色稍微淡一點 */
        font-size: 13px;
        line-height: 1.5;
        padding-left: 20px;
        margin: 0;
        text-align: justify;
    }

    .precautions-list li {
        margin-bottom: 10px;
    }
}

/* Footer區塊 */
.footer {
    display: flex;
    width: 100%;
    height: 50px;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 9px;
    color: #5E5218;
}

/* =========================================
   抽籤結果頁面 (result.html)
   ========================================= */
.result-page {
    background-color: var(--color-bg-yellow);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.result-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 0;
}

.result-card-section {
    width: 100%;
    display: flex;
    justify-content: center;
}

.result-card-wrapper {
    position: relative;
    width: 90%;
    max-width: 400px;
    -webkit-animation: enterGodsMobile 1s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    animation: enterGodsMobile 1s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.result-card-img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
}

.result-text-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.result-subtitle {
    position: absolute;
    top: 29%;
    width: 100%;
    margin-left: 20px;
    text-align: center;
    color: #DC4C4C;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0px;
    line-height: 1.2;
    font-family: var(--font-serif);
}

.result-title {
    position: absolute;
    top: 53.5%;
    width: 100%;
    text-align: center;
    color: #2C0F0F;
    font-size: 38px;
    font-weight: 900;
    font-family: var(--font-serif);
    line-height: 1.3;
    transform: translateY(-50%);
}

.result-desc {
    position: absolute;
    top: 76%;
    width: 70%;
    text-align: justify;
    color: #323232;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0px;
}

/* 下方按鈕與文字區塊 */
.result-action-section {
    width: 100%;
    max-width: 600px;
    margin-top: 25px;
    padding: 0 15px;
    text-align: center;
    -webkit-animation: enterContent 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s backwards;
    animation: enterContent 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s backwards;
}

.result-action-title {
    margin-bottom: 30px;
}



.action-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.btn-support-red {
    background-color: #d64949;
    color: #fff;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 350px;
    box-shadow: 0 8px 20px rgba(214, 73, 73, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-support-red:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(214, 73, 73, 0.4);
}

.link-reselect-wrapper {
    margin-top: 20px;
    display: flex;
    align-items: center;
}

.link-reselect {
    color: #DC4C4C;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    border-bottom: 1px solid #DC4C4C;
    padding-bottom: 3px;
    transition: color 0.2s, opacity 0.2s;
}

.link-reselect:hover {
    opacity: 0.8;
    border-bottom: none;
    padding-bottom: 4px;
}

.arrow-icon {
    height: 15px;
    margin: 0 10px;
}

/* =========================================
   抽籤進場動畫遮罩 (result.html)
   ========================================= */
.fortune-ani-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-yellow);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ani-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

.ani-bg-pattern img {
    width: 100%;
    display: block;
}

.ani-cloud-top {
    position: absolute;
    top: 5%;
    right: -5%;
    width: 45%;
    max-width: 250px;
    z-index: 2;
    -webkit-animation: floatCloud 3s ease-in-out infinite alternate;
    animation: floatCloud 3s ease-in-out infinite alternate;
}

.ani-bottom-wrap {
    position: absolute;
    bottom: -5%;
    left: 0;
    width: 80%;
    max-width: 400px;
    z-index: 2;
    -webkit-animation: floatCloud 4s ease-in-out infinite alternate-reverse;
    animation: floatCloud 4s ease-in-out infinite alternate-reverse;
}

.ani-bottom-wrap img {
    width: 100%;
    display: block;
}

.ani-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 0 20px;
}

.ani-title-deco {
    width: 100px;
    margin-bottom: 10px;
}

.ani-text {
    color: #581E1E;
    font-size: clamp(20px, 6vw, 28px);
    font-weight: 900;
    letter-spacing: 2px;
    font-family: var(--font-serif);
    margin: 0;
    line-height: 1.4;
}

/* 動畫效果區 (特效) */
@-webkit-keyframes floatCloud {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
        transform: translateY(0px) rotate(0deg);
    }

    100% {
        -webkit-transform: translateY(8px) rotate(2deg);
        transform: translateY(8px) rotate(2deg);
    }
}

@keyframes floatCloud {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
        transform: translateY(0px) rotate(0deg);
    }

    100% {
        -webkit-transform: translateY(8px) rotate(2deg);
        transform: translateY(8px) rotate(2deg);
    }
}

/* 桌機版微調 */
@media screen and (min-width: 769px) {
    .result-card-wrapper {
        max-width: 500px;
    }

    .result-subtitle {
        font-size: 20px;
    }

    .result-title {
        font-size: 38px;
    }

    .result-desc {
        font-size: 16px;
        top: 74%;
    }

    .result-action-title h2 {
        font-size: 24px;
    }

    .result-action-title p {
        font-size: 16px;
    }
}