[v-cloak] {
    display: none !important;
}

:root {
  --app-height: 100vh;
  /* 挑選圖片中最深或最淡的一個底色，這裡建議米白色或淺灰色 */
  --bg-color: #f8e8d5; 
}

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: var(--app-height);
  background-color: var(--bg-color); /* 電腦版左右兩側的底色 */
  display: flex;
  justify-content: center; /* 讓內容在電腦版置中 */
  overflow: hidden;
}

#app {
  /* --- 1. 背景控制變數 --- */
  --current-bg: url('../images/bg.png'); /* 預設首頁圖 */
  --bg-overlay: rgba(255, 255, 255, 0);  /* 預設無遮罩 */
  --app-bg-color: #f8f4e8;              /* 預設背景底色(符合bg2雲海色) */
  --bg-size-mode: cover;                /* 預設首頁用 cover */

  /* --- 2. 容器尺寸與定位 --- */
  width: 100%;
  max-width: 550px; 
  height: var(--app-height);
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  
  /* --- 3. 背景核心邏輯 --- */
  /* 背景色：當圖片 contain 時，左右或上下空出的部分會顯示這個顏色 */
  background-color: var(--app-bg-color);
  
  /* 多重背景：最上層是動態遮罩，下層是主圖 */
  background-image: 
    linear-gradient(var(--bg-overlay), var(--bg-overlay)), 
    var(--current-bg);
  
  /* 動態切換模式：首頁 cover / 功能頁 contain */
  background-size: var(--bg-size-mode); 
  background-position: center top;
  background-repeat: no-repeat;
  
  /* 轉場動畫：換圖與換色時會平滑淡入 */
  transition: all 0.3s ease-in-out;
  
  /* 陰影與佈局 */
  box-shadow: 0 0 50px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  z-index: 0;
}

/* 頂部與底部的淡淡陰影遮罩 (保持你原有的裝飾) */
#app::before {
  content: "";
  position: absolute;
  top: 0; left: 0; 
  width: 100%; height: 100%;
  background: 
    /* 1. 上下漸層 */
    linear-gradient(to bottom, 
      var(--app-bg-color) 0%, 
      transparent 8%, 
      transparent 92%, 
      var(--app-bg-color) 100%),
    /* 2. 左右漸層 */
    linear-gradient(to right, 
      var(--app-bg-color) 0%, 
      transparent 10%, 
      transparent 88%, 
      var(--app-bg-color) 100%);
  pointer-events: none;
  z-index: 1; /* 確保裝飾在背景之上 */
}

/* 確保前面的功能內容在最上層，不會被遮住 */
.content-layer {
  position: relative;
  z-index: 2;
  flex: 1;
}

.main-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-y: auto; /* 關鍵：內容過長時顯示滾動條 */
    -webkit-overflow-scrolling: touch; /* 手機滑動順暢度 */
    overflow-x: hidden;
    padding-bottom: env(safe-area-inset-bottom);
}


.header-section {
  text-align: center;
  z-index: 10;
  margin-top: 2vh;
}

.main-title {
  font-family: 'openhuninn', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  color: #5d4037;
  /* 關鍵：字體隨寬度縮放，最小 32px，最大 48px */
  font-size: clamp(32px, 8vw, 48px); 
  /* 字距也使用相對單位，保持美感 */
  letter-spacing: 0.25em; 
  text-shadow: 0 0 15px rgba(255, 255, 255, 1);
  margin: 0;
  padding: 0 10px;
  font-weight: 800;
  line-height: 1.2;

  /* 核心：禁止文字被反藍選取 */
  user-select: none; 
  -webkit-user-select: none; /* 針對 Safari/Chrome 瀏覽器 */
  -moz-user-select: none;    /* 針對 Firefox */
  -ms-user-select: none;     /* 針對舊版 IE/Edge */

  /* 讓游標維持預設，不要變成文字選取的 I 狀 */
  cursor: default;
}


@font-face {
  font-family: 'openhuninn'; /* 你自己取的字型名稱 */
  src: url('/fonts/jf-openhuninn-2.0.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* 媽祖容器，控制整體高度與位置 */
.mazu-container {
    display: flex;
    position: absolute;
    top: 10vh;      /* 距離頂部一點距離 */
    left: 0;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* 1. 增加容器高度，給媽祖更多空間 */
    height: clamp(200px, 35vh, 400px);
    margin-top: 2vh;
    z-index: 5;
    /* 暫時拿掉底下的 padding 或限制，看看是不是被擠壓了 */
    overflow: visible;
    pointer-events: none;
}

/* 媽祖定義飄浮動畫 */
@keyframes float {
  0% {
    transform: translateY(0px); /* 初始位置 */
  }
  50% {
    transform: translateY(-20px); /* 向上飄移 20 像素 */
  }
  100% {
    transform: translateY(0px); /* 回到原位 */
  }
}

.mazu-figure {
  /* 這裡加大尺寸 */
  width: 100vw;
  /* 確保在窄螢幕上不會爆出去 */
  max-width: 450px;
  height: auto;
  object-fit: contain;
  z-index: 2;
  /* 強化光暈，更顯神聖 */
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.7)); 
  animation: mazuFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.8));
  cursor: pointer;
  transition: transform 0.3s;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}


/* 2. 定義飄浮軌跡 */
@keyframes mazuFloat {
    0%, 100% {
        transform: translateY(1vh);
        /* 初始光暈 */
        filter: drop-shadow(0 5px 15px rgba(255, 215, 0, 0.5));
    }
    50% {
        /* 上升幅度 */
        transform: translateY(-2vh); 
        /* 飄高時光芒更盛 */
        filter: drop-shadow(0 15px 30px rgba(255, 215, 0, 0.8)); 
    }
}

