:root {
    --bg-color: #e3e548;
    --logo-color: #1a1a1a;   /* ✨ 新增：專管開場大 LOGO 的顏色 */
    --snake-color: #1a1a1a;  /* ✨ 新增：專管小狗(波浪字)的顏色 */
    --ui-text-dark: #1a1a1a; /* ✨ 新增：永遠不變的深黑，專管面板內文 */
    --main-size: 350px;
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    -webkit-tap-highlight-color: transparent; 
    
    /* ✨ 防線一：禁止圖片或元素被滑鼠拖曳出殘影 */
    -webkit-user-drag: none;
    
    /* ✨ 防線二：禁止任何文字或區塊被滑鼠反白選取 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 加強防禦：確保圖片絕對不會觸發預設的圖片行為 */
img {
    pointer-events: none;
}

body, html { 
    background-color: var(--bg-color); 
    width: 100%; height: 100%; 
    overflow: hidden; 
    font-family: system-ui, -apple-system, sans-serif;
    color: var(--ui-text-dark); /* 統一基底文字為深黑 */ 
}

/* 入口動畫層 */
#entry-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--bg-color); z-index: 9999;
    display: flex; justify-content: center; align-items: center;
}
#magnetic-zone { width: 450px; height: 450px; display: flex; justify-content: center; align-items: center; position: relative; cursor: pointer; }
#magnetic-content { display: flex; align-items: center; justify-content: center; position: relative; width: 450px; height: 250px; }
/* 讓標題變成上下堆疊的群組 */
.entry-title { 
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--logo-color); /* ✨ 這裡改了 */
    z-index: 2; pointer-events: none; 
}

/* ✨ SHAKY：巨大、粗壯，作為視覺屋頂 */
.title-shaky { 
    font-size: 68px; 
    font-weight: 900; 
    letter-spacing: 4px; /* 字距緊湊，展現力量 */
    line-height: 0.95; 
    margin-right: -4px;  /* 修正最後一個字元的視覺偏移 */
}

/* ✨ UNIVERSE：縮小，但字距拉積極大，作為穩固底座 */
.title-universe { 
    font-size: 34px; 
    font-weight: 800; 
    letter-spacing: 11px; /* 刻意拉開，讓左右寬度與上方對齊 */
    line-height: 1; 
    margin-right: -11px; /* 修正最後一個字元的視覺偏移 */
}
#snake-container { position: absolute; width: 480px; height: 280px; pointer-events: none; z-index: 1; }
#snake-container svg { width: 100%; height: 100%; overflow: visible; }
#snake-text { 
    font-size: 15px; font-weight: 800; 
    fill: var(--snake-color); /* ✨ 這裡改了，拿掉原本的 rgba */
    letter-spacing: 2px; font-family: monospace; 
}

/* Shaky 本體 */
#shaky-wrapper { position: fixed; top: 50%; left: 50%; width: var(--main-size); height: var(--main-size); transform: translate(-50%, -50%); z-index: 20; perspective: 1500px; }
#shaky-rotator { width: 100%; height: 100%; transform-style: preserve-3d; }
.shaky-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; visibility: hidden; }
#f-center { visibility: visible; }
#shaky-dialog { position: absolute; left: -60px; bottom: 40px; transform: rotate(-12deg) scale(0.5); opacity: 0; pointer-events: none; z-index: 30; font-family: "Arial Black", "Impact", sans-serif; font-size: 56px; font-weight: 900; color: #fff129; letter-spacing: 2px; line-height: 1; text-shadow: 3px 3px 0px #e91e63, 5px 5px 0px #e91e63, 7px 7px 0px #880e4f; }
#shaky-dialog span { display: block; margin-top: 12px; font-size: 16px; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.5); font-family: monospace; opacity: 0.9; }

