/* ==========================================
   1. 基礎設定與畫布 (Base & Canvas)
   ========================================= */
html, body { 
    margin: 0; 
    padding: 0;
    width: 100%; 
    height: 100dvh; /* 🌟 確保精準避開手機網址列與導航列 */ 
    overflow: hidden !important; 
    position: fixed; 
    top: 0; 
    left: 0; 
    touch-action: none; 
    background-color: #050514; 
    font-family:'Georgia', 'Palatino Linotype', 'Times New Roman', serif; 
    /* 整個網頁預設不准選取 (保護 UI 跟按鈕) */
    -webkit-user-select: none;
    user-select: none;
}

canvas { 
    display: block; 
    outline: none;
}

/* ==========================================
   2. 背景特效與遮罩 (Background & Overlays)
   ========================================= */
.paper-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; opacity: 0.03;
    background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)"/%3E%3C/svg%3E');
    background-repeat: repeat;
    background-size: 200px 200px;
    z-index: 0;
}

#intro-fog {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(38, 16, 59, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px); 
    z-index: 9999;
    pointer-events: none;
}

/* ==========================================
   3. UI 佈局與主面板 (UI Container & Main Panel)
   ========================================= */
#ui-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100dvh; /* 🌟 雙重防護 */
    display: flex;
    justify-content: flex-end; 
    align-items: center;
    padding-right: 12%; 
    box-sizing: border-box;
    pointer-events: none; 
    z-index: 10;
}

#info-panel {
    position: relative;
    width: 580px; 
    height: 500px;
    min-height: 475px;
    background: rgb(255 191 229 / 80%); 
    padding: 55px 75px 45px 75px; 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
    border: 3px solid rgba(184, 138, 49, 0.3) !important; 
    outline: none !important; 
    border-radius: 24px; 
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important; 
    opacity: 0;
    transform: translateX(50px); 
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); 
    pointer-events: none; 
    display: flex;
    flex-direction: column;
    color: #2C1A1D; 
    overflow: hidden; 
}

#ui-container.active #info-panel {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* ==========================================
   4. 面板內文字與排版 (Typography & Content)
   ========================================= */
.panel-title { 
    font-size: 0.95rem; color: #B88A31; letter-spacing: 4px; 
    text-transform: uppercase; margin-bottom: 25px; 
    text-align: center; font-weight: bold; 
    text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.5); 
}

/* =========================================
   替換 1：宣言文字區塊與周邊間距 (解決字被切掉)
   ========================================= */
.panel-poetry { 
    flex-grow: 1;        /* 🌟 核心魔法：讓詩詞自動填滿剩下的空間 */
    display: flex;       
    flex-direction: column;
    justify-content: flex-start; 
    overflow: hidden !important; 
    font-size: 1.6rem; 
    color: #2C1A1D; 
    line-height: 1.7; 
    margin-bottom: 10px; /* 🌟 縮減與下方作者的距離 */
    white-space: pre-wrap; 
    font-weight: bold; 
    transition: font-size 0.3s ease;
    text-align: justify;       
    text-justify: inter-word;  
    padding-left: 0;           
    text-indent: 0;
    -webkit-user-select: text;
    user-select: text;
}

.panel-poetry div {
    padding-left: 18px !important; 
    text-indent: -18px !important; 
    margin: auto 0; 
}

.panel-poetry.text-compact {
    font-size: 1.15rem !important;  
    line-height: 1.45 !important;    
}

.panel-author { 
    font-size: 1rem; color: #5A4348; 
    margin-bottom: 15px; /* 🌟 縮減間距，把空間還給詩詞 */
    text-align: right; 
    user-select: text; 
    -webkit-user-select: text;
}

.panel-divider { 
    width: 100%; height: 1px; 
    background: linear-gradient(90deg, transparent, rgba(184, 138, 49, 0.6), transparent); 
    margin-bottom: 15px; /* 🌟 縮減間距 */
    margin-top: auto; 
}

.panel-footer {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 12px 24px;      /* 🌟 縮減間距 */
    font-size: 0.95rem; 
    color: #4A2E35; 
    margin-bottom: 25px; /* 🌟 縮減間距 */
}