/* 3. 背景的呼吸圓盤光暈 (選配，讓視覺更神聖) */
.lotus-glow {
  position: absolute;
  width: 50vw; /* 光暈寬度隨螢幕變動 */
  max-width: 300px;
  height: 10vh;
  background: radial-gradient(ellipse at center, rgba(255,215,0,0.6) 0%, rgba(255,215,0,0) 70%);
  bottom: 5vh; 
  border-radius: 50%;
  z-index: 1;
  animation: glowPulse 4s ease-in-out infinite;
  opacity: 0.5;
}

@keyframes glowPulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

.el-image__placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.loading-slot-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.loading-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #8b4513; /* 深褐色 */
    font-weight: bold;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    /* 選配：加上一點點字體閃爍，更有靈氣 */
    animation: textPulse 1.5s ease-in-out infinite;
}

@keyframes textPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* --- 護法的設定 (立即出現) --- */
.fade-in-enter-active {
    transition: opacity 2s ease-out !important;
}
.fade-in-enter-from {
    opacity: 0 !important;
}

/* --- 媽祖的設定 (延遲出現) --- */
.mazu-fade-enter-active {
    /* 這裡的 1.5s 就是延遲時間：護法出現 1.5 秒後，媽祖才開始淡入 */
    transition: opacity 1s ease-in-out 1s !important;
}
.mazu-fade-enter-from {
    opacity: 0 !important;
}

/* --- 護法位置與大小優化 --- */
.guardian {
    position: absolute;
    z-index: 4;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.4));
    /* animation: mazuFloat 4s ease-in-out infinite reverse; */
    animation: none !important;
}

.guardian-left { 
   /* 手機版寬度直接開到 45%，大約是螢幕的一半 */
    width: 40%; 
    max-width: 250px;
    /* 向中間靠攏：利用負的百分比讓祂往中間擠 */
    left: 0%; 
    bottom: -15%;
    /* 如果你想讓祂擋在媽祖前面，改 z-index: 6 */
    z-index: 4;
}

.guardian-right { 
    /* 右側護法也同步放大 */
    width: 38%; 
    max-width: 250px;
    right: 2%; 
    bottom: -15%;
    z-index: 4;
}

.scrollable-action-area {
    position: relative;
    z-index: 10;
    height: auto;
    display: flex;
    flex-direction: column;
    padding-top: clamp(280px, 60vh, 600px);/* 關鍵：把內容推到媽祖下方開始 */
    -webkit-overflow-scrolling: touch;
}

/* 容器間距 */
.button-stack {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 2vh, 18px);
    margin:0;
    z-index: 10;
}

/* 基礎按鈕通用樣式 */
.holy-btn {
    width: 220px;
   height: clamp(40px, 6vh, 50px) !important;
    border-radius: 24px !important;
    font-weight: bold !important;
    font-size: 16px !important;
    transition: all 0.3s;
}

/* --- 1. 最強調：紅色喜慶長按鈕 (呼吸縮放) --- */
.btn-primary-shine {
    width: 280px; /* 加長按鈕 */
    background: linear-gradient(145deg, #e60000, #b30000) !important; /* 紅色漸層 */
    color: #fff !important;
    border: 2px solid #ffd700 !important; /* 點綴金邊 */
    box-shadow: 0 0 0 0 rgba(230, 0, 0, 0.6);
    animation: primaryPulse 2s infinite;
}

@keyframes primaryPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(230, 0, 0, 0.6);
    }
    70% {
        transform: scale(1.03);
        box-shadow: 0 0 0 15px rgba(230, 0, 0, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(230, 0, 0, 0);
    }
}

/* --- 2. 一般：粉紅/淡紅質感 --- */
.btn-secondary {
    width: 220px;
    background: #fffafa !important; /* 帶一點粉白 */
    color: #e60000 !important;
    border: 2px solid #e60000 !important;
    /* 靜止狀態 */
}

/* --- 3. 注意事項：灰色/暗紅 --- */
.btn-subtle-swing {
    width: 220px;
    background: #fdf2f2 !important; /* 極淡的紅色背景 */
    color: #996666 !important;
    border: 1px solid #dcbaba !important;
    font-size: 14px !important;
    animation: gentleSwing 4s ease-in-out infinite;
}

@keyframes gentleSwing {
    0%, 80%, 100% { transform: rotate(0deg); }
    85% { transform: rotate(2deg); }
    90% { transform: rotate(-2deg); }
    95% { transform: rotate(1deg); }
}

/* 點擊反饋 */
.holy-btn:active {
    transform: scale(0.95);
    filter: brightness(0.9);
}