/* 頂部控制列 */
#top-control-bar {
    position: fixed; top: 183px; left: 50%; transform: translateX(-50%); 
    width: 90%; max-width: 525px; height: 30px; z-index: 50; opacity: 0; pointer-events: none; 
}
#shaky-slogan { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; font-weight: 900; color: var(--logo-color); pointer-events: auto; cursor: pointer;}
#info-btn-animator { position: absolute; top: 50%; right: 0; transform: translateY(-50%); animation: breathe 3s infinite ease-in-out; pointer-events: auto; border-radius: 50%; }
#info-btn {
    width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); 
    backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-weight: 600; font-size: 14px; color: rgba(0, 0, 0, 0.6); 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: all 0.3s; border: none; outline: none;
}
#info-btn-animator:hover { animation-play-state: paused; }
#info-btn-animator:hover #info-btn { 
    /* ✨ 加上 translateY(-3px) 讓它放大的同時往上躲開 */
    transform: scale(1.3) translateY(-6px); 
    background: rgba(255, 255, 255, 1); 
    color: var(--text-dark); 
    /* ✨ 順便把陰影稍微往下延伸一點，讓浮起感更真實 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); 
}

@keyframes breathe {
    0% { transform: translateY(-50%) scale(1); opacity: 0.8; }
    50% { transform: translateY(-50%) scale(1.15); opacity: 1; }
    100% { transform: translateY(-50%) scale(1); opacity: 0.8; }
}

/* 內容滾動區 */
/* 內容滾動區 */
/* 1. 原本的外框：拿掉 padding、滾動與遮罩，讓它成為純粹的實體玻璃板 */
#scroll-container { 
    position: fixed; top: 220px; left: 50%; transform: translateX(-50%);
    width: 94%; max-width: 580px; height: calc(100vh - 275px); 
    background: rgba(255, 255, 255, 0.35); border-radius: 24px; 
    display: none; flex-direction: column; align-items: center; 
    z-index: 5; 
}

/* 2. ✨ 新增的內框：負責滾動，並把模糊遮罩套在這裡 */
#scroll-content-mask {
    width: 100%;
    height: 100%;
    padding: 24px 0; /* 原本外框的 padding 搬來這裡 */
    overflow-y: auto; 
    scrollbar-width: none;
    display: flex; 
    flex-direction: column; 
    align-items: center;
    
    /* 遮罩加在這層，就只會模糊裡面的字和按鈕，絕對不會糊到外面的背景框！ */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40px, black calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 40px, black calc(100% - 40px), transparent 100%);
    cursor: grab;
}

/* 👈 新增：當 JS 判定正在拖曳時，強制變成「握緊的手」 */
#scroll-content-mask.is-dragging {
    cursor: grabbing !important;
}

/* 確保連結按鈕的游標不受影響 */
#scroll-content-mask a {
    cursor: pointer;
}

#scroll-container::-webkit-scrollbar { display: none; }

/* ✨ 簡介卡片 (優化文字排版) */
#bio-container {
    width: 90%; max-width: 525px; display: none; opacity: 0; 
    background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);
    border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    padding: 32px 28px; margin-bottom: 5px; font-size: 14px; line-height: 1.7; 
    color: var(--ui-text-dark); /* 履歷文字深黑 */
    
    /* ✨ 重點修正：長的左右靠邊，短的自動靠左 */
    text-align: justify;
    text-justify: inter-word; 
    
    flex-grow: 1; 
}
#bio-container p { margin-bottom: 16px; }
#bio-container strong { font-weight: 800; }

/* ✨ 標題修正：從置中改為靠左 */
.bio-title { 
    font-size: 16px; 
    font-weight: 900; 
    margin-bottom: 24px !important; 
    text-align: left; 
}

/* 連結清單 */
#links-wrapper { width: 90%; max-width: 525px; display: flex; flex-direction: column; gap: 14px; padding-bottom: 0px; transition: opacity 0.3s; }
.section-header { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 0 0 0; font-size: 15px; font-weight: 900; color: var(--ui-text-dark); text-transform: uppercase; letter-spacing: 1.5px; pointer-events: none; transition: opacity 0.3s; }

/* 連結區塊按鈕 */
.slate-item { 
    background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); 
    color: var(--ui-text-dark); padding: 12px 20px; min-height: 72px; border-radius: 15px; 
    text-decoration: none; display: flex; justify-content: space-between; align-items: center; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

/* [聚光燈效果] */
#links-wrapper:hover .list-anim-item {
    opacity: 0.45;
    transform: scale(0.97);
}

/* [聚焦效果]：微放大 2% */
#links-wrapper .slate-item:hover {
    opacity: 1 !important;
    transform: scale(1.02) translateY(-3px) !important;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.slate-left-group { display: flex; align-items: center; gap: 16px; flex-grow: 1; }