/* =========================================
   替換 2：底部 6 個項目的排版 (解決 Icon 對齊)
   ========================================= */
.footer-item { 
    display: flex; 
    align-items: flex-start !important; /* 確保長文字折行時，是靠上對齊而不是整塊置中 */
    line-height: 1.3 !important; 
    white-space: normal !important; 
    word-break: break-word !important;
    flex-shrink: 0; 
}

/* 🌟 徹底消滅標題 (Flower: / Item: 等文字絕對不准出現) */
.footer-label {
    display: none !important; 
}

/* 🌟 ICON 精準對齊 */
.footer-item .icon { 
    display: inline-block !important; /* 🌟 從 inline-flex 改成 inline-block，排版會更穩定 */
    font-size: 1.15rem !important; 
    margin-right: 8px !important;  
    color: #B88A31; 
    text-shadow: 0 2px 5px rgba(184, 138, 49, 0.4); 
    transform: none !important; 
    
    /* 🌟 核心魔法：把它往下推！ */
    /* 目前設定 4px，如果你存檔後覺得還偏高，就改成 5px；如果覺得太低，就改成 3px */
    margin-top: -1px !important; 
}

.value { 
    font-weight: bold; 
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* ========================================== */

/* ==========================================
   5. 按鈕系統 (Button System)
   ========================================= */
.button-group { 
    display: flex; justify-content: flex-end; gap: 16px; flex-wrap: wrap; 
}

#play-zh-tw-btn, #play-tw-btn { flex: 1; justify-content: center; }
#play-voice-btn { width: 100%; justify-content: center; margin-top: 4px; }

.play-btn {
    padding: 10px 16px; background: rgba(184, 138, 49, 0.05); 
    border: 1px solid rgba(184, 138, 49, 0.4) !important; border-radius: 30px !important; 
    /* 🌟 核心修正：消除手機點擊時出現的方形高光區塊 */
    -webkit-tap-highlight-color: transparent; 
    
    /* 🌟 核心修正：消除電腦版聚焦或點擊時產生的方形預設外框 */
    outline: none !important; 
    
    /* 確保內部的光影或效果不會溢出圓角邊界 */
    overflow: hidden;
    color: rgba(184, 138, 49, 1); font-size: 0.95rem; letter-spacing: 1px;
    cursor: pointer; transition: all 0.3s ease;
    display: flex; align-items: center; white-space: nowrap;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(184, 138, 49, 0.15), 0 4px 10px rgba(0, 0, 0, 0.08) !important;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.play-btn:hover {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 220, 220, 0.3) 30%) !important;
    color: #B88A31; border-color: #B88A31; transform: scale(1.03);
    transform: translateY(-2px);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(184, 138, 49, 0.15), 0 6px 15px rgba(184, 138, 49, 0.2) !important;
}

.play-btn .play-icon { margin-right: 8px; font-size: 0.85rem; opacity: 0.8; }
.play-btn .flag-icon { margin-right: 6px; font-size: 1.15rem; font-family: 'Noto Color Emoji', sans-serif; } 

#bgm-btn {
    position: absolute; top: 30px; left: 30px;
    width: 44px; height: 44px; padding: 0;   
    display: flex; justify-content: center; align-items: center; border-radius: 50%; 
    outline: none !important; -webkit-tap-highlight-color: transparent;
    background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(184, 138, 49, 0.3); color: rgba(255, 200, 89, 0.8); 
    cursor: pointer; z-index: 20; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(184, 138, 49, 0.1), 0 8px 20px rgba(0, 0, 0, 0.08);
}
#bgm-btn:hover {
    background: rgba(255, 255, 255, 0.25); color: #B88A31; border-color: rgba(184, 138, 49, 0.6);
    transform: translateY(-2px) scale(1.05); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), inset 0 -2px 4px rgba(184, 138, 49, 0.15), 0 12px 25px rgba(184, 138, 49, 0.15);
}
#bgm-btn .play-icon { font-family: 'Arial', 'Helvetica', sans-serif !important; font-size: 1.1em; display: inline-block; transform: translateY(1px); margin-right: 4px;}