.top-marquee-bar {
    position: absolute; /* 固定在最上方，不隨按鈕捲動 */
    top: 0;
    left: 0;
    width: 100%;
    height: 30px; /* 適中的高度 */
    background: linear-gradient(90deg, #b71c1c, #e60000, #b71c1c);
    color: #ffffff;
    z-index: 999; /* 確保在所有元素最上層 */
    display: flex;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    -webkit-perspective: 1000;
    perspective: 1000;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.marquee-inner {
    display: flex;
    white-space: nowrap;
    /* 核心修正 1：讓容器寬度由內容決定，不要被螢幕寬度限制 */
    width: max-content; 
    /* 核心修正 2：位移必須精確設定為 -50% (因為我們放了兩組) */
    animation: top-scroll 40s linear infinite;
    will-change: transform;
}


@keyframes top-scroll {
    0% {
        /* 使用 3d 位移，強制 GPU 渲染，消除鋸齒與斷點 */
        transform: translate3d(0, 0, 0);
    }
    100% {
        /* 精確位移到第一組內容的末尾 (即總寬度的一半) */
        transform: translate3d(-50%, 0, 0);
    }
}

.marquee-group {
    display: flex;
    flex-shrink: 0; /* 確保內容不會被壓縮 */
}

.m-text {
    font-family: 'openhuninn', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    display: inline-block;
    white-space: nowrap;
    font-weight: 900;
    letter-spacing: 5px;
    /* 關鍵 3：增加間距！如果電腦版會斷，把這個值調大（例如 300px）
        這會強制拉長「兩組內容」的總總長度，直到超過螢幕寬度 */
    padding-right: 80px;
    white-space: nowrap;
    font-size: clamp(14px, 1.2vw, 18px);
    display: inline-block;
    color: #ffffff;
}

.color-gold {
    color: #ffd700 !important;
}


/* 專門拯救高度極小的視窗 (高度 < 550px) */
@media screen and (max-height: 550px) {
    /* 1. 縮小跑馬燈，騰出頂部空間 */
    .top-marquee-bar {
        height: 28px;
    }
    
    /* 2. 媽祖大變身：縮小尺寸並往左/右偏移，或大幅縮小置中 */
    .mazu-container {
        height: 120px !important; /* 強制縮得很小 */
        top: 80px !important;
    }
    

    .guardian {
        width: 35vh !important; /* 護法也要同步縮小 */
        bottom: -80px !important;
    }

    /* 4. 按鈕群組瘦身 */
    .button-stack {
        gap: 8px !important; /* 縮窄按鈕之間的縫隙 */
    }

    .holy-btn {
        height: 36px !important; /* 按鈕變扁一點 */
        width: 200px !important; /* 按鈕變窄一點 */
        font-size: 14px !important;
    }
    
    .btn-primary-shine {
        width: 240px !important;
    }

    /* 5. 隱藏不必要的裝飾內容以節省空間 */
    .lotus-glow {
        display: none;
    }
}



.mazu-full-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    
    /* 💡 核心修改 1：移除背景圖，僅使用單色 */
    background: radial-gradient(circle at center, #f8e8d5 0%, #fdeed9 50%, #f2d5ae 100%);
    background-size: 150% 150%; /* 稍微放大背景以便位移 */
    
    /* 套用呼吸感動畫 */
    animation: mazu-glow-flow 6s ease-in-out infinite;

    /* 💡 核心修改 2：由上至下的單向遮罩 */
    /* 從頂部 0% 到 85% 都是完全不透明的純色 */
    /* 從 85% 到 100% 快速淡出，讓最下方一點點透出底層內容 */
    /* -webkit-mask-image: linear-gradient(
        to bottom, 
        black 0%, 
        black 88%, 
        transparent 100%
    ); */
    /* mask-image: linear-gradient(
        to bottom, 
        black 0%, 
        black 88%, 
        transparent 100%
    ); */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    touch-action: none;
    pointer-events: auto;
}

@keyframes mazu-glow-flow {
    0%, 100% {
        background-position: center center;
        background-size: 100% 100%;
    }
    50% {
        background-position: center center;
        background-size: 130% 130%; /* 讓周圍顏色向內壓縮再推開 */
    }
}

.mazu-loading-gif {
    width: 40vw;
    max-width: 160px;
    min-width: 50px;
    height: auto;
    margin-bottom: 20px;
    animation: mazu-float 2.5s ease-in-out infinite;
}

.mazu-loading-text-container {
    width: max-content; /* 關鍵：鎖定文字寬度 */
    margin: 0 auto;
}

.mazu-loading-typing {
    font-family: 'openhuninn', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    color: #b22222;
    font-size: clamp(1.4rem, 5vw, 0.8rem);
    font-weight: bold;
    letter-spacing: 2px;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid #ff4500;
    width: 0;
    /* 使用 100% 寬度動畫，解決游標過長問題 */
    animation: 
        mazu-typing-final 4.5s steps(8) infinite, 
        mazu-cursor-blink 0.7s step-end infinite;
}

@keyframes mazu-typing-final {
    0% { width: 0; opacity: 0; }
    5% { width: 0; opacity: 1; }
    55%, 85% { width: 100%; opacity: 1; } /* 100% 剛好對齊 max-content */
    95%, 100% { width: 100%; opacity: 0; }
}

@keyframes mazu-cursor-blink {
    from, to { border-color: transparent; }
    50% { border-color: #ff4500; }
}

@keyframes mazu-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* Vue Fade 動畫 */
.fade-loading-enter-active, .fade-loading-leave-active { transition: opacity 0.5s;pointer-events: none; }
.fade-loading-enter-from, .fade-loading-leave-to { opacity: 0; }


/* --- 祈福選項按鈕容器 --- */
.blessing-grid-light {
    flex: 1; 
    width: 94%;
    max-width: 400px;
    margin: 0 auto;
    
    /* 改用 Grid 佈局：每列兩個，間距 12px */
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px;
    
    align-content: end;  /* 改為 end，按鈕會貼在 66vh 區域的底部 */
    /* 修正：減少內邊距，避免小手機把按鈕擠扁 */
    padding: 10px 15px 10px 15px;
    box-sizing: border-box;
    min-height: 0;
}

/* 點擊效果優化 */
.bless-btn-mini:active {
    transform: scale(0.96);
    background: rgba(212, 175, 55, 0.2) !important;
    border-color: #ffd700 !important;
}

/* 如果你的按鈕很多（超過 6 個），建議調整為 3 列 */
@media screen and (max-width: 350px) {
    .blessing-grid-light {
        gap: 8px;
        padding: 10px;
    }
    .bless-btn-mini {
        height: 45px !important;
        font-size: 13px !important;
    }
}

.camera-module, 
.result-view, .camera-modul {
    flex: 1; /* 自動佔據 66vh 中除去 padding 後的所有空間 */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 讓圖片在剩餘空間內上下居中 */
    align-items: center;
    padding: 10px 0;
    min-height: 0;
}

.bless-btn-mini {
    width: 100% !important;
    /* 修正：固定高度 44px，視覺最平衡 */
    height: 48px !important; 
    margin: 0 !important;
    
   font-size: 16px !important; /* 修正：字體加大一點，視覺更飽滿 */
    font-weight: 800 !important; /* 加粗 */
    letter-spacing: 2px;
    
    /* ... 保持原本的背景、邊框、動畫 ... */
    background: rgba(255, 255, 245, 0.8) !important;
    border-radius: 15px !important; /* 圓角隨高度增加一點 */
    
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(139, 69, 19, 0.15); /* 陰影深一點點 */
    
    animation: intense-glow 2.5s infinite ease-in-out;
    transition: all 0.3s ease;
}

.bless-btn-mini:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #ffd700 !important;
    transform: scale(1.03);
}

@media screen and (max-width: 350px) {
    .blessing-grid-light {
        gap: 6px; /* 更緊湊的排列 */
        padding: 5px;
        max-width: 290px;
    }
    .bless-btn-mini {
        height: 40px !important;
        font-size: 13px !important;
        letter-spacing: 0px; /* 窄螢幕不留字距 */
    }
}

/* 輕柔的呼吸效果 */
@keyframes intense-glow {
    0%, 100% {
        /* 基礎光暈 */
        box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        /* 擴張光暈：加入多層陰影讓光看起來有厚度 */
        box-shadow: 0 0 15px rgba(212, 175, 55, 0.6), 
                    0 0 30px rgba(255, 215, 0, 0.3);
        /* 微微放大（呼吸感的核心） */
        transform: scale(1.03); 
        /* 稍微提高亮度，讓它像真的在發光 */
        filter: brightness(1.1);
        border-color: rgba(255, 215, 0, 1) !important;
    }
}

.action-bar {
   display: flex;
    justify-content: center;
    margin-top: 5px;   /* 給予極小的正邊距，確保不重疊 */
    margin-bottom: 15px;
}

.btn-cancel {
    color: #8b4513 !important; /* 褐色 */
    font-size: 13px !important;
    opacity: 0.6; /* 平常淡一點 */
    transition: all 0.3s;
    text-decoration: underline; /* 加個下劃線更有「取消」感 */
}

.btn-cancel:hover {
    opacity: 1;
    background: transparent !important;
    color: #d32f2f !important; /* 碰到的時候變紅色提示 */
}


.camera-module {
    display: flex;
    flex-direction: column;
    align-items: center; /* 確保相機、文字、按鈕全部水平居中 */
    width: 100%;
}

.video-rectangle-wrapper {
    width: 85vw; /* 隨手機寬度調整 */
    max-width: 450px; /* 電腦版最大上限 */
    aspect-ratio: 4 / 3; /* 拍照建議用 4:3 比較符合平安卡比例 */
    border-radius: 8px;
    border: 2px solid #ffd700;
    overflow: hidden;
    background: #000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.camera-video-rect {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1); /* 鏡像 */
}

/* =========================================
   2. 💥 長方形拍照按鈕 (省空間設計)
   ========================================= */
.mazu-shutter-rect-btn {
    width: 200px; /* 寬度較長 */
    height: 50px;  /* 高度縮減，不佔空間 */
    background: rgba(255, 255, 250, 0.9);
    border: 1.5px solid #ffd700;
    border-radius: 25px; /* 膠囊形狀，比純長方形更有設計感 */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3);
    
    /* 呼吸動畫 */
    animation: rect-glow 2.5s infinite ease-in-out;
    transition: all 0.2s;
}

.btn-content {
    display: flex;
    align-items: center;
    text-align: center;
    gap: 10px; /* 圖片與文字的間距 */
}

.mazu-icon-small {
    width: 32px; /* 圖片縮小 */
    height: 32px;
}

.shutter-text-large {
    font-size: 16px;
    color: #8b4513; /* 深褐色 */
    font-weight: bold;
    letter-spacing: 2px;
}

/* 點擊回饋 */
.mazu-shutter-rect-btn:active {
    transform: scale(0.95);
    background: #fffbe6;
}

/* 💥 針對長方形按鈕優化的發光動畫 */
@keyframes rect-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(212, 175, 55, 0.2);
        border-color: #ffd700;
    }
    50% {
        box-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
        border-color: #ffffff;
        transform: translateY(-2px); /* 微微向上漂浮感 */
    }
}