.slate-icon { width: 48px; height: 48px; background: transparent; display: flex; justify-content: center; align-items: center; overflow: hidden; flex-shrink: 0; }
.slate-icon img { width: 100%; height: 100%; object-fit: cover; }
.slate-icon svg { width: 28px; height: 28px; fill: #1a1a1a; } 

/* [3D 硬幣翻轉] */
.slate-item:hover .slate-icon {
    animation: coinFlip 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1; 
}
@keyframes coinFlip {
    0% { transform: perspective(400px) rotateY(0deg); }
    100% { transform: perspective(400px) rotateY(360deg); }
}

.slate-title { font-size: 15px; font-weight: 700; text-align: left; flex-grow: 1; padding-right: 12px; }
.slate-tag { font-size: 10px; font-weight: 700; opacity: 0.3; text-transform: uppercase; text-align: right; flex-shrink: 0; }

#footer { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--logo-color); text-align: center; z-index: 10; opacity: 0; pointer-events: none; }

/* =========================================
   ✨ 隔離防線與手機專屬體驗區 (Mobile UX)
========================================= */

/* 1. PC 版鐵律：預設「絕對隱藏」手指提示 */
.tap-hand-icon { 
    display: none; 
    position: absolute; 
    width: 32px; 
    height: 32px; 
    color: #fff129; 
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* 2. 手機版專屬 RWD (螢幕小於 500px 時才啟動) */
@media (max-width: 500px) {
    #magnetic-zone {
        transform: scale(0.75); 
        transform-origin: center;
    }
    #entry-overlay {
        overflow: hidden; 
    }
    
    /* ✨ 完美版面：把對話框移到「頭頂上方」，往右拉回螢幕內 */
    #shaky-dialog {
        left: 20px !important;    /* 往右拉回，確保不撞牆 */
        bottom: auto !important;  /* 解除底部綁定 */
        top: -40px !important;    /* 移到頭頂上方 */
    }
    
    /* ✨ 完美版面：把手指提示顯示出來，放在「右下角對角線」 */
/* ✨ 手指提示：改用你專屬的卡通手勢圖片 */
/* ✨ 手機版手指提示：預設透明，讓 JS 來控制出現時機 */
    .tap-hand-icon {
        display: block;
        position: absolute;
        bottom: 10px;  
        right: 40px; 
        width: 48px;   
        height: 48px; 
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        filter: drop-shadow(0px 3px 5px rgba(0,0,0,0.4));
        animation: tap-frame-anim 0.8s infinite; 
        z-index: 30;
        
        /* 新增：預設隱藏，並加上淡入淡出的滑順過場 */
        opacity: 0; 
        pointer-events: none; 
        transition: opacity 0.4s ease;
    }

    /* ✨ 手機版專屬：配合 Shaky 往上提，下方版面整體跟著往上 */
    #top-control-bar {
        top: 158px !important; 
    }
    #scroll-container {
        top: 195px !important;
        /* 使用 dvh 單位，完美避開手機瀏覽器上下網址列的干擾 */
        height: calc(100dvh - 240px) !important; 
    }

    #footer { bottom: 15px;
    }
}

/* ✨ 逐格動畫：加入 rotate(-45deg) 讓手指永遠向左傾斜 45 度 */
@keyframes tap-frame-anim { 
    0%, 45% { 
        background-image: url('../myimg/universe/p2-1.png'); 
        transform: rotate(-45deg) scale(1) translateY(0); 
    } 
    50%, 95% { 
        background-image: url('../myimg/universe/p2-3.png'); 
        transform: rotate(-45deg) scale(0.9) translateY(4px); 
    } 
    100% {
        background-image: url('../myimg/universe/p2-1.png'); 
        transform: rotate(-45deg) scale(1) translateY(0);
    }
}

/* 3. 手機版按鈕的觸覺按壓回饋 (取代 Hover) */
.slate-item:active { 
    transform: scale(0.96) translateY(0) !important; 
    background: rgba(255, 255, 255, 0.9) !important; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; 
    transition: all 0.1s; 
}
#info-btn-animator:active #info-btn { 
    transform: scale(0.9) translateY(0) !important; 
    background: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; 
    transition: all 0.1s; 
}