#bg-switch-btn {
    position: absolute; top: 85px; left: 30px; /* 🌟 剛好排在音樂按鈕的下方 */
    width: 44px; height: 44px; padding: 0;   
    display: flex; justify-content: center; align-items: center; border-radius: 50%; 
    outline: none !important; -webkit-tap-highlight-color: transparent;
    background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(184, 138, 49, 0.3); color: rgba(255, 200, 89, 0.8); 
    cursor: pointer; z-index: 20; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(184, 138, 49, 0.1), 0 8px 20px rgba(0, 0, 0, 0.08);
}
#bg-switch-btn:hover {
    background: rgba(255, 255, 255, 0.25); color: #B88A31; border-color: rgba(184, 138, 49, 0.6);
    transform: translateY(-2px) scale(1.05); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), inset 0 -2px 4px rgba(184, 138, 49, 0.15), 0 12px 25px rgba(184, 138, 49, 0.15);
}
#bg-switch-btn:active { transform: scale(0.95); }

/* 🌟 手機版對齊 */
@media screen and (max-width: 768px) {
    #bg-switch-btn { top: 70px; left: 15px; width: 38px; height: 38px; } 
}

#close-btn {
    position: absolute; top: 15px; right: 20px;
    background: none; border: none; font-size: 2.2rem; color: #B88A31; 
    cursor: pointer; opacity: 0.6; transition: opacity 0.3s;
}
#close-btn:hover { opacity: 1; transform: scale(1.1); }
.play-btn:active, #bgm-btn:active { transform: scale(0.95); box-shadow: 0 1px 3px rgba(184, 138, 49, 0.1) !important; transition: all 0.05s ease; }
#close-btn:active { transform: scale(0.9); opacity: 0.5; transition: all 0.05s ease; }

#copyright {
    position: absolute; bottom: 8px; left: 0; width: 100%; text-align: center;
    color: rgba(255, 255, 255, 0.25); font-size: 0.7rem; font-family: 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 2px; z-index: 1000; pointer-events: none; 
    transition: opacity 0.5s ease;
}

/* 電腦版不需要展開按鈕 */
.decode-btn { display: none; }

/* ==========================================
   6. 開場標題與 Loading (Opening & Loading)
   ========================================= */
#shaky-love-title {
    position: absolute; top: 50%; left: 50%; z-index: 100; pointer-events: none; opacity: 0; 
    font-family: 'Helvetica Neue', Arial, sans-serif; font-weight: 300; font-size: 6rem;
    letter-spacing: 25px; color: #ffffff; text-transform: uppercase; white-space: nowrap;
    line-height: 1; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; 
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 30px rgba(255, 210, 100, 0.8), 0 0 60px rgba(255, 120, 0, 0.6), 0 0 100px rgba(200, 100, 0, 0.4);
    transition: transform 0.3s ease;
}
#shaky-love-title:hover { transform: translate(-50%, -50%) scale(1.05); }
#shaky-love-title .letter {
    font-family: 'Arial Black', sans-serif; font-size: 5.5rem; font-weight: 900; color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 220, 100, 0.9);
    background: linear-gradient(120deg, rgba(255,255,255,1) 0%, rgba(255,215,100,1) 50%, rgba(255,255,255,1) 100%);
    background-size: 200% auto; -webkit-background-clip: text; background-clip: text; 
    text-shadow: 0 0 40px rgba(255, 102, 0, 0.6); display: inline-block; animation: goldShine 3s linear infinite; 
}
@keyframes goldShine { to { background-position: 200% center; } }

#global-loader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background-color: #050514; z-index: 999999; 
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transition: opacity 0.8s ease; 
}
#love-opening-canvas { opacity: 0; transition: opacity 0.5s ease-in-out; }
#love-opening-canvas.canvas-sunrise { opacity: 1 !important; }
#mask-path { fill: none; stroke: white; stroke-width: 12; stroke-dasharray: 250; stroke-dashoffset: -250; animation: drawHeart 1.2s linear infinite; }
#dotted-heart { fill: none; stroke: #ff9b2c; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 0.1 14; }
#loading-text { margin-top: 15px; color: #ff9b2c; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.85rem; letter-spacing: 5px; font-weight: bold; }
@keyframes drawHeart { 0% { stroke-dashoffset: -250; } 100% { stroke-dashoffset: 0; } }

