/* ==========================================
   字型引入
   ========================================== */
@font-face {
    font-family: 'openhuninn';
    src: url('https://donation-goal.hikarunogo.com.tw/fonts/jf-openhuninn-1.1.ttf') format('truetype');
}

/* ==========================================
   CSS 變數 + 全域繼承根（JS 會動態複寫數值）
   font-family / font-weight / text-shadow 設在 :root，
   所有子元素自動繼承，不需要逐一重複宣告。
   ========================================== */
:root {
    /* 字型 */
    --ui-font: "Helvetica-Bold", "Helvetica", "Microsoft JhengHei", 'openhuninn', sans-serif;

    /* Alert 顯示變數 */
    --content_font_size: 30;
    --content_font_color: rgba(255, 255, 0, 1);
    --fix_font_size: 72;
    --fix_font_color: rgba(212, 142, 38, 1);
    --text_font_size: 72;
    --text_animate_time: 1.25s;
    --text_animate_delay: 0.5s;
    --text_shadow_color: #000000;
    --text_animation_name: no-animation;

    /* 色彩 */
    --color-gold:    #d48e26;
    --color-yellow:  #d0d426;
    --color-teal:    #32C3A6;
    --color-red:     #FF0000;

    /* 字級 */
    --fs-main:       56px;
    --fs-highlight:  72px;
    --fs-user:       48px;
    --fs-opay-title: 36px;

    /* 全域繼承：子元素自動繼承，無需重複 */
    font-family: var(--ui-font);
    font-weight: 900;
    text-shadow:
         2px  2px 0 var(--text_shadow_color),
        -2px -2px 0 var(--text_shadow_color),
         2px -2px 0 var(--text_shadow_color),
        -2px  2px 0 var(--text_shadow_color),
         2px  0px 0 var(--text_shadow_color),
        -2px  0px 0 var(--text_shadow_color),
         0px  2px 0 var(--text_shadow_color),
         0px -2px 0 var(--text_shadow_color);
}

/* ==========================================
   全域基礎：覆蓋整個 Overlay 畫布
   ========================================== */
body, html {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background: transparent !important;
    position: relative !important;
}
body { background-color: transparent; }

/* ==========================================
   ① MP4 Alpha 層：gift111/222/333（z-index: 10）
   ========================================== */
#viewport, .video-slot, #viewport video {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-sizing: border-box;
    display: block;
}

#viewport {
    display: flex !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    z-index: 10 !important;
    pointer-events: none;
}

.video-slot {
    flex: 1 1 33.333% !important;
    width: 33.333% !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Canvas 渲染層 */
canvas {
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}
canvas.active { opacity: 1 !important; }

/* ==========================================
   共用：三宮格 video 與 Qincai video 的定位基礎
   （position / bottom / left / transform / width / height / pointer-events）
   ========================================== */
#viewport video,
#video-qincai_gift {
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    height: auto !important;
    pointer-events: none;
}

/* 三宮格：Canvas 數據源，強制隱藏 */
#viewport video {
    object-fit: cover !important;
    object-position: bottom !important;
    display: none !important;
}

/* ② Qincai 全螢幕 MP4 特效層（z-index: 8）
   設計說明：不走 Canvas pipeline，直接 video 播放，省略 rAF 循環。
   display 無 !important，JS 的 style.display 可正常覆蓋。        */
#video-qincai_gift {
    display: none;
}

#qincai_mp4_container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 8 !important;
    pointer-events: none;
    background: transparent !important;
}

#canvas-qincai_gift {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    display: block;
    background: transparent !important;
}
#canvas-qincai_gift.active { opacity: 1 !important; }

/* ==========================================
   ③ Alert 層：通用定位（z-index: 5，靠右側）
   font-family / font-weight 繼承自 :root，不重複宣告
   ========================================== */
#divHikaruAlert,
#divAlert,
#divSEAlert,
#divqincaialert {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 800px !important;
    height: 100% !important;
    z-index: 5 !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 10px;
}

/* ==========================================
   ④ Alert 內層：wrap / img / text 共用結構
   ========================================== */
#hikaruWrap,
#wrap,
#SEwrap,
#qincaiwrap {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#hikaru_text_container,
#text_container,
#SEtext_container,
#qincai_text_container {
    width: 90%;
    max-width: 900px;
    text-align: center;
}

/* Alert 圖片：所有平台共用尺寸 */
#hikaruAlertImg,
#divAlertImg,
#SEdivAlertImg,
#qincaiAlertImg {
    width: 300px;
    height: 300px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* ==========================================
   ⑤ Alert 主標題文字（金額 / 事件描述）
   font-family / font-weight / text-shadow 繼承自 :root
   ========================================== */
#hikarudivAlertMsg,
#SEdivAlertMsg,
#qincaidivAlertMsg {
    font-size: var(--fs-main);
    color: var(--color-gold);
    text-align: center;
    line-height: 1.4;
}

/* OPay 標題字級略小 */
#divAlertMsg {
    font-size: var(--fs-opay-title);
    color: var(--color-gold);
    margin-top: 0;
}

/* ==========================================
   ⑥ Alert 高亮數字 / 名稱（大字）
   text-shadow 繼承自 :root
   ========================================== */
.hikaruHighlight,
.seHighlight,
.qincaiHighlight,
.highlight {
    font-size: var(--fs-highlight);
}

.hikaruHighlight,
.seHighlight,
.qincaiHighlight { color: var(--color-teal); }

.highlight { color: var(--color-red); margin: 0 5px; }

/* ==========================================
   ⑦ Alert 留言文字（下方次要文字）
   font-family / font-weight / text-shadow 繼承自 :root
   ========================================== */
#hikarudivUserMsg,
#divUserMsg,
#SEdivUserMsg,
#qincaidivUserMsg {
    font-size: var(--fs-user);
    color: var(--color-yellow);
    text-align: center;
    word-break: break-all;
    margin-top: 0;
}