/* 提示文字 */
.camera-hint {
    margin: 10px 0;
    color: #8b4513;
    font-size: 13px;
    font-weight: bold;
}


.camera-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 20;
    animation: flash-anim 0.15s ease-out;
}

@keyframes flash-anim {
    from { opacity: 1; }
    to { opacity: 0; }
}


.global-model-status {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 999;
    pointer-events: none; /* 不影響點擊下方按鈕 */
}

.status-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.85);
    border: 1.5px solid #ffd700;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(139, 69, 19, 0.2);
    backdrop-filter: blur(5px);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: background 0.3s;
    margin-right: 10px;
}

.status-text {
    font-size: 12px;
    font-weight: bold;
    color: #8b4513; /* 深褐色 */
}

/* 狀態顏色切換 */
.status-loading .status-dot { background: #ff9800; animation: pulse 1s infinite; }
.status-ready .status-dot { background: #4caf50; box-shadow: 0 0 5px #4caf50; }
.status-processing .status-dot { background: #2196f3; animation: pulse 0.5s infinite; }
.status-error .status-dot { background: #f44336; }

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}


.model-status-tag {
    position: fixed;
    top: 60px; /* 剛好在跑馬燈下方 */
    left: 16px;
    z-index: 2000; /* 確保在一般內容之上，但在全螢幕 Loading 之下 */
    display: flex;
    align-items: center;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.85); /* 半透明更有質感 */
    backdrop-filter: blur(4px); /* 背景模糊，增加層次感 */
    border: 1px solid rgba(139, 69, 19, 0.2); /* 淡淡的咖啡色邊框 */
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    font-size: 12px;
    font-weight: 600;
}

/* 讓閃爍動畫更明顯一點 */
@keyframes mazu-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}


.mazu-final-card {
    /* 核心：寬度由內容決定，但不能超過螢幕寬度的 90% */
    width: auto;
    max-width: 90vw;
    
    /* 核心：高度絕對不能超過 content-body 的限制 (扣掉按鈕空間) */
    max-height: 100%;
    min-height: 250px;
    
    /* 讓容器變成緊貼圖片的方框 */
    display: block; 
    margin: 0 auto;
    
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    border: 2px solid #f0e6d2; /* 增加一個細邊框更有質感 */
    flex-shrink: 1;
}

.mazu-final-card :deep(img) {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important; /* 跟隨父層高度上限 */
    object-fit: contain;
}

.button-group {
    flex-shrink: 0;   /* 關鍵：禁止按鈕被壓縮 */
    margin-top: 15px;
    margin-bottom: 5px;
    display: flex;
    gap: 12px;
    width: auto;      /* 寬度隨按鈕內容 */
}


.content-body {
    height: 88vh !important; /* 維持你的比例限制 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 15px;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 30px;
}

/* 標籤主體：定位與形狀 (針對三個字優化) */
.mazu-steps .el-step__main {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 28px !important; /* 調整與圓圈的距離 */
    
    /* 質感小牌子設計 */
    width: 68px !important; 
    padding: 5px 0 !important;
    background: #ffffff !important;
    border: 1.5px solid #d4af37 !important; /* 金色邊框 */
    border-radius: 6px !important; /* 稍微方正，更有符卡感 */
    
    /* 內部佈局 */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    white-space: nowrap !important;
    z-index: 10 !important;
    box-shadow: 0 4px 10px rgba(139, 69, 19, 0.12) !important;
}

/* 狀態顏色切換 */
/* 1. 容器：高度隨螢幕寬度微調，並確保不破圖 */
.mazu-steps.el-steps {
    height: auto !important;
    min-height: 50px !important;
    padding: 2vh 2vw !important; /* 使用視窗高度與寬度單位 */
    overflow: visible !important;
}

/* 2. 佈局：自動均分空間 */
.mazu-steps .el-step {
    flex-basis: 33.33% !important; /* 確保三等分 */
}

.mazu-steps .el-step__main {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; 
    padding: 0 !important;
    overflow: visible !important;
}

/* 3. 標籤：使用百分比 padding 與自適應字體 */
.mazu-steps .el-step__title {
    font-weight: normal !important;
    /* 使用 clamp 確保字體在小手機不縮得太誇張，在大手機不過大 */
    font-size: clamp(12px, 3.5vw, 15px) !important; 
    
    line-height: 1.5 !important;
    margin: 1vh !important;
    
    display: inline-block !important;
    /* 左右使用 vw，會隨手機寬度自動縮放標籤寬度 */
    padding: 0.5vh 3vw !important; 
    
    border-radius: 4px !important;
    text-align: center !important;
    white-space: nowrap !important; /* 絕對禁止三個字斷行 */
}

/* 4. 簡單背景色配置 */

/* 進行中：深紅底白字 */
.mazu-steps .el-step.is-process .el-step__title {
    background-color: #b22222 !important; 
    color: #ffffff !important;
}

/* 已完成：淡色底褐字 */
.mazu-steps .el-step.is-success .el-step__title {
    background-color: #f5f5f5 !important;
    color: #8b4513 !important;
}

/* 5. 圓圈圖標與線條：也改為相對大小 */
.mazu-steps .el-step__icon {
    /* 圓圈大小隨螢幕寬度變化 */
    width: clamp(18px, 5vw, 24px) !important;
    height: clamp(18px, 5vw, 24px) !important;
}

.mazu-steps .el-step__line {
    /* 自動偵測圓圈中心點 */
    top: clamp(9px, 2.5vw, 12px) !important;
}

.mazu-dialog {
    border-radius: 15px !important;
    border: 3px solid #d4af37; /* 金色邊框 */
    background-color: #fff9f2 !important; /* 淺米色背景 */
}

.mazu-dialog .el-dialog__header {
    background-color: #8b4513; /* 深木頭色 */
    margin-right: 0;
    padding: 15px;
    border-radius: 10px 10px 0 0;
}

.mazu-dialog .el-dialog__title {
    color: #ffd700 !important; /* 金色標題 */
    font-weight: bold;
    letter-spacing: 2px;
}

.notice-content {
    color: #5d4037;
    line-height: 1.6;
    font-size: 15px;
}

.notice-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.notice-icon {
    font-size: 24px;
    color: #c0392b;
    margin-right: 12px;
    margin-top: 3px;
}

.notice-divider {
    border: 0;
    border-top: 1px dashed #d2b48c;
    margin: 15px 0;
}

/* 按鈕風格 */
.holy-btn-small {
    background: linear-gradient(135deg, #e67e22, #c0392b) !important;
    color: white !important;
    border: none !important;
    padding: 10px 30px !important;
    font-weight: bold !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}


/* 1. 限制 Dialog 寬度，避免在電腦版拉長 */
.mazu-dialog-walk {
    width: 90% !important;
    max-width: 420px !important; 
    border-radius: 16px !important;
}

/* 2. 核心修復：取消 Flex 排列，改用 Block (區塊) 模式 */
/* 這是解決你截圖中重疊問題的最快方法 */
.dialog-content {
    display: block !important; /* 強制回歸標準由上往下排 */
    text-align: left;
    width: 100%;
}

.notice-section {
    display: block !important;
    width: 100% !important;
    margin-bottom: 20px;
    padding: 0;
}

/* 3. 確保標題自己佔一行 */
.section-title {
    display: block !important;
    font-size: 16px;
    color: #333;
    margin: 15px 0 10px 0;
    font-weight: bold;
}

/* 4. 只有這一層保持 Flex，處理序號跟文字的對齊 */
.notice-item {
    display: flex !important;
    align-items: flex-start;
    margin-bottom: 15px;
    width: 100%;
}

.notice-item .num {
    flex-shrink: 0; /* 禁止序號圓圈被擠扁 */
    background: #f0f0f0;
    color: #666;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 12px;
    font-size: 13px;
    font-weight: bold;
}

.notice-item p {
    margin: 0;
    flex: 1; /* 讓文字自動佔滿剩下的空間 */
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    word-break: break-all;
}

/* 5. 滾動條樣式與高度限制 */
.dialog-scroll-container {
    max-height: 60vh;
    overflow-y: auto;
    padding: 0 10px 10px 0;
}

/* 6. 系統提醒區塊修復 */
.system-status-alert {
    display: block !important;
    background-color: #fff9f0;
    border: 1px solid #ffe4b5;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 15px;
    width: auto;
}


.el-message-box {
    border-radius: 20px !important;
    padding-bottom: 15px !important;
    width: 85% !important;
    max-width: 320px !important; /* 手機端適中寬度 */
    border: none !important;
}

/* 標題樣式 */
.el-message-box__title {
    font-weight: bold;
    color: #8b4513 !important; /* 深木色 */
    justify-content: center;
    display: flex;
    font-size: 28px !important;
}

.el-message-box__message {
    font-size: 18px !important;    /* ✨ 設定內文字體大小 */
    line-height: 1.6 !important;   /* 增加行高，字才不會擠在一起 */
    color: #5d2e0a !important;     /* 深褐色，跟你的按鈕配色一致 */
    font-weight: 500 !important;
    text-align: center !important; /* 文字置中 */
}

/* 內容文字樣式 */
.el-message-box__container {
    padding: 10px 0;
}

/* 按鈕容器佈局 */
.el-message-box__btns {
    padding: 10px 20px 15px !important;
    display: flex;
    justify-content: space-around; /* 讓兩個按鈕平分空間 */
    gap: 10px;
    font-size: 20px !important;
}

/* 「確定」按鈕 (Primary) */
.el-message-box__btns .el-button--primary {
    background: linear-gradient(135deg, #d2691e, #8b4513) !important;
    border: none !important;
    padding: 10px 25px !important;
    font-weight: bold;
    flex: 1; /* 按鈕等寬 */
    font-size: 20px !important;
}

/* 「繼續/取消」按鈕 (Default) */
.el-message-box__btns .el-button {
    border-radius: 20px !important;
}

.el-message-box__btns .el-button:not(.el-button--primary) {
    border: 1px solid #dcdfe6 !important;
    color: #999 !important;
    flex: 1; /* 按鈕等寬 */
    font-size: 20px !important;
}

/* 圖示顏色調整 (Warning) */
.el-message-box__status.el-icon-warning {
    color: #d2691e !important;
}


.button-group {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.result-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 10px 0;
}

/* 圖片樣式調整 */
.mazu-final-card {
    width: 100%;
    max-width: 340px; /* 手機端適合的寬度 */
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    margin-bottom: 20px;
}

/* 按鈕群組排版 */
.button-group {
    display: flex;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 15px;
}

/* 讓按鈕在小手機不會縮得太醜 */
.button-group .el-button {
    flex: 1;
    max-width: 160px;
    padding: 12px 0;
    font-weight: bold;
}

/* LINE 分享按鈕專屬色 */
.line-share-btn {
    background-color: #06c755 !important;
    border-color: #06c755 !important;
    color: #ffffff !important;
}

/* 關鍵：引導文字的樣式優化 */
.save-hint {
    background: #fff9f0;
    border: 1px dashed #d2691e;
    color: #8b4513;
    padding: 8px ㄓpx;
    border-radius: 50px;
    font-size: 13px;
    margin-top: 5px;
    animation: bounceTip 3s infinite; /* 增加一個輕微跳動動畫 */
}

@keyframes bounceTip {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.mazu-content-adaptive {
    /* 改用 min-height 而不是固定 height */
    min-height: 60vh !important; 
    height: auto !important; 
    display: flex;
    flex-direction: column;
    justify-content: center; /* 讓內容在中間，不縮在底部 */
    align-items: center;
    padding: 10px 15px !important;
    margin-top: 40px !important; /* 留位置給跑馬燈 */
    overflow: visible !important;
    text-align: center;
}


.mazu-content-adaptive2 {
    /* 改用 min-height 而不是固定 height */
    min-height: 55vh !important; 
    height: auto !important; 
    display: flex;
    flex-direction: column;
    justify-content: center; /* 讓內容在中間，不縮在底部 */
    align-items: center;
    padding: 10px 15px !important;
    margin-top: 40px !important; /* 留位置給跑馬燈 */
    overflow: visible !important;
    text-align: center;
}


/* AI 資訊容器樣式 */
.mazu-ai-info-container {
    text-align: center;
    margin-top: 10px; /* 與「媽祖祈福中」保持距離 */
    z-index: 2;
}

.mazu-loading-timer-val {
    font-family: monospace;
    color: #3b2af8;
    font-size: 1.4rem;
    text-align: center;
}

.mazu-loading-blessing-text {
    font-size: 1.1rem;
    color: #ff0202;
    letter-spacing: 1px;
    text-align: center;
}


/* 擲筊 */
/* --- 1. 進場動畫：後方杯子 (-45度) --- */
@keyframes enter-drop-back {
    0% {
        transform: translateY(-600px) rotate(0deg);
        opacity: 0;
    }
    100% {
        transform: translateY(0) rotate(-405deg);
        opacity: 1;
    }
}

/* --- 2. 進場動畫：前方杯子 (120度) --- */
@keyframes enter-drop-front {
    0% {
        /* 起點：上方 600px，角度 90度 */
        transform: translateY(-600px) rotate(0deg);
        opacity: 0;
    }
    100% {
        /* 終點：落地，角度 90度 */
        transform: translateY(0) rotate(500deg);
        opacity: 1;
    }
}

/* --- 3. 漂浮動畫：各自維持角度微動 --- */
@keyframes float-back {
    0%, 100% { transform: translateY(0) rotate(-45deg); }
    50% { transform: translateY(-20px) rotate(-45deg); } /* 向上飄並微轉 3度 */
}

@keyframes float-front {
    0%, 100% { transform: translateY(0) rotate(140deg); }
    50% { transform: translateY(-20px) rotate(140deg); } /* 向上飄並微轉 3度 */
}

/* --- 基礎樣式：最一開始全部消失 --- */
.jb-img {
    width: 110px;
    position: absolute;
    left: 50%;
    margin-left: -55px;
    opacity: 0; /* 💡 預設是隱藏的 */
    pointer-events: none; /* 避免圖片擋住點擊事件 */

    /* ✅ 加入以下屬性禁止反藍 */
    -webkit-user-select: none;  /* Safari / Chrome */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* 標準語法 */
    
    /* 選配：禁止滑鼠右鍵選單(另存圖片)和拖曳 */
    -webkit-touch-callout: none; /* iOS Safari 禁止長按選單 */
    -webkit-user-drag: none;    /* Safari / Chrome 禁止拖曳圖片 */
}

/* --- 階段 A：進場中 (is-entering) --- */
.is-entering .jb-left {
    z-index: 5;
    margin-left: -50px;
    margin-top: 10px;
    /* 掉落動畫，結束後停留在 100% 的狀態 (opacity: 1) */
    animation: enter-drop-back 1.2s ease-out forwards;
}
.is-entering .jb-right {
    z-index: 10;
    margin-left: -80px;
    margin-top: -10px;
    animation: enter-drop-front 1.2s ease-out 1.2s forwards;
}

/* --- 階段 B：持續漂浮 (is-floating) --- */
/* 💡 當進場結束後，換這個 class 接手，杯子就不會消失 */
.is-floating .jb-img {
    opacity: 1; /* 保持顯示 */
}

.is-floating .jb-left {
    z-index: 5;
    margin-left: -50px;
    margin-top: 10px;
    animation: float-back 3s ease-in-out infinite;
}

.is-floating .jb-right {
    z-index: 10;
    margin-left: -80px;
    margin-top: -10px;
    animation: float-front 3s ease-in-out infinite;
}

/* 閃爍動畫 */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}


/* 第二段 */
/* 筊杯圖片基礎樣式 */
/* --- 核心修改：擲筊動作中 --- */
/* 當父層有 .is-tossing 時，強制取消原本的進場與漂浮動畫 */
/* 左杯飛出邏輯 */
.is-tossing .jb-left {
    opacity: 1 !important;
    animation: toss-away-left 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

/* 右杯飛出邏輯 */
.is-tossing .jb-right {
    opacity: 1 !important;
    animation: toss-away-right 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

/* 左杯飛出：維持 -45度 */
@keyframes toss-away-left {
    0% {
        transform: translateY(0) rotate(-45deg); 
        opacity: 1;
    }
    100% {
        transform: translateY(-800px) rotate(-45deg); 
        opacity: 0;
    }
}

/* 右杯飛出：維持 140度 */
@keyframes toss-away-right {
    0% {
        transform: translateY(0) rotate(140deg); 
        opacity: 1;
    }
    100% {
        transform: translateY(-800px) rotate(140deg); 
        opacity: 0;
    }
}

/* --- 階段 D: 結果顯現 (旋轉 3 圈落地) --- */
.is-result-shown .jb-img {
    opacity: 0;
    /* 3.0s 讓旋轉三圈的過程看起來很優雅、緩慢 */
    animation-duration: 3s !important;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
    animation-fill-mode: forwards !important;
}

/* 左杯：旋轉落地並向左分開 */
.is-result-shown .jb-left {
    animation-name: result-rotate-drop-left !important;
}

/* 左杯：旋轉落地並向左分開 */
.is-result-shown .jb-left2 {
    animation-name: result-rotate-drop-left2 !important;
}

/* 右杯：旋轉落地並向右分開 */
.is-result-shown .jb-right {
    animation-name: result-rotate-drop-right !important;
}

/* 右杯：旋轉落地並向右分開 */
.is-result-shown .jb-right2 {
    animation-name: result-rotate-drop-right2 !important;
}

/* 左杯：從 -500px 高處旋轉 1080 度落下 */
@keyframes result-rotate-drop-left {
    0% {
        /* 起點：高處，旋轉角度從原本的基礎 -45deg 再減 1080deg */
        transform: translateY(-600px) translateX(0) rotate(-1125deg);
        opacity: 0;
    }
    100% {
        /* 終點：落地，向左偏移 70px，回到基礎角度 -45deg */
        transform: translateY(0) translateX(-70px) rotate(-45deg);
        opacity: 1;
    }
}


@keyframes result-rotate-drop-left2 {
    0% {
        /* 起點：高處，旋轉角度從原本的基礎 -45deg 再減 1080deg */
        transform: translateY(-600px) translateX(0) rotate(-1125deg);
        opacity: 0;
    }
    100% {
        /* 終點：落地，向左偏移 70px，回到基礎角度 -45deg */
        transform: translateY(0) translateX(-70px) rotate(135deg);
        opacity: 1;
    }
}

/* 右杯：從 -500px 高處旋轉 1080 度落下 */
@keyframes result-rotate-drop-right {
    0% {
        /* 起點：高處，旋轉角度從原本的基礎 140deg 再加 1080deg */
        transform: translateY(-600px) translateX(0) rotate(1220deg);
        opacity: 0;
    }
    100% {
        /* 終點：落地，向右偏移 70px，回到基礎角度 140deg */
        transform: translateY(0) translateX(70px) rotate(333deg);
        opacity: 1;
    }
}

/* 右杯：從 -500px 高處旋轉 1080 度落下 */
@keyframes result-rotate-drop-right2 {
    0% {
        /* 起點：高處，旋轉角度從原本的基礎 140deg 再加 1080deg */
        transform: translateY(-600px) translateX(0) rotate(1220deg);
        opacity: 0;
    }
    100% {
        /* 終點：落地，向右偏移 70px，回到基礎角度 140deg */
        transform: translateY(0) translateX(70px) rotate(160deg);
        opacity: 1;
    }
}

/* 排行榜彈窗外框：改為圓潤且帶有木質感 */
.mazu-rank-dialog {
    border-radius: 18px !important;
    border: 2px solid #8b4513;
    background-color: #fcf5ed !important; /* 淺米色背景，對應你的網頁底色 */
}

/* 標題列：木質棕背景搭配金字 */
.mazu-rank-dialog .el-dialog__header {
    background-color: #8b4513;
    margin-right: 0 !important;
    padding: 15px 20px;
    border-radius: 14px 14px 0 0;
}

.mazu-rank-dialog .el-dialog__title {
    color: #ffd700 !important; /* 金色標題 */
    font-size: 1.1rem;
    font-weight: bold;
}

/* 關閉按鈕顏色 */
.mazu-rank-dialog .el-dialog__headerbtn .el-dialog__close {
    color: #ffd700 !important;
}

/* 巨大數字：使用你原本的金色與深紅配色 */
.giant-number-display {
    font-size: 4.5rem;
    font-weight: 800;
    color: #d32f2f; /* 喜慶紅 */
    font-family: "Microsoft JhengHei", sans-serif;
    text-shadow: 2px 2px 0px #fff, 4px 4px 0px rgba(139, 69, 19, 0.2);
    display: block;
    margin: 10px 0;
}

/* 裝飾線 */
.rank-divider {
    border-top: 1px solid #e0c8a0;
    margin: 20px 0;
}

/* 底部文字顏色 */
.rank-info-text {
    color: #8b4513;
    font-size: 13px;
}


/* 讓 Footer 的背景也變成米色，避免出現白塊 */
.mazu-rank-dialog .el-dialog__footer {
    background-color: #fcf5ed !important;
    border-radius: 0 0 18px 18px; /* 配合 Dialog 的圓角 */
    padding-top: 0; /* 縮小與內容的間距 */
}

/* 按鈕點擊效果 */
.mazu-rank-dialog .el-button:hover,
.mazu-rank-dialog .el-button:focus {
    background-color: #a0522d !important;
    border-color: #a0522d !important;
    color: #fff !important;
}


.mazu-rank-dialog .giant-number-display {
    /* 原有的樣式 */
    color: #e63946;
    font-weight: 900;
    text-shadow: 2px 2px 0px #fff;
}


.mazu-confirm-box {
  /* 調整彈窗寬度，避免在手機上太窄 */
  width: 85% !important; 
  max-width: 500px !important;
  border-radius: 15px !important;
}

/* 標題字體大小 */
.mazu-confirm-box .el-message-box__title {
  font-size: 28px !important; 
  line-height: 1.5;
  color: #8b4513;
  font-weight: bold;
}

/* 中間內容文字大小 */
.mazu-confirm-box .el-message-box__message {
  font-size: 22px !important; 
  line-height: 1.6;
  color: #5d2e0a;
  padding: 15px 0;
}

/* 按鈕文字大小與高度 */
.mazu-confirm-box .el-button {
  font-size: 18px !important;
  padding: 12px 25px !important;
  height: auto !important;
}

/* 如果有圖示（如 warning），也可以放大 */
.mazu-confirm-box .el-message-box__status {
  font-size: 35px !important;
}