/* ==========================================
   7. 主題光影系統 (Theme System)
   ========================================== */
#info-panel.theme-goodvibes {
    border-color: rgba(255, 250, 245, 0.5) !important; box-shadow: 0 0 15px rgba(255, 255, 255, 0.4), 0 0 35px rgba(255, 250, 240, 0.2) !important; animation: gentleBreathe 4s ease-in-out infinite;
}
@keyframes gentleBreathe { 0%, 100% { box-shadow: 0 0 15px rgba(255, 255, 255, 0.4), 0 0 35px rgba(255, 250, 240, 0.2); } 50% { box-shadow: 0 0 25px rgba(255, 255, 255, 0.6), 0 0 50px rgba(255, 250, 240, 0.4); } }

#info-panel.theme-lucky {
    border-color: rgba(212, 175, 55, 0.6) !important; box-shadow: 0 0 20px rgba(212, 175, 55, 0.4), 0 0 40px rgba(184, 138, 49, 0.25), 0 0 60px rgba(184, 138, 49, 0.15) !important; animation: goldPulse 3s alternate infinite;
}
@keyframes goldPulse { 0% { box-shadow: 0 0 15px rgba(212, 175, 55, 0.2), 0 0 30px rgba(184, 138, 49, 0.1); } 100% { box-shadow: 0 0 25px rgba(212, 175, 55, 0.5), 0 0 50px rgba(184, 138, 49, 0.3), 0 0 80px rgba(184, 138, 49, 0.2); } }

#info-panel.theme-ssr {
    border-color: rgba(80, 140, 255, 0.8) !important; background: rgb(220 235 255 / 80%) !important; box-shadow: 0 0 20px rgba(80, 140, 255, 0.7), 0 0 60px rgba(120, 60, 255, 0.6) !important; animation: magicAura 3s ease-in-out infinite;
}
@keyframes magicAura { 0%, 100% { box-shadow: 0 0 20px rgba(80, 140, 255, 0.6), 0 0 50px rgba(120, 60, 255, 0.4); } 50% { box-shadow: 0 0 40px rgba(80, 140, 255, 0.9), 0 0 80px rgba(140, 80, 255, 0.7); } }

#info-panel.theme-chaos {
    border-color: rgba(255, 182, 193, 0.9) !important; box-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 105, 180, 0.6), 0 0 50px rgba(255, 182, 193, 0.4) !important; animation: crazyNeon 1.5s alternate infinite;
}
@keyframes crazyNeon { 0% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 105, 180, 0.4); } 100% { box-shadow: 0 0 25px rgba(255, 255, 255, 0.9), 0 0 45px rgba(255, 105, 180, 0.8), 0 0 70px rgba(255, 182, 193, 0.6); } }

#ui-container.active #info-panel.theme-chaos { animation: chaosRubberBand 2.5s ease-out forwards; }
@keyframes chaosRubberBand { 0% { transform: translateX(50px) rotate(0deg); opacity: 0; } 15% { transform: translateX(0) rotate(-3deg); opacity: 1; } 75% { transform: translateX(0) rotate(-3deg); opacity: 1; } 80% { transform: translateX(0) rotate(4deg); } 85% { transform: translateX(0) rotate(-2deg); } 90% { transform: translateX(0) rotate(1deg); } 95% { transform: translateX(0) rotate(-0.5deg); } 100% { transform: translateX(0) rotate(0deg); opacity: 1; } }

#info-panel::after {
    content: ''; position: absolute; top: 0; left: -150%; width: 60%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg); pointer-events: none; z-index: 10;
}
#ui-container.active #info-panel::after { animation: shineSweep 5s ease-in-out infinite; animation-delay: 0.8s; }
@keyframes shineSweep { 0% { left: -150%; } 40% { left: 200%; } 100% { left: 200%; } }

/* ==========================================
   8. 📱 手機版專屬大一統排版 (Mobile RWD)
   ========================================== */
@media screen and (max-width: 1600px) {
    #ui-container {
        padding-right: 8%; 
    }
}

@media screen and (max-width: 1440px) {
    #ui-container {
        padding-right: 5%; 
    }
}

@media screen and (max-width: 1200px) {
    #ui-container {
        padding-right: 2%; 
    }
}

@media screen and (max-width: 1024px) {
    #ui-container {
        padding: 0 15px 15px 15px;
        justify-content: center;
        align-items: flex-end; 
    }
    
#info-panel {
        width: 100%;
        /* 🌟 核心：維持 390px 鋼鐵防線，絕對不動 */
        height: 390px !important; 
        max-height: 390px !important; 
        min-height: 390px !important;
        
        padding: 25px 15px 15px 15px !important; 
        border-radius: 20px;
        
        /* 🌟 概念二初始狀態：往下沉 45px，並且稍微縮小到 92% (Z軸深處) */
        transform: translateY(45px) scale(0.92);
        opacity: 0; /* 確保初始是透明的 */
        
        /* 🌟 迎賓魔法：恢復 0.8s 與 PC 級別的 cubic-bezier 曲線，並套用給所有屬性 (all) */
        transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1) !important; 
        
        -webkit-user-select: none; 
        user-select: none;         
        -webkit-touch-callout: none;
    }
    
    /* 🌟 面板進場時的最終狀態 */
    #ui-container.active #info-panel { 
        /* 從深處往前浮現，放大回 100%，並回到原位 */
        transform: translateY(0) scale(1); 
        opacity: 1; /* 完美淡入 */
    }

    .panel-title {
        /* 🌟 縮小標題下方的間距，為文字騰出空間 */
        margin-bottom: 12px !important; 
    }

    .panel-poetry {
        /* 🌟 字體從 1.15rem 縮小到 1.03rem，行高從 1.5 降到 1.35 */
        font-size: 1.03rem !important; 
        line-height: 1.35 !important; 
        
        max-height: 150px !important; 
        overflow-y: auto; 
        margin-bottom: 0px;
        text-align: justify;       
        text-justify: inter-word;  
        padding-left: 0;
        text-indent: 0;
        transition: all 0.4s ease !important; 
    }

    /* 🌟 手機版專屬：懸掛引號完美對齊 (配合手機較小的字體微調) */
    .panel-poetry div {
        padding-left: 8px !important; 
        text-indent: -8px !important; 
        
        /* 確保文字垂直分佈在 390px 空間內時依然優雅 */
        width: 100%;
        box-sizing: border-box;
    }

    .panel-author {
        margin-bottom: 10px; 
        max-height: 30px !important; 
        /* 🌟 核心同步 */
        transition: all 0.4s ease !important; 
    }
    .panel-poetry.text-compact {
        font-size: 0.95rem !important; 
        line-height: 1.3 !important;
    }
    .panel-poetry::-webkit-scrollbar {
        display: none; 
    }

    /* 🌟 2. 徹底隱藏標題標籤 (如 Flower:) */
    .footer-label {
        display: none !important;
    }

    .button-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        /* 🌟 給定明確的兩排按鈕高度 (大約 90px)，讓縮放更平滑 */
        max-height: 100px; 
        opacity: 1;
        overflow: hidden;
        padding-bottom: 5px !important; 
        transition: all 0.4s ease !important; 
    }
    .play-btn {
        padding: 8px 5px;
        font-size: 1rem;
    }
    .play-btn .play-icon { display: none !important; }
    .play-btn span:last-child { display: none !important; } 
    #play-voice-btn { grid-column: span 2; }
    
    #shaky-love-title { 
        font-size: 3rem; 
        letter-spacing: 2px; 
        width: auto;             
        white-space: nowrap;     
    }
    
    #bgm-btn { 
        top: 20px; left: 15px; 
        width: 38px; height: 38px; 
    }

    /* ==========================================
       🌟 Decode Destiny 兩階段抽屜按鈕系統 (終極絲滑版)
       ========================================== */
    
    .panel-divider { display: none !important; }

/* 🌟 包含「隱形把手」與「呼吸光暈」的解碼按鈕 */
    .decode-btn {
        display: flex; align-items: center; justify-content: center;
        width: 100%; background: transparent;
        border: none !important; 
        color: #B88A31; font-family: 'Times New Roman', serif; font-size: 0.95rem;
        cursor: pointer; 
        transition: all 0.4s ease !important;
        
        /* 🌟 加上相對定位，讓把手可以準確黏在最上方 */
        position: relative; 
        
        /* 保持你的原比例，絕不動到空間 */
        padding: 10px 0 5px 0 !important; 
        margin: 0 !important; 
    }

    .decode-btn:active {
        transform: scale(0.95);
        opacity: 0.7;
    }

    /* 🌟 用魔法生出「真正的實體把手」，完美支援圓角與真實發光！ */
    #decode-text::before {
        content: '';
        position: absolute;
        top: 0px;        /* 緊貼按鈕最頂端 (會剛好落在 10px 的 padding 空間內) */
        left: 50%;       /* 完美置中 */
        transform: translateX(-50%);
        width: 40px;     /* 40px 長度 */
        height: 2px;     /* 稍微加厚一點，圓角才會好看 */
        
        /* ✅ 圓角來了！ */
        border-radius: 10px; 
        
        background-color: rgba(184, 138, 49, 0.6);
        /* 綁定真實的光暈呼吸動畫 */
        animation: realHandleGlow 3s ease-in-out infinite;
    }

    /* 🌟 真實把手的呼吸光暈關鍵影格 */
    @keyframes realHandleGlow {
        0%, 100% { 
            box-shadow: 0 0 2px rgba(184, 138, 49, 0.1); 
            background-color: rgba(184, 138, 49, 0.5);
        }
        50% { 
            /* 🌟 光暈大小看這裡！(有兩層光) */
            /* 第三個數字代表「光擴散出去的範圍」 */
            /* 建議把 8px 降到 4px 或 5px，把 15px 降到 8px 或 10px，光就會收斂很多 */
            box-shadow: 0 0 4px rgba(184, 138, 49, 1), 0 0 8px rgba(255, 215, 100, 0.6); 
            background-color: rgba(220, 175, 65, 1);
        }
    }

    /* 左右橫線維持原樣，不影響空間 */
    .decode-btn::before {
        content: ''; flex-grow: 1; height: 1px; margin-right: 15px;
        background: linear-gradient(90deg, transparent, rgba(184, 138, 49, 0.5));
    }
    .decode-btn::after {
        content: ''; flex-grow: 1; height: 1px; margin-left: 15px;
        background: linear-gradient(270deg, transparent, rgba(184, 138, 49, 0.5));
    }

    .decode-icon {
        margin-left: 6px; 
        transition: transform 0.4s ease !important; 
        animation: breatheArrow 2s ease-in-out infinite;
    }
    @keyframes breatheArrow {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(4px); }
    }

/* 1. 數據面板初始狀態：拿掉粉紅底色，回歸純淨透視 */
    .panel-footer { 
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 12px; 
        margin-top: 0; 
        margin-bottom: 10px;
        max-height: 32px; 
        overflow: hidden;
        opacity: 0.5;
        -webkit-mask-image: linear-gradient(to bottom, black 15%, transparent 85%);
        mask-image: linear-gradient(to bottom, black 15%, transparent 85%);
        
        /* 🌟 核心：拿掉所有底色與陰影，回歸純淨透視 */
        background: transparent !important; 
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;

        transform: none !important; 
        z-index: 5;
        transition: all 0.4s ease !important; 
        pointer-events: none;   
    }

        /* 🌟 展開時：帶著 6 個項目向上位移，蓋住詩詞 */
        #info-panel.show-details .panel-footer {
        max-height: 500px;
        opacity: 1;
        -webkit-mask-image: none;
        mask-image: none;
        pointer-events: auto;
        
        /* 🌟 關鍵：向上平移約 160px (數字可根據詩詞高度微調)，直接蓋上去 */
        transform: translateY(-165px); 
        box-shadow: 0 -10px 20px rgba(0,0,0,0.05); /* 增加一點點陰影感，更有疊層效果 */
    }

    
/* ==========================================
       🌟 展開狀態 (當玩家點擊把手後) - 4點準則原地切換版
       ========================================== */
    
    /* 📌 準則2. 固定高度：鎖死在 420px，確保 6 個項目不被切掉 */
    #info-panel.show-details {
        height: 390px !important;  
        max-height: 390px !important;
        min-height: 390px !important;
    }

/* 📌 準則4. 詩詞原地淡出：將高度縮歸零，讓按鈕自然滑上去 */
    #info-panel.show-details .panel-poetry,
    #info-panel.show-details .panel-author {
        max-height: 0 !important;
        opacity: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none;
        
        /* 🌟 終極修正：拿掉高度的延遲！讓高度跟邊距「立刻」用 0.4 秒同步縮合，
           同時讓文字用 0.2 秒極速淡出。這樣就不會跳動，也不會有等待的卡頓感了！ */
        transition: opacity 0.2s ease, max-height 0.4s ease, margin 0.4s ease, padding 0.4s ease !important;
    }

    /* 確保按鈕與箭頭正常旋轉，不亂飛 */
    #info-panel.show-details .decode-btn {
        transform: none !important; 
        margin-top: 5px; 
    }
    #info-panel.show-details .decode-icon {
        transform: rotate(180deg); 
        animation: none; 
    }

    /* 📌 準則3. 數據面板原地展開：6 個項目完整顯現，無底色 */
    #info-panel.show-details .panel-footer {
        /* 🌟 核心：從 400px 降到 240px，消滅收合時的暴衝時間差！ */
        max-height: 300px !important; 
        opacity: 1 !important;
        margin-top: 10px;
        -webkit-mask-image: none;
        mask-image: none;
        pointer-events: auto;        
    }

    /* 展開時隱藏下方語音按鈕，釋放垂直空間 */
    #info-panel.show-details .button-group {
        max-height: 0;
        opacity: 0;
        margin: 0;
        padding: 0;
        pointer-events: none;
    }

/* 📌 6 個項目原地展開後的樣式 */
    #info-panel.show-details .footer-item {
        display: flex !important;    
        /* 🌟 修正 1：從 center 改成 flex-start，讓 Icon 往上對齊第一行 */
        align-items: flex-start !important; 
        gap: 12px;                   
        font-size: 0.95rem; 
        
        /* 🌟 修正 2：依據你的要求，將行高壓緊到 1.2 */
        line-height: 1.2 !important; 
        
        border-bottom: 1px solid rgba(184, 138, 49, 0.1); 
        padding: 5px 0 !important; 
        background: transparent !important;
        white-space: normal !important; 
        word-break: break-word !important; 
        -webkit-user-select: none !important;
        user-select: none !important;
    }

    /* 🌟 修正 3：專門微調展開狀態的 Icon 高度，讓它與第一行文字完美「視覺對齊」 */
    #info-panel.show-details .footer-item .icon {
        transform: translateY(0) !important; /* 取消原本可能有的垂直位移 */
        margin-top: 1px !important; /* 如果覺得 Icon 太高，可以把這裡改成 2px 或 3px 微調 */
    }

    /* ==========================================
       🛡️ 終極防護罩：徹底消滅手機版的所有反白與長按搜尋
       ========================================== */
    #info-panel,
    .panel-poetry,
    .panel-author,
    .footer-item,
    .footer-item *,
    .footer-label,
    .value {
        /* 1. 殺死所有反白選取能力 */
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        
        /* 2. 殺死 iOS/Android 的長按系統選單 (輕觸即可查看、複製等) */
        -webkit-touch-callout: none !important; 
        
        /* 3. 殺死圖片或文字的拖曳行為 */
        -webkit-user-drag: none !important;     
    }

    #info-panel.show-details .footer-item:last-child {
        border-bottom: none;
    }

    /* 確保這行有包含 max-height 和 margin */
    .panel-poetry, .panel-author {
        /* 🌟 收合面板時的順序反過來：先撐開空間 (0.4s)，文字再慢慢淡入 (0.3s)，徹底消滅擠壓感 */
        transition: max-height 0.4s ease, margin 0.4s ease, padding 0.4s ease, opacity 0.3s ease 0.2s !important;
    }
  
}