/* Reset & Fonts */
:root {
    --bg-color: #050505;
    --primary: #00f3ff;
    --secondary: #00ff41;
    --glass: rgba(255, 255, 255, 0.05);
    --border: rgba(0, 243, 255, 0.3);
    --text-main: #e0e0e0;
    --font-head: 'Orbitron', sans-serif;
    --font-body: 'Rajdhani', 'Noto Sans TC', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-body);
    overflow-x: hidden;
}

/* Background Canvas */
#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

/* Noise Texture Overlay */
.noise-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIj48ZmlsdGVyIGlkPSJub2lzZSI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuNjUiIG51bU9jdGF2ZXM9IjMiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjbm9pc2UpIiBvcGFjaXR5PSIwLjA1Ii8+PC9zdmc+');
    z-index: -1;
    pointer-events: none;
    opacity: 0.4;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #000;
}
::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 4px;
}

/* --- Navigation (HUD Style) --- */
.hud-nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    background: rgba(5, 5, 5, 0.3) !important; /* 極低透明度 */
    backdrop-filter: blur(12px); /* 強力模糊背後 */
    -webkit-backdrop-filter: blur(12px); /* Safari 支援 */
    border-bottom: 1px solid rgba(0, 243, 255, 0.1); /* 邊框改淡 */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    z-index: 1000;
}

/* --- 導航列品牌：終端機風格 --- */
.nav-brand {
    font-family: 'Courier New', monospace; /* 強制用等寬字體，這樣亂碼跳動才不會抖 */
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary);
    letter-spacing: 1px;
    text-decoration: none; /* 移除底線 */
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border: 1px solid transparent; /* 預留邊框位置 */
    transition: 0.3s;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    cursor: pointer;
}

/* Hover 效果：變亮、出現邊框 */
.nav-brand:hover {
    background: rgba(0, 243, 255, 0.1);
    border-color: rgba(0, 243, 255, 0.3);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
    text-shadow: 0 0 8px var(--primary);
}

/* 提示符號 (root@...) */
.cmd-prompt {
    color: var(--secondary); /* 綠色 */
    opacity: 0.8;
    font-size: 0.9rem;
}

/* 主要文字 */
#nav-glitch-text {
    color: #fff;
    min-width: 150px; /* 固定寬度，避免文字長短變化造成導航列跳動 */
    display: inline-block;
}

/* 游標 */
.cursor-block {
    color: var(--primary);
    animation: blink 1s steps(2) infinite;
}

.blink {
    animation: blink 1s infinite;
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-item {
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    position: relative;
    transition: 0.3s;
}

.nav-item:hover {
    color: var(--primary);
    text-shadow: 0 0 8px var(--primary);
}

.nav-mobile-btn { display: none; cursor: pointer; font-size: 1.5rem;}

/* --- Hero Section --- */
.hero-section {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-top: 80px; /* 避開 Nav */
    padding-bottom: 50px;
}
/* 終端機外框容器 */
.terminal-wrapper {
    display: flex;
    gap: 40px;
    background: rgba(5, 10, 15, 0.4) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 243, 255, 0.2); /* 讓邊框稍微亮一點來界定範圍 */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); /* 陰影改柔和 */
    border: 1px solid var(--primary);  /* 青色邊框 */
    padding: 30px;
    max-width: 1300px;
    width: 95%;
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.1);
    position: relative;
    backdrop-filter: blur(10px);
}

/* 四個角落的螺絲裝飾 */
.terminal-wrapper::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid transparent;
    background: 
        linear-gradient(to right, var(--primary) 20px, transparent 20px) top left,
        linear-gradient(to bottom, var(--primary) 20px, transparent 20px) top left,
        linear-gradient(to left, var(--primary) 20px, transparent 20px) bottom right,
        linear-gradient(to top, var(--primary) 20px, transparent 20px) bottom right;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    pointer-events: none;
}

.cam-header, .cam-footer {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
    font-family: var(--font-head);
    font-size: 0.8rem;
    color: var(--secondary); /* 綠色文字 */
    letter-spacing: 1px;
    background: rgba(0, 20, 0, 0.5);
}

.rec-dot {
    display: inline-block;
    width: 8px; height: 8px;
    background: red;
    border-radius: 50%;
    margin-right: 5px;
    animation: blink 1s infinite;
}

/* --- 左側：監控畫面 (Cam Feed) --- */
.terminal-cam-feed {
    flex: 0 0 450px; /* 固定寬度 */
    border: 1px solid rgba(0, 255, 65, 0.3); /* 綠色邊框 */
    background: rgba(0, 20, 0, 0.2);
    padding: 5px;
    display: flex;
    flex-direction: column;
}


.glitch {
    font-family: var(--font-head);
    font-size: 4rem;
    font-weight: 900;
    color: #fff;
    position: relative;
    text-transform: uppercase;
}

.role-container {
    font-size: 1.5rem;
    color: var(--secondary);
    margin: 10px 0; /* 上下間距 */
    font-family: var(--font-head);
    
    /* 如果你想讓 Web Designer 的 'W' 對齊底下的文字，可以嘗試把括號往左推一點點 */
    /* margin-left: -8px; */ 
}

.bracket { color: var(--primary); margin: 0 10px; }
.cursor { animation: blink 0.8s infinite; }

.hero-desc {
    max-width: 600px;
    
    /* 關鍵修改：原本是 0 auto (置中)，改成 20px 0 0 0 (靠左) */
    /* 順序：上 右 下 左 */
    margin: 20px 0 0 0; 
    
    line-height: 1.8;
    color: #aaa;
    font-size: 1.15rem;
    
    /* 確保文字靠左對齊 */
    text-align: left; 
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--primary);
    font-size: 0.8rem;
    letter-spacing: 2px;
}

.arrow {
    width: 0; 
    height: 0; 
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 10px solid var(--primary);
    margin-top: 10px;
    animation: bounce 2s infinite;
}

/* --- Common Section Styles --- */
.section-container {
    padding: 100px 10%;
    position: relative;
}

.section-title {
    font-family: var(--font-head);
    font-size: 2.5rem;
    margin-bottom: 60px;
    color: #fff;
    border-left: 5px solid var(--primary);
    padding-left: 20px;
    text-transform: uppercase;
    background: linear-gradient(90deg, rgba(0,243,255,0.1), transparent);
}

/* HUD Card Style */
.hud-card {
    /* background: rgba(10, 15, 20, 0.7); */
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    padding: 20px;
    position: relative;
    transition: 0.3s;
    overflow: hidden;
}

.hud-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 20px; height: 20px;
    border-top: 2px solid var(--primary);
    border-left: 2px solid var(--primary);
}

.hud-card::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0; width: 20px; height: 20px;
    border-bottom: 2px solid var(--primary);
    border-right: 2px solid var(--primary);
}

.hud-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.2);
    border-color: var(--primary);
}

/* =========================================
   Void Archive (虛空檔案館) - Z-Axis Explosion
   ========================================= */

.void-archive {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 0 60px 40px; /* 左邊留給光束 */
}

/* --- 1. 虛空光束 (The Beam) --- */
.void-beam {
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    z-index: 0;
}

.beam-core {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.1);
}

.beam-pulse {
    position: absolute;
    left: -1px;
    width: 4px;
    height: 200px;
    background: linear-gradient(180deg, transparent, var(--primary), transparent);
    animation: beamDrop 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    box-shadow: 0 0 20px var(--primary);
}

@keyframes beamDrop {
    0% { top: -20%; opacity: 0; }
    50% { opacity: 1; }
    100% { top: 110%; opacity: 0; }
}

/* --- 2. 容器與節點 --- */
.void-card-container {
    position: relative;
    margin-bottom: 80px; /* 卡片間距 */
    padding-left: 40px;
}

/* 連接點 (Node) */
.void-node {
    position: absolute;
    left: -34px; /* 對齊光束 */
    top: 40px;
    width: 10px;
    height: 10px;
    background: #000;
    border: 2px solid var(--primary);
    transform: rotate(45deg); /* 菱形 */
    box-shadow: 0 0 10px var(--primary);
    z-index: 1;
}

/* 連接線 */
.void-node::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 3px;
    width: 30px;
    height: 1px;
    background: var(--primary);
    opacity: 0.5;
}

/* --- 3. 虛空卡片本體 (The Card) --- */
.void-card {
    position: relative;
    width: 100%;
    height: 220px;
    transform-style: preserve-3d; /* 開啟 3D 分層 */
    perspective: 1000px;
    cursor: pointer;
}

/* 通用層屬性 */
.layer-bg, .layer-img, .layer-content {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
}

/* --- 第一層：背景 (最底) --- */
.layer-bg {
    /* [修改] 變成半透明黑色遮罩，讓文字看得清楚 */
    /* background: rgba(10, 15, 20, 0.85);  */
    z-index: 1; /* 疊在圖片上 */
    transform: translateZ(10px); /* 稍微浮起 */
    mix-blend-mode: multiply; /* 讓遮罩與圖片混合更自然 */
}

.void-card .layer-bg {
    background: rgba(10, 15, 20, 0.6) !important; /* 稍微深一點，保證文字可讀 */
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* 故障邊框 (Glitch Border) */
.glitch-border {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(0, 243, 255, 0.3);
    clip-path: polygon(
        0 0, 100% 0, 100% 100%, 0 100%, 
        0 20%, 2px 20%, 2px 80%, 0 80% /* 模擬缺口 */
    );
}

.void-card:hover .glitch-border {
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.2);
    animation: borderGlitch 0.3s infinite;
}

/* --- 第二層：圖片 (中間) --- */
.layer-img {
    /* [修改] 讓圖片填滿整個空間 */
    inset: 0; 
    width: 100%; height: 100%;
    z-index: 0; /* 放在最下面 */
    transform: translateZ(0px); /* 貼在底部 */
}

.layer-img::after {
    content: '';
    position: absolute;
    inset: 0;
    /* 上面透明，下面黑色，讓文字清楚 */
    background: linear-gradient(to bottom, rgba(10,15,20,0.2) 0%, rgba(10,15,20,0.95) 100%);
    z-index: 1;
    pointer-events: none;
}

.img-frame {
    width: 100%; height: 100%;
    position: relative;
}

.img-frame img {
    width: 100%; height: 100%;
    object-fit: cover;
    /* [修改] 亮度從 0.5 提升到 0.9，對比度稍微降低一點 */
    filter: grayscale(100%) contrast(1.1) brightness(0.9);
    /* 圖片位置改這 */
    object-position: center 30%;
    transition: 0.4s;
    /* 確保圖片是顯示的起點 */
    transform-origin: center;
}

/* 只改慈善表演那張 */
.void-card[data-id="ID: CHARITY"] .img-frame img {
    object-position: center 10%;
}

.placeholder-icon {
    width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    font-size: 3rem; color: #555;
}

.scan-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, var(--primary), transparent);
    background-size: 100% 200%;
    opacity: 0;
    transition: 0.4s;
}

/* Hover 效果：圖片變彩色變亮 */
.void-card:hover .img-frame img {
    filter: grayscale(0%) contrast(1.1) brightness(1.1);
}

.void-card:hover .scan-overlay {
    opacity: 0.2;
    animation: scanMove 2s linear infinite;
}

/* --- 第三層：文字內容 (最上層) --- */
.layer-content {
    /* [修改] 減少 padding，適應手機 */
    padding: 30px;
    z-index: 5;
    transform: translateZ(30px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 文字沉在底部 */
    height: 100%;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.exp-year {
    font-family: var(--font-head);
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.05);
    position: absolute;
    top: 10px; right: 200px;
    font-weight: 900;
    pointer-events: none;
    transition: 0.4s;
}

.exp-id {
    font-family: var(--font-head);
    color: var(--secondary);
    font-size: 0.8rem;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.layer-content h3 {
    font-family: var(--font-head);
    font-size: 1.8rem;
    color: #fff;
    margin: 0 0 15px 0;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.layer-content p {
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.tech-deco span {
    display: inline-block;
    font-size: 0.7rem;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 2px 8px;
    margin-right: 5px;
    font-family: var(--font-head);
}

/* Hover 效果：大爆裂 */
.void-card:hover .layer-content {
    transform: translateZ(60px); 
}

.void-card:hover .exp-year {
    color: rgba(255, 255, 255, 0.925);
    transform:  scale(1.2); /* 年份放大 */
}

/* --- 動畫 Keyframes --- */
@keyframes borderGlitch {
    0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    20% { clip-path: polygon(0 5%, 100% 0, 100% 95%, 5% 100%); }
    40% { clip-path: polygon(2% 0, 98% 2%, 100% 100%, 0 98%); }
    60% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    80% { clip-path: polygon(5% 2%, 100% 0, 95% 100%, 0 100%); }
    100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

@keyframes scanMove {
    0% { background-position: 0% -100%; }
    100% { background-position: 0% 200%; }
}

/* --- RWD 手機版 --- */
@media (max-width: 768px) {
    .void-archive { padding-left: 20px; }
    .void-beam { left: 0; }
    .void-node { left: -44px; }
    
    .void-card { height: auto; min-height: 300px; }
    
    /* 手機版取消複雜的 Z 軸爆裂，改為垂直排列 */
    .layer-img {
        position: relative;
        width: 100%;
        height: 150px;
        right: auto; top: auto; bottom: auto;
        margin-bottom: 10px;
        transform: none !important;
    }
    
    .layer-content {
        position: relative;
        padding: 20px;
        transform: none !important;
    }
    
    .exp-year {
        display: none; /* 手機版隱藏大年份 */
    }
}

.ghost-img {
    position: fixed;
    top: 0; left: 0;
    z-index: 9999;
    pointer-events: none;
    object-fit: cover;
    box-shadow: 0 0 50px rgba(0, 243, 255, 0.5);
    transition: none; /* 由 GSAP 控制 */
}

/* =========================================
   Holographic Data Deck (超高級專案展示)
   ========================================= */

.holo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    perspective: 1000px; /* 開啟 3D 空間 */
}

/* 3D 卡片本體 */
.holo-card {
    position: relative;
    height: 450px;
    width: 100%;
    transform-style: preserve-3d; /* 讓子元素也能 3D */
    cursor: pointer;
}

/* 內容層 (玻璃質感) */
.holo-content {
    position: absolute;
    inset: 0;
    background: rgba(10, 16, 25, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 243, 255, 0.2);
    /* 切角設計 */
    clip-path: polygon(
        20px 0, 100% 0, 
        100% calc(100% - 20px), calc(100% - 20px) 100%, 
        0 100%, 0 20px
    );
    overflow: hidden;
    transition: border-color 0.3s;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.holo-card:hover .holo-content {
    border-color: var(--primary);
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.15);
}

/* 圖片層 */
.holo-img-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    transition: transform 0.5s ease-out;
}

.holo-img-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) brightness(0.6) contrast(1.2);
    transition: 0.5s;
}

/* Hover 時圖片恢復彩色並放大 */
.holo-card:hover .holo-img-layer img {
    filter: grayscale(0%) brightness(0.8);
    transform: scale(1.1);
}

/* 圖片上的網格濾鏡 */
.img-overlay {
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(rgba(0,0,0,0) 50%, rgba(0, 243, 255, 0.05) 50%),
        linear-gradient(90deg, rgba(255,0,0,0.06), rgba(0,255,0,0.02), rgba(0,0,255,0.06));
    background-size: 100% 4px, 6px 100%;
    pointer-events: none;
    z-index: 1;
}

/* UI 介面層 (浮在圖片上面) */
.holo-ui-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* 讓 UI 產生 3D 浮起效果 */
    transform: translateZ(40px); 
}

/* ID 和 狀態燈 */
.proj-id {
    font-family: var(--font-head);
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    letter-spacing: 2px;
}

.proj-status {
    position: absolute;
    top: 25px; right: 25px;
    font-family: var(--font-head);
    font-size: 0.7rem;
    color: var(--secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--secondary);
    padding: 2px 6px;
    border-radius: 2px;
}

.status-dot {
    width: 6px; height: 6px;
    background: var(--secondary);
    border-radius: 50%;
    animation: blink 2s infinite;
}
.status-dot.orange { background: #ffaa00; box-shadow: 0 0 5px #ffaa00; }
.status-dot.blue { background: #0088ff; box-shadow: 0 0 5px #0088ff; }

/* 下方資訊區 */
.proj-info {
    transform: translateY(20px);
    transition: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.holo-card:hover .proj-info {
    transform: translateY(0);
}

.tech-tags {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.tech-tags span {
    font-family: var(--font-head);
    font-size: 0.7rem;
    color: var(--primary);
    background: rgba(0, 243, 255, 0.1);
    padding: 2px 6px;
    border: 1px solid rgba(0, 243, 255, 0.3);
}

.proj-info h3 {
    font-family: var(--font-head);
    font-size: 1.6rem;
    color: #fff;
    margin: 5px 0;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0,0,0,0.8);
}

.proj-info p {
    font-size: 0.95rem;
    color: #ccc;
    line-height: 1.5;
    margin-bottom: 20px;
    opacity: 0; /* 預設隱藏文字 */
    transform: translateY(10px);
    transition: 0.4s 0.1s;
    background: rgba(0,0,0,0.6); /* 增加底色讓文字更清楚 */
    padding: 5px;
}

.holo-card:hover .proj-info p {
    opacity: 1;
    transform: translateY(0);
}

/* 全息按鈕 (Holo Button) */
.holo-btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 45px;
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    font-family: var(--font-head);
    font-weight: bold;
    letter-spacing: 2px;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    transition: 0.3s;
    opacity: 0; /* 預設隱藏 */
    transform: translateY(10px);
}

.holo-card:hover .holo-btn {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

.btn-bg {
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: var(--primary);
    transition: 0.3s;
    z-index: -1;
}

.holo-btn:hover {
    color: #000;
    box-shadow: 0 0 15px var(--primary);
}

.holo-btn:hover .btn-bg {
    left: 0;
}

/* 邊框流光效果 */
.holo-border-glow {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 3;
}

.holo-border-glow::before, .holo-border-glow::after {
    content: '';
    position: absolute;
    background: var(--primary);
    transition: 0.3s;
}

/* 預設只顯示角落 L 型 */
.holo-border-glow::before {
    bottom: 0; right: 0; width: 20px; height: 2px;
    box-shadow: 0 -20px 0 var(--primary); /* 這裡用 shadow 模擬對角線 */
}
.holo-border-glow::after {
    bottom: 0; right: 0; width: 2px; height: 20px;
    box-shadow: -20px 0 0 var(--primary);
}

.holo-card:hover .holo-border-glow::before {
    width: 100%; /* Hover 時線條延伸 */
    box-shadow: 0 -448px 0 var(--primary); /* 延伸到頂部 */
}

/* =========================================
   FAQ Data Retrieval System (機密資料庫)
   ========================================= */

.faq-system {
    display: flex;
    gap: 40px;
    align-items: flex-start; /* 對齊頂部 */
}

/* --- 左側：問題列表 --- */
.faq-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-node {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* 序號方塊 */
.node-marker {
    font-family: var(--font-head);
    font-size: 1.2rem;
    color: #666;
    margin-right: 20px;
    border-right: 1px solid #444;
    padding-right: 20px;
    transition: 0.3s;
}

.node-content {
    flex: 1;
}

.node-label {
    font-size: 0.7rem;
    color: var(--primary);
    opacity: 0.6;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.node-text {
    font-family: var(--font-body);
    font-weight: bold;
    color: #ccc;
    font-size: 1.1rem;
    transition: 0.3s;
}

.node-arrow {
    color: var(--primary);
    opacity: 0;
    transform: translateX(-10px);
    transition: 0.3s;
}

/* Hover & Active 狀態 */
.faq-node:hover {
    background: rgba(0, 243, 255, 0.05);
    border-color: var(--primary);
}

.faq-node.active {
    background: rgba(0, 243, 255, 0.1);
    border-color: var(--primary);
    box-shadow: inset 5px 0 0 var(--primary); /* 左側亮條 */
}

.faq-node.active .node-marker { color: var(--primary); border-color: var(--primary); }
.faq-node.active .node-text { color: #fff; }
.faq-node.active .node-arrow { opacity: 1; transform: translateX(0); }

/* --- 右側：讀取終端機 --- */
.faq-readout {
    flex: 1.2;
    min-height: 300px;
    background: rgba(5, 8, 12, 0.9);
    border: 1px solid var(--primary);
    display: flex;
    flex-direction: column;
    position: relative;
}

/* 標題欄 */
.readout-header {
    background: rgba(0, 243, 255, 0.1);
    padding: 10px 20px;
    border-bottom: 1px solid rgba(0, 243, 255, 0.2);
    display: flex;
    justify-content: space-between;
    font-family: var(--font-head);
    font-size: 0.8rem;
    color: var(--primary);
}

/* 螢幕區域 */
.readout-screen {
    flex: 1;
    padding: 30px;
    position: relative;
    overflow: hidden;
    background: 
        repeating-linear-gradient(0deg, transparent 0px, transparent 1px, rgba(0, 243, 255, 0.03) 1px, rgba(0, 243, 255, 0.03) 2px);
}

#faq-answer-text {
    font-family: 'Noto Sans TC', sans-serif; /* 閱讀性較好 */
    color: #e0f0ff;
    line-height: 1.8;
    font-size: 1.1rem;
    margin: 0;
    display: inline;
}

/* 閃爍游標 */
.cursor-block {
    display: inline-block;
    width: 3px;
    height: 1.5em;
    background: var(--primary);
    vertical-align: text-bottom;
    animation: blink 1s infinite;
}

/* 底部裝飾列 */
.readout-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.decor-box {
    font-size: 0.7rem;
    color: #666;
    letter-spacing: 1px;
}

/* 裝飾圖表 */
.decor-chart {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 15px;
}

.decor-chart .bar {
    width: 4px;
    background: var(--secondary);
    animation: barJump 1s infinite;
}
.decor-chart .bar:nth-child(1) { height: 60%; animation-delay: 0.1s; }
.decor-chart .bar:nth-child(2) { height: 30%; animation-delay: 0.3s; }
.decor-chart .bar:nth-child(3) { height: 80%; animation-delay: 0.0s; }
.decor-chart .bar:nth-child(4) { height: 40%; animation-delay: 0.2s; }

@keyframes barJump {
    0%, 100% { opacity: 0.5; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.3); }
}

/* 手機版適配 */
@media (max-width: 900px) {
    .faq-system {
        flex-direction: column;
    }
    
    .faq-list {
        width: 100%;
    }
    
    .faq-readout {
        width: 100%;
        min-height: 250px;
    }

    #faq-answer-text{
      font-size: 0.9rem;
    }
}

/* =========================================
   Cyber Command Footer (高級聯絡中心)
   ========================================= */

.cyber-footer {
    position: relative;
    background: rgba(2, 4, 6, 0.8) !important; /* 底部稍微實一點 */
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 243, 255, 0.2);
    padding-top: 60px;
    overflow: hidden;
}

/* 頂部雷射裝飾線 */
.footer-deco-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    box-shadow: 0 0 15px var(--primary);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    
    /* [修改] 原本是 1.5fr 1fr，改成 1fr 1.2fr */
    /* 這樣右邊的終端機會變寬，左邊按鈕區變緊湊一點，視覺更平衡 */
    grid-template-columns: 1fr 1.2fr; 
    
    gap: 50px;
    padding: 0 20px 60px 20px;
    
    /* [新增] 讓左右兩欄「靠上對齊」，這樣我們才能用 margin 推下來 */
    align-items: start; 
}

/* --- 左側：連結控制台 --- */
.footer-title {
    font-family: var(--font-head);
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

.footer-title .icon { color: var(--primary); }

.link-grid {
    /* 刪掉原本的 display: grid ... */
    display: flex;
    flex-direction: column; /* 垂直排列 */
    gap: 20px;
    align-items: flex-start; /* 靠左對齊 */
}

/* 賽博連結卡片 (Cyber Link Card) */
.cyber-link-card {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;        /* 在手機上可以填滿 */
    max-width: 350px;   /* 在電腦上最多只到 350px，不會變成長條 */
    
    /* 改成半透明深色玻璃 */
    background: rgba(10, 15, 20, 0.4) !important; 
    
    /* 核心磨砂效果 */
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    
    /* 邊框調淡，像是一塊切割好的玻璃 */
    border: 1px solid rgba(255, 255, 255, 0.1); 
    
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* 柔和陰影 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 95% 100%, 0 100%); /* 切角 */
}

/* Hover 效果：邊框變色 + 發光 + 位移 */
.cyber-link-card:hover {
    background: rgba(0, 243, 255, 0.1) !important; /* 微微泛青色光 */
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.15); /* 光暈 */
    transform: translateX(5px); /* 輕微位移 */
    transform: translateX(10px); /* 向右滑動 */
    box-shadow: -5px 5px 20px rgba(0, 243, 255, 0.1);
}

/* 掃描光條動畫 (Hover 時觸發) */
.cyber-link-card::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: skewX(-20deg);
    transition: 0.5s;
}
.cyber-link-card:hover::before {
    left: 150%;
    transition: 0.5s;
}

.link-icon {
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--primary);
    color: var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-head);
    font-weight: bold;
    font-size: 0.9rem;
}

.link-info {
    display: flex;
    flex-direction: column;
}

.link-name {
    font-family: var(--font-head);
    color: #fff;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.link-id {
    font-size: 0.85rem;
    color: #666;
    font-family: var(--font-body);
    transition: 0.3s;
}

.cyber-link-card:hover .link-id { color: var(--primary); }

.link-deco {
    margin-left: auto; /* 推到最右邊 */
    color: #333;
    transition: 0.3s;
}
.cyber-link-card:hover .link-deco { color: var(--primary); text-shadow: 0 0 8px var(--primary); }


/* --- 右側：系統終端機 (Terminal) --- */
.system-status-panel {
    /* ...保留原本的背景、邊框、陰影樣式... */
    position: relative;
    background: var(--bg-dark);
    /* (略過背景代碼，保持原本的即可) */
    background-image: var(--panel-texture), linear-gradient(rgba(0, 243, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 243, 255, 0.05) 1px, transparent 1px);
    background-size: auto auto, 20px 20px, 20px 20px;
    border: 1px solid var(--primary-dim);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5), inset 0 0 30px rgba(0, 243, 255, 0.1), 0 0 15px var(--primary-dim);
    overflow: hidden;
    transition: all 0.4s;

    display: flex;
    flex-direction: column;
    
    /* [修改] 這裡設定終端機的高度，讓它看起來長一點，比較舒服 */
    min-height: 320px; 
}

/* [新增] 電腦版專用對齊 */
@media (min-width: 901px) {
    .system-status-panel {
        /* [關鍵] 往下推 68px，剛好對齊 Instagram 按鈕 */
        margin-top: 68px; 
    }
}

.panel-header {
    background: #111;
    padding: 8px 15px;
    font-family: var(--font-head);
    font-size: 0.8rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #333;
}

.blink-dot {
    width: 8px; height: 8px;
    background: var(--secondary); /* 綠燈 */
    border-radius: 50%;
    box-shadow: 0 0 5px var(--secondary);
    animation: blink 2s infinite;
}

.terminal-screen {
    flex: 1;
    background: rgba(0, 20, 0, 0.2); /* 微綠背景 */
    padding: 20px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    color: var(--secondary); /* 終端機綠字 */
    line-height: 1.6;
    overflow: hidden;
    position: relative;
}

/* 掃描線濾鏡 (CRT Monitor Effect) */
.terminal-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.1) 0px, rgba(0,0,0,0.1) 1px, transparent 1px, transparent 2px);
    pointer-events: none;
}

.terminal-line { opacity: 0.7; }
.active-log { 
    color: #fff; 
    text-shadow: 0 0 5px var(--secondary); 
    font-weight: bold;
    margin-top: 10px;
}

.panel-footer {
    padding: 8px 15px;
    border-top: 1px solid #333;
    display: flex;
    justify-content: space-between;
    font-family: var(--font-head);
    font-size: 0.7rem;
    color: #555;
    background: #0c0e10;
}

/* --- 底部版權條 --- */
.copyright-bar {
    border-top: 1px solid #222;
    background: #000;
    padding: 15px 40px;
    display: flex;
    justify-content: space-between;
    font-family: var(--font-head);
    font-size: 0.8rem;
    color: #444;
}

/* RWD 手機版 */
@media (max-width: 900px) {
    .footer-container {
        grid-template-columns: 1fr; /* 改成單欄 */
        gap: 30px;
    }
    
    
    .copyright-bar {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
    }
}

/* =========================================
   Clean Futurist Modal System (極簡未來感)
   ========================================= */

/* --- 1. 背景遮罩 (Overlay) --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8); /* 純淨的深黑背景 */
    backdrop-filter: blur(15px); /* 強烈的背景模糊，聚焦視窗 */
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 30px;
    animation: overlayFadeIn 0.4s ease-out;
}

/* --- 2. 主視窗 (Modal Window) --- */
.modal-window {
    position: relative;
    width: 100%;
    max-width: 900px;
    /* 磨砂玻璃質感 */
    /* background: rgba(15, 20, 30, 0.85); */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border-radius: 4px; /* 輕微圓角 */
    overflow: hidden;
    
    transform: translateY(30px);
    opacity: 0;
    animation: modalSlideUp 0.5s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}

.hud-card, .modal-window {
    background: rgba(10, 15, 20, 0.7) !important;
    backdrop-filter: blur(15px);
}

/* --- 3. 標題欄與關閉按鈕 --- */
.modal-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
}

.header-title {
    font-family: var(--font-head);
    color: #888;
    font-size: 0.85rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.modal-close {
    background: none;
    border: none;
    color: #fff;
    font-family: var(--font-head);
    font-size: 0.85rem;
    letter-spacing: 2px;
    cursor: pointer;
    padding: 5px 10px;
    transition: 0.3s;
    opacity: 0.6;
}

.modal-close:hover {
    opacity: 1;
    color: var(--primary);
    text-shadow: 0 0 10px var(--primary);
}

/* --- 4. 內容區體 (Body) --- */
.modal-body {
    padding: 0; /* 移除內距，讓圖片滿版 */
}

/* --- 5. 圖片視窗 (Viewport) --- */
.img-viewport {
    position: relative;
    width: 100%;
    height: 55vh; /* 增加高度佔比 */
    min-height: 350px;
    background: #050505;
    /* 只有一個極細微的發光邊框 */
    border-bottom: 1px solid rgba(0, 243, 255, 0.2);
    box-shadow: inset 0 -10px 20px -10px rgba(0, 243, 255, 0.1);
}

#modal-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 保持圖片原色，不做過多濾鏡 */
}

/* 文字信息區 */
.info-section {
    padding: 30px 30px 20px 30px;
    text-align: left;
}

#modal-title {
    font-family: var(--font-head);
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 15px;
    font-weight: 500;
    letter-spacing: 1px;
}

#modal-desc {
    color: #aaa;
    line-height: 1.8;
    font-size: 1.05rem;
    max-width: 800px;
}

/* --- 6. 控制按鈕區 (Controls) - 極簡設計 --- */
.modal-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px 30px 30px; /* 上 右 下 左 */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* 新的按鈕樣式：純文字 + 底部光條滑動效果 */
.ctrl-btn {
    background: transparent;
    border: none;
    color: #888; /* 預設灰色 */
    padding: 10px 5px;
    font-family: var(--font-head);
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 3px;
    cursor: pointer;
    transition: color 0.3s;
    position: relative;
}

/* 按鈕底部光條 */
.ctrl-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%; /* 預設寬度為 0 */
    height: 2px;
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary);
    transition: width 0.3s ease-in-out;
}

/* Hover 效果 */
.ctrl-btn:hover {
    color: #fff;
}

.ctrl-btn:hover::after {
    width: 100%; /* Hover 時滑動到 100% */
}

/* 計數器 */
.counter-value {
    font-family: var(--font-head);
    color: #666;
    font-size: 1rem;
    letter-spacing: 2px;
}

/* --- 動畫 Keyframes --- */
@keyframes overlayFadeIn {
    from { opacity: 0; } to { opacity: 1; }
}

@keyframes modalSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* --- 手機版適配 --- */
@media (max-width: 768px) {
    .modal-window { width: 100%; height: 100%; max-width: none; border-radius: 0;}
    .modal-header-bar, .info-section, .modal-controls { padding-left: 20px; padding-right: 20px; }
    .img-viewport { height: 40vh; }
    #modal-title { font-size: 1.5rem; }
}

/* Animations */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }

/* Mobile */
@media (max-width: 768px) {
    .glitch { font-size: 2.5rem; }
    .nav-links { display: none; position: absolute; top: 70px; left: 0; width: 100%; background: #000; flex-direction: column; padding: 20px; text-align: center; border-bottom: 1px solid var(--primary);}
    .nav-links.active { display: flex; }
    .nav-mobile-btn { display: block; }
}

/* --- Hero Section Layout (左圖右文優化版) --- */
.hero-content {
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 關鍵修改：原本是 80px，改成 150px (或更大) */
    /* 這會直接把照片和文字推開 */
    gap: 300px;                 
    
    max-width: 1400px;         /* 建議稍微放寬最大寬度 (原本 1200px)，以免螢幕夠大但內容還是縮在一起 */
    width: 90%;
    z-index: 2;
    padding-top: 20px;
}

/* 文字區塊優化 */
.hero-text-area {
    flex: 1;                   /* 佔據剩餘空間 */
    min-width: 300px;
    text-align: left;          /* 重要：左圖右文時，文字要靠左才整齊 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 優化文字排版與實驗室名稱 */
.hero-desc {
    line-height: 1.8;
    color: #aaa;
    font-size: 1.15rem;
    margin-top: 20px;
}

.highlight-lab {
    display: inline-block;
    margin-top: 8px;
    color: var(--primary);     /* 使用你的主題青色 */
    font-weight: 500;
    font-family: var(--font-head); /* 改用科技字體顯示實驗室名稱 */
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(0, 243, 255, 0.3); /* 下底線裝飾 */
    padding-bottom: 2px;
}


/* 照片區塊 (自適應設定) */
.hero-img-area {
    flex: 0 0 auto;            /* 不要讓它被壓縮 */
    display: flex;
    justify-content: center;
    align-items: center;
}


.profile-frame:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.2);
}

/* --- Tech Profile Frame (科技感相框) --- */
.profile-frame {
    position: relative;
    
    /* [修改 1] 調整成橫向比例 */
    /* 因為你的照片是橫的，高度設 400px 太多了，會產生上下黑邊 */
    /* 建議改成寬 360px, 高 270px (約 4:3 比例) */
    width: 432px;   /* 360 × 1.2 */
    height: 324px;  /* 270 × 1.2 */

    
    /* [修改 2] 移除 padding */
    /* 設為 0，讓藍色框線直接貼在照片邊緣 */
    padding: 0;
    
    max-width: 100%;
    
    border: 1px solid rgba(0, 243, 255, 0.3);
    background: rgba(0, 20, 40, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- Profile Canvas Container (WebGL 畫布容器) --- */
#profile-canvas-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: transparent; /* [修改] 確保完全透明 */
    z-index: 10;
}

#profile-canvas-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    /* 確保 Canvas 本身沒有濾鏡 */
    filter: none; 
}

/* 確保外框沒有多餘的背景色 */
.profile-frame {
    position: relative;
    border-top: 1px solid rgba(0, 255, 65, 0.5); /* 邊框亮一點 */
    border-bottom: 1px solid rgba(0, 255, 65, 0.5);
    background: transparent; /* [修改] 移除半透明底色 */
    box-shadow: 0 0 30px rgba(0, 255, 65, 0.1); /* 微微發光就好 */
}


/* --- 輪播容器 --- */
.carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; /* 防止圖片溢出 */
}

/* --- 圖片通用設定 --- */
.carousel-img {
    /* [重點] 強制絕對定位，讓兩張圖疊在一起，而不是上下排列 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 確保圖片完整顯示並置中 */
    object-fit: contain;
    object-position: center;
    
    /* 預設透明度為 0 (隱藏) */
    opacity: 0;
    
    /* 設定淡入淡出的轉場時間為 1 秒 */
    transition: opacity 1s ease-in-out;
    
    /* 保留之前的濾鏡 */
    filter: brightness(0.95) contrast(1.05);
}

/* --- 當圖片擁有 active class 時，變成不透明 (顯示) --- */
.carousel-img.active {
    opacity: 1;
    z-index: 2; /* 確保顯示在最上層 */
}

/* --- 裝飾細節 (角落亮點) --- */
.corner-tl, .corner-br {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary);
    box-shadow: 0 0 10px var(--primary);
}

.corner-tl {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

.corner-br {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}

/* --- 掃描線動畫 --- */
.scanner-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary);
    opacity: 0.6;
    animation: scan 3s linear infinite;
    pointer-events: none; /* 讓滑鼠可以穿透 */
    z-index: 5;
}

@keyframes scan {
    0% { top: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* 監控畫面的十字準心 */
.cam-crosshair {
    position: absolute;
    width: 20px; height: 20px;
    border: 2px solid var(--secondary);
    z-index: 10;
}
.cam-crosshair.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.cam-crosshair.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.cam-crosshair.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.cam-crosshair.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

/* 掃描線動畫 */
.cam-scanline {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 255, 65, 0.1) 51%, transparent 51%);
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 5;
}

/* --- 右側：數據終端機 (Interface) --- */
.terminal-interface {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    font-family: 'Courier New', monospace; /* 終端機字體 */
}

.term-header-bar {
    border-bottom: 2px solid var(--primary);
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    color: var(--primary);
    font-weight: bold;
    font-family: var(--font-head);
    letter-spacing: 2px;
}

.status-ok { color: var(--secondary); animation: blink 2s infinite; }

.term-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.prompt {
    color: #666;
    font-size: 0.9rem;
    margin-right: 10px;
}

/* 名字 Glitch 效果 */
.glitch-text {
    font-family: var(--font-head);
    font-size: 3.5rem;
    color: #fff;
    margin: 5px 0;
    text-transform: uppercase;
    text-shadow: 2px 2px 0px var(--primary);
    display: inline-block;
}

/* 職稱 */
.role-container {
    display: inline-block;
    font-size: 1.5rem;
    color: var(--secondary); /* 綠色 */
    font-weight: bold;
    font-family: var(--font-body);
}

.term-divider {
    height: 1px;
    background: repeating-linear-gradient(90deg, #333 0, #333 5px, transparent 5px, transparent 10px);
    margin: 10px 0;
}

/* 數據網格 */
.term-data-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.data-line {
    font-size: 1.1rem;
    color: #ccc;
    display: flex;
    align-items: baseline;
}

.data-key {
    color: var(--primary);
    width: 140px; /* 固定標籤寬度 */
    font-weight: bold;
    font-size: 0.9rem;
    opacity: 0.8;
}

.data-val {
    color: #e0e0e0;
    text-shadow: 0 0 5px rgba(255,255,255,0.2);
}

/* 實驗室區塊 */
.lab-box {
    border-left: 3px solid var(--secondary);
    padding-left: 15px;
    margin-top: 10px;
    background: linear-gradient(90deg, rgba(0,255,65,0.05), transparent);
}

.lab-title {
    font-size: 0.9rem;
    color: var(--secondary);
    margin-bottom: 5px;
}

.lab-name {
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    line-height: 1.4;
}

/* =========================================
   RWD 行動裝置專用修正 (Mobile Fixes)
   ========================================= */
@media (max-width: 960px) {

    .section-title{

      font-size: 1.5rem;
    }

    /* --- 1. 導航列修正 (Logo 太大問題) --- */
    .hud-nav {
        padding: 0 20px;        /* 縮小左右內距 */
        height: 60px;           /*稍微減小高度 */
    }
    
    .nav-brand { font-size: 0.8rem; }
    .cmd-prompt { display: none; } /* 手機版隱藏提示符，太長了 */
    #nav-glitch-text { min-width: auto; }

    /* --- 2. Hero 區域排版 (置中與間距) --- */
    .hero-section {
        padding-top: 100px;
        height: auto;
    }

    .terminal-wrapper {
        flex-direction: column; /* 改垂直排列 */
        gap: 30px;
        padding: 15px;
        width: 100%;
        border: none; /* 手機版移除大框，避免擁擠 */
        background: transparent;
        box-shadow: none;
    }
    
    .terminal-wrapper::before { display: none; } /* 移除角落裝飾 */

    .terminal-cam-feed {
        flex: auto;
        width: 100%;
        max-width: 360px; /* 限制照片最大寬度 */
        margin: 0 auto;
    }
    
    .hero-content {
        flex-direction: column; /* 垂直排列 */
        align-items: center;    /* [修正] 子元素水平置中 */
        justify-content: center;
        text-align: center;     /* 文字內容置中 */
        font-size: 0.95rem;
        gap: 40px;              /* 圖文間距 */
        padding-top: 100px;     /* 避開導航列 */
        width: 100%;            
        max-width: 100%;
        margin: 0;
    }
    .term-status{
        margin-left: 15px;  
        text-align: right;
    }

    /* --- 3. 照片區域修正 (強制置中) --- */
    .hero-img-area {
        width: 80%;
        display: flex;
        justify-content: center; /* [修正] 圖片容器置中 */
        align-items: center;
        margin: 0 auto;
    }

    .profile-frame {
        /* 手機版照片尺寸：4:3 比例 */
        width: 320px;
        height: 240px;
        
        /* [修正] 強制 margin auto 確保置中 */
        margin: 0 auto; 
        
        /* 防止小螢幕破版 */
        max-width: 90vw; 
        height: auto;    /* 配合 max-width 自動調整高度 */
        aspect-ratio: 4/3; /* 鎖定比例 */
    }

    .terminal-interface {
        padding-left: 0;
        text-align: left; /* 手機版保持靠左，像終端機 */
    }
    
    .glitch-text { font-size: 2.2rem; }
    .role-container { font-size: 1.2rem; }
    
    .data-line {
        flex-direction: column; /* 標籤和數值換行 */
        margin-bottom: 10px;
    }
    .data-key { width: 100%; margin-bottom: 2px; }
    

    /* --- 5. Footer 聯絡方式修正 (超出畫面問題) --- */
    .social-links {
        display: flex;
        flex-direction: column; /* [修正] 改為垂直堆疊 */
        align-items: center;    /* 置中對齊 */
        gap: 15px;              /* 按鈕間距 */
        width: 100%;
    }

    .hud-btn {
        width: 80%;             /* [修正] 設定寬度為螢幕的 80% */
        max-width: 300px;       /* 最大不超過 300px */
        display: block;         /* 確保是區塊 */
        text-align: center;     /* 文字置中 */
        margin: 0 auto;         /* 按鈕置中 */
        padding: 12px 0;        /* 增加點擊區域 */
    }
    
    /* 調整 Footer 內距 */
    footer {
        padding: 40px 20px;
        width: 100%;
        overflow-x: hidden;     /* 防止任何橫向卷軸 */
    }

    .scroll-indicator {
        display: none;
    }
}

/* =========================================
   Quantum Skill Cores (量子技能核心 - RWD & Fix 版)
   ========================================= */

.quantum-grid {
    display: grid;
    /* 電腦版：自動填滿，每張卡片至少 280px */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    padding-bottom: 40px;
}

.quantum-card {
    position: relative;
    height: 340px; /* 稍微加高，讓內容不擁擠 */
    background: rgba(5, 8, 12, 0.4) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    cursor: pointer;
    transform-style: preserve-3d;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* 邊框流光 (保持不變) */
.card-border {
    position: absolute; inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
    /* -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); */
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
}

.quantum-card:hover .card-border {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow: 0 0 20px var(--primary);
}

.card-content {
    position: absolute; inset: 2px;
    background: rgba(0, 0, 0, 0.1) !important;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    overflow: hidden; /* 關鍵：內容不能超出這裡 */
}

/* --- 核心反應爐 (The Reactor) --- */
.reactor-container {
    position: relative;
    width: 140px; height: 140px;
    margin-bottom: 20px;
    display: flex; justify-content: center; align-items: center;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
}

/* Hover 時：反應爐縮小並移到右上角 (狀態燈模式) */
.quantum-card:hover .reactor-container {
    transform: scale(0.4);
    /* 使用 absolute 定位移動，避免影響其他元素佈局 */
    position: absolute;
    top: -20px;
    right: -20px;
    margin: 0;
}

.reactor-ring {
    width: 100%; height: 100%;
    transform: rotate(-90deg);
}

.bg-ring {
    fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 4;
}

.progress-ring {
    fill: none; 
    stroke: var(--color); 
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 283; /* 2 * PI * 45 */
    stroke-dashoffset: 283;
    animation: fillProgress 1.5s 0.5s ease-out forwards;
    filter: drop-shadow(0 0 8px var(--color));
}

@keyframes fillProgress {
    to { stroke-dashoffset: calc(283 - (283 * var(--percent) / 100)); }
}

/* 文字顯示核心修正 */
.reactor-icon, .reactor-level {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    transition: 0.3s;
    width: 100%;
}

.reactor-icon {
    font-family: var(--font-head);
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    opacity: 1;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* [修正] LV 文字顯示位置 */
.reactor-level {
    font-family: 'Orbitron', monospace;
    color: var(--primary);
    
    /* [修改] 字體改小，不然單字會塞不下 */
    font-size: 1.1rem;   /* 原本是 1.8rem */
    
    /* [修改] 字距不用太寬，稍微緊湊一點比較帥 */
    letter-spacing: 1px; 
    
    font-weight: bold;
    opacity: 0; 
    transform: translate(-50%, -50%) scale(0.5); 
    text-shadow: 0 0 10px var(--primary);
}

/* Hover 時：文字互換 */
.quantum-card:hover .reactor-icon {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
}

.quantum-card:hover .reactor-level {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    color: #fff; /* 縮小後變白字比較清楚 */
}


/* --- 文字資訊 (Title) --- */
.skill-info {
    text-align: center;
    transition: 0.5s;
    z-index: 5;
    position: relative;
}

/* Hover 時：標題淡出，讓位給代碼 */
.quantum-card:hover .skill-info {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.skill-info h3 {
    margin: 0;
    font-family: var(--font-head);
    font-size: 1.6rem;
    color: #fff;
    letter-spacing: 1px;
}

.skill-sub {
    color: #888;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-top: 5px;
}

/* --- 代碼層 (Code Layer) --- */
.code-layer {
    position: absolute;
    inset: 0;
    padding: 40px 20px 20px 20px;
    background: rgba(0, 0, 0, 0.95); /* 深黑背景 */
    display: flex;
    align-items: center; 
    justify-content: flex-start;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
    z-index: 1; /* 在最底層 */
}

.quantum-card:hover .code-layer {
    opacity: 1;
}

/* 代碼樣式 */
.code-typewriter {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem; /* 字體縮小一點以容納更多內容 */
    color: var(--primary);
    text-align: left;
    white-space: pre-wrap;
    line-height: 1.6;
    text-shadow: 0 0 2px var(--primary);
    width: 100%;
    margin: 0;
    
    /* 遮罩動畫 */
    mask-image: linear-gradient(to right, black 50%, transparent 50%);
    mask-size: 200% 100%;
    mask-position: 100% 0;
    transition: mask-position 2s steps(40);
}

.quantum-card:hover .code-typewriter {
    mask-position: 0 0;
}

/* 不同語言的高亮顏色 */
.code-typewriter[data-lang="python"] { color: #00ff41; text-shadow: 0 0 5px #00ff41; }
.code-typewriter[data-lang="js"] { color: #00f3ff; text-shadow: 0 0 5px #00f3ff; }
.code-typewriter[data-lang="cpp"] { color: #ffaa00; text-shadow: 0 0 5px #ffaa00; }
.code-typewriter[data-lang="lua"] { color: #ff0055; text-shadow: 0 0 5px #ff0055; }


/* =========================================
   Skills RWD (手機版響應式設計)
   ========================================= */
@media (max-width: 900px) {
    
    .section-container {
        padding: 60px 5%; /* 縮小兩側留白 */
    }

    .quantum-grid {
        grid-template-columns: 1fr; /* 強制單欄 */
        gap: 30px;
    }

    .quantum-card {
        height: 280px; /* 手機版卡片不用那麼高 */
        /* 手機版移除 Tilt 效果 (JS 會處理，但 CSS 也要確保佈局正常) */
    }

    /* 手機版：反應爐稍微縮小 */
    .reactor-container {
        width: 120px; height: 120px;
    }
    
    .reactor-icon { font-size: 1.8rem; }
    
    /* 手機版：Hover 效果調整 (因為手機沒有 Hover) */
    /* 我們可以選擇讓它點擊後顯示代碼，或者保持靜態展示 */
    /* 這裡保持預設樣式，確保乾淨 */
    
    .skill-info h3 { font-size: 1.4rem; }
    
    /* 手機版隱藏代碼層，因為螢幕太小看代碼很痛苦，保留帥氣的反應爐即可 */
    /* 或者你可以選擇讓它點擊顯示 */
    .code-layer {
        display: none; 
    }
    
    /* 手機版不需要 Hover 變形，保持原狀比較好看 */
    .quantum-card:hover .reactor-container {
        transform: none;
        position: relative;
        top: auto; right: auto;
    }
    
    .quantum-card:hover .skill-info {
        opacity: 1;
        transform: none;
    }
}


/* =========================================
   Hyperspace Warp Overlay (超光速傳輸遮罩)
   ========================================= */
.warp-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; /* 蓋在所有東西上面 */
    background: rgba(0, 5, 10, 0.0); /* 預設透明 */
    pointer-events: none; /* 讓滑鼠可以穿透 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* 傳輸時的掃描光條 */
.scan-bar {
    width: 100%;
    height: 2px;
    background: #fff;
    box-shadow: 0 0 20px #00f3ff, 0 0 40px #00f3ff; /* 強烈的青色光暈 */
    transform: scaleX(0); /* 預設縮小 */
    opacity: 0;
}

/* 傳輸時啟用的 Glitch 效果 Class */
body.is-warping {
    overflow: hidden; /* 禁止手動滾動 */
}

/* 讓整個網頁內容產生色散殘影 (Chromatic Aberration) */
body.is-warping #three-container, 
body.is-warping .section-container {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" values="1 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0" /></filter></svg>#filter');
    /* 這裡用簡單的 CSS 模擬晃動，JS 會做更強的 */
    animation: contentShake 0.5s linear infinite;
}

@keyframes contentShake {
    0% { transform: translate(2px, 1px); filter: blur(0px); }
    25% { transform: translate(-1px, -2px); filter: blur(1px); }
    50% { transform: translate(-3px, 0px); filter: blur(0px); }
    75% { transform: translate(0px, 2px); filter: blur(2px); }
    100% { transform: translate(1px, -1px); filter: blur(0px); }
}

/* =========================================
   Project Gate Transition (安全閘門轉場)
   ========================================= */

#gate-transition {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10000; /* 最高層級 */
    pointer-events: none; /* 預設不擋滑鼠 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 閘門面板 (上下兩片) */
.gate-panel {
    position: absolute;
    left: 0;
    width: 100%;
    height: 51%; /* 稍微重疊以免有縫隙 */
    background: #05070a; /* 深色金屬黑 */
    border-top: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
    transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1); /* 重機械感的緩動 */
    z-index: 1;
    overflow: hidden;
}

.gate-top {
    top: 0;
    transform: translateY(-100%); /* 預設藏在上面 */
    border-bottom: 3px solid var(--primary);
}

.gate-bottom {
    bottom: 0;
    transform: translateY(100%); /* 預設藏在下面 */
    border-top: 3px solid var(--primary);
}

/* 啟動狀態：閘門閉合 */
body.gate-active #gate-transition {
    pointer-events: all; /* 阻擋操作 */
}

body.gate-active .gate-top,
body.gate-active .gate-bottom {
    transform: translateY(0);
}

/* 閘門上的裝飾網格 */
.gate-grid {
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px),
        linear-gradient(0deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.5;
}

/* 文字裝飾 */
.gate-warning, .gate-status {
    position: absolute;
    font-family: var(--font-head);
    font-size: 0.8rem;
    color: var(--primary);
    letter-spacing: 3px;
    padding: 20px;
    width: 100%;
    text-align: center;
    text-shadow: 0 0 10px var(--primary);
}

.gate-top .gate-warning { bottom: 10px; }
.gate-bottom .gate-status { top: 10px; }

.blink-warning { animation: blink 0.5s infinite; color: #fff; }

/* --- 中央鎖定裝置 (Core Lock) --- */
.gate-lock {
    position: relative;
    width: 120px;
    height: 120px;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* 預設隱藏 */
    transform: scale(0);
    transition: opacity 0.2s, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

body.gate-active .gate-lock {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.3s; /* 等閘門關好再出現 */
}

/* 旋轉外環 */
.lock-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid transparent;
}

.lock-ring.outer {
    width: 100%; height: 100%;
    border-top: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    animation: spin 2s linear infinite;
    box-shadow: 0 0 15px var(--primary);
}

.lock-ring.inner {
    width: 70%; height: 70%;
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
    animation: spin-reverse 1.5s linear infinite;
}

.lock-core {
    font-family: var(--font-head);
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 0.9rem;
    text-shadow: 0 0 5px #fff;
}

/* 掃描雷達 */
.lock-scanner {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 50%;
    background: linear-gradient(180deg, transparent, rgba(0, 243, 255, 0.5));
    animation: scan 1s linear infinite;
    opacity: 0.3;
}

@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes spin-reverse { 100% { transform: rotate(-360deg); } }

/* =========================================
   Quantum Memory Interface (量子記憶讀取介面 - 頂尖藍色版)
   ========================================= */

/* 背景遮罩：深藍色星空感 */
.modal-overlay.memory-theme {
    background: rgba(2, 4, 10, 0.92);
    backdrop-filter: blur(15px); /* 強力磨砂玻璃 */
}

/* 主視窗：高科技能量場 */
.memory-window {
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 1000px;
    /* 深色金屬背景搭配藍色光暈邊框 */
    background: linear-gradient(135deg, #050a14 0%, #02040a 100%);
    border: 1px solid rgba(0, 243, 255, 0.3);
    box-shadow: 
        0 0 30px rgba(0, 243, 255, 0.1),
        inset 0 0 20px rgba(0, 243, 255, 0.05);
    position: relative;
    overflow: hidden;
    /* 初始狀態：縮小且透明，由 JS 控制展開 */
    transform: scale(0.8);
    opacity: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* 用於動畫 */
}

/* 頂部數據條 */
.memory-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    background: rgba(0, 243, 255, 0.05);
    border-bottom: 1px solid rgba(0, 243, 255, 0.2);
    font-family: var(--font-head);
    color: var(--primary); /* 藍色 */
    letter-spacing: 2px;
    font-size: 0.8rem;
    position: relative;
}

/* 頂部裝飾光條 */
.memory-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 30%; /* 初始長度 */
    height: 2px;
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary);
    transition: width 1s ease-out;
}
/* 打開時延伸 */
.memory-window.active .memory-header::after { width: 100%; }

.memory-close {
    background: transparent;
    border: 1px solid rgba(0, 243, 255, 0.5);
    color: var(--primary);
    padding: 5px 15px;
    cursor: pointer;
    font-family: var(--font-head);
    font-weight: bold;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

.memory-close:hover {
    background: rgba(0, 243, 255, 0.1);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.3);
    text-shadow: 0 0 5px var(--primary);
}

/* 內容佈局 */
.memory-body {
    display: flex;
    height: 550px; /* 稍微加高 */
    position: relative;
}

/* 左側：影像區 */
.memory-visual {
    flex: 1.6;
    position: relative;
    border-right: 1px solid rgba(0, 243, 255, 0.2);
    overflow: hidden;
    background: #020305;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 照片本體：原色顯示，初始隱藏 */
#memory-img {
    width: auto;
    height: auto;
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    /* [重要] 移除所有濾鏡，保留原色 */
    filter: none; 
    opacity: 0;
    transform: scale(1.1); /* 初始稍微放大 */
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 2;
}

/* 照片浮現後的狀態 */
.memory-window.active #memory-img {
    opacity: 1;
    transform: scale(1);
}

/* 掃描雷射：改成藍色光網格 */
.scan-laser {
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(transparent 95%, rgba(0, 243, 255, 0.3) 100%),
        linear-gradient(90deg, transparent 95%, rgba(0, 243, 255, 0.3) 100%);
    background-size: 50px 50px;
    animation: gridMove 20s linear infinite;
    opacity: 0.2;
    z-index: 1;
    pointer-events: none;
}
@keyframes gridMove { from { background-position: 0 0; } to { background-position: 500px 500px; } }

/* 雜訊層：改成藍色粒子 */
.noise-layer {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E");
    opacity: 0.15;
    mix-blend-mode: screen;
    z-index: 3;
    pointer-events: none;
}

/* 右側：數據區 */
.memory-data {
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
    position: relative;
    /* 數據區背景紋理 */
    background: 
        repeating-linear-gradient(45deg, rgba(0, 243, 255, 0.02) 0px, rgba(0, 243, 255, 0.02) 2px, transparent 2px, transparent 10px);
}

/* 標題：加入藍色光暈和解碼動畫的準備 */
#memory-title {
    font-family: var(--font-head);
    font-size: 2.2rem;
    color: #fff;
    margin: 0;
    text-shadow: 0 0 15px rgba(0, 243, 255, 0.5);
    opacity: 0; /* JS 控制 */
    transform: translateY(20px);
}

.data-divider {
    height: 2px;
    width: 0; /* 初始寬度為 0 */
    background: linear-gradient(90deg, var(--primary), transparent);
    margin: 25px 0;
    transition: width 0.8s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 0 10px var(--primary);
}
.memory-window.active .data-divider { width: 80px; }

.data-meta {
    font-family: var(--font-head);
    color: #889;
    font-size: 0.85rem;
    margin-bottom: 35px;
    display: flex;
    gap: 30px;
    opacity: 0;
    transform: translateY(20px);
}
.data-meta b { color: var(--primary); text-shadow: 0 0 5px var(--primary); }

#memory-desc {
    color: #cce;
    line-height: 1.8;
    font-size: 1.05rem;
    opacity: 0;
    transform: translateY(20px);
}

/* 裝飾代碼雨：改成藍色 */
.code-rain {
    margin-top: auto;
    font-family: 'Courier New', monospace;
    color: rgba(0, 243, 255, 0.4);
    font-size: 0.75rem;
    word-break: break-all;
    text-shadow: 0 0 2px var(--primary);
    opacity: 0.6;
    mask-image: linear-gradient(to bottom, transparent, black 50%); /* 上方漸隱 */
}

/* =========================================
   Memory Modal RWD (手機版完美適配)
   ========================================= */
@media (max-width: 900px) {
    
    /* 1. 視窗本體：改為全螢幕模式，移除圓角與外陰影 */
    .memory-window {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border: none;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    /* 2. 頂部數據條：縮小字體，增加按鈕點擊範圍 */
    .memory-header {
        padding: 10px 15px;
        flex-shrink: 0; /* 防止被壓縮 */
    }
    
    .mem-id { font-size: 0.7rem; }
    .mem-status { display: none; } /* 手機版隱藏狀態文字，節省空間 */
    
    .memory-close {
        padding: 8px 15px;
        font-size: 0.9rem;
        background: rgba(0, 243, 255, 0.1); /* 手機版直接給背景色，提示可點擊 */
    }

    /* 3. 內容佈局：改為垂直排列 */
    .memory-body {
        flex-direction: column;
        height: auto;
        flex: 1; /* 佔滿剩餘空間 */
        overflow-y: auto; /* 允許內容過長時捲動 */
    }

    /* 4. 左側影像區：高度固定，作為頂部展示 */
    .memory-visual {
        width: 100%;
        height: 250px; /* 固定高度，不要太高 */
        flex: none; /* 不要伸縮 */
        border-right: none;
        border-bottom: 1px solid rgba(0, 243, 255, 0.2);
        background: #000;
    }

    #memory-img {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
    }

    /* 5. 右側數據區：內距縮小，文字調整 */
    .memory-data {
        padding: 25px 20px;
        flex: 1; /* 佔滿下方空間 */
        background: 
            repeating-linear-gradient(45deg, rgba(0, 243, 255, 0.02) 0px, rgba(0, 243, 255, 0.02) 2px, transparent 2px, transparent 8px);
    }

    #memory-title {
        font-size: 1.6rem; /* 縮小標題 */
        margin-bottom: 5px;
        line-height: 1.2;
    }

    .data-divider {
        margin: 15px 0;
        width: 60px;
    }

    .data-meta {
        flex-direction: column; /* 資訊改為垂直排列 */
        gap: 5px;
        margin-bottom: 20px;
        font-size: 0.8rem;
    }

    #memory-desc {
        font-size: 0.95rem;
        line-height: 1.6;
        color: #ddd; /* 提高對比度，手機在戶外看更清楚 */
    }

    /* 代碼雨：手機版移到底部邊緣，稍微縮小 */
    .code-rain {
        margin-top: 30px;
        font-size: 0.6rem;
        opacity: 0.4;
    }
}

/* =========================================
   Reality Distortion Engine (現實扭曲引擎)
   ========================================= */

/* --- 1. 啟動按鈕 (右下角反應爐) --- */
#reality-engine-wrapper {
    position: fixed;
    bottom: 40px; right: 40px;
    z-index: 13000; /* 最高，確保隨時能按到 */
}

.reactor-btn {
    position: relative;
    width: 80px;
    height: 80px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s;
}

.reactor-btn:hover {
    transform: scale(1.1);
}

/* 旋轉外環 */
.reactor-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px dashed var(--primary);
    border-radius: 50%;
    animation: reactorSpin 10s linear infinite;
    box-shadow: 0 0 15px var(--primary);
}

/* 核心能量 */
.reactor-core {
    position: absolute;
    width: 40%;
    height: 40%;
    background: var(--secondary); /* 綠色核心 */
    border-radius: 50%;
    box-shadow: 0 0 20px var(--secondary), inset 0 0 10px #fff;
    animation: reactorPulse 2s ease-in-out infinite;
}

/* 文字標籤 */
.reactor-label {
    position: absolute;
    bottom: -25px;
    font-family: var(--font-head);
    font-size: 0.7rem;
    color: var(--primary);
    letter-spacing: 2px;
    font-weight: bold;
    text-shadow: 0 0 5px var(--primary);
}

@keyframes reactorSpin { 100% { transform: rotate(360deg); } }
@keyframes reactorPulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.2); opacity: 1; } }

/* --- 2. 啟動狀態：網頁 3D 變形 --- */
body.reality-active {
    overflow: hidden; /* 禁止滾動 */
    perspective: 1500px; /* 開啟 3D 透視 */
    background: #000;
}

/* 讓網頁內容縮小並傾斜 */
body.reality-active nav,
body.reality-active section, 
body.reality-active canvas {
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.5s;
    transform: translateZ(-200px) scale(0.9); /* 向後退 */
    filter: brightness(0.4) blur(1px); /* 變暗變模糊，凸顯 HUD */
    pointer-events: none; /* 暫時禁止點擊內容 */
}

/* --- 3. 戰術 HUD 介面 --- */
#tactical-hud {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 12001; /* 比子彈高一點，準心不能被子彈擋住 */
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    display: none;
}

body.reality-active #tactical-hud {
    display: block;
    opacity: 1;
    pointer-events: auto; /* 開啟互動 */
    cursor: none; /* 隱藏原生滑鼠 */
}

/* HUD 網格濾鏡 */
.hud-overlay {
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
}

/* 四周邊框 */
.hud-frame {
    position: absolute;
    inset: 20px;
    border: 1px solid rgba(0, 243, 255, 0.3);
    clip-path: polygon(
        0 0, 100px 0, 120px 20px, calc(100% - 120px) 20px, calc(100% - 100px) 0, 100% 0,
        100% 100%, calc(100% - 100px) 100%, calc(100% - 120px) calc(100% - 20px), 120px calc(100% - 20px), 100px 100%, 0 100%
    );
    pointer-events: none;
}

/* --- 4. 自定義戰術游標 --- */
#hud-cursor {
    position: fixed; /* 改用 fixed，相對於視窗 */
    z-index: 12002;
    transition: none !important; /* 絕對零延遲 */
    /* 移除原本的 transform: translate(-50%, -50%) 因為我們會用 JS 計算中心點 */
    pointer-events: none;
}

.cursor-center {
    position: absolute;
    top: 50%; left: 50%;
    width: 4px; height: 4px;
    background: var(--secondary);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px var(--secondary);
    transition: 0.1s;
}
/* 開火時準心擴散 */
body.firing .cursor-center {
    transform: translate(-50%, -50%) scale(0.5);
    background: #fff;
}

.cursor-ring {
    position: absolute;
    inset: 0;
    border: 1px solid var(--primary);
    border-radius: 50%;
    animation: cursorSpin 2s linear infinite;
    opacity: 0.6;
    transition: 0.1s;
}

/* 開火時外圈放大 */
body.firing .cursor-ring {
    transform: scale(1.5);
    border-color: #ff0055; /* 紅色警戒 */
}

@keyframes cursorSpin { 100% { transform: rotate(360deg); } }

/* --- 5. 目標鎖定框 (Target Box) --- */
#target-box {
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 0;
    border: 1px solid rgba(0, 255, 65, 0.5);
    background: rgba(0, 255, 65, 0.05);
    pointer-events: none;
    /* 這裡保留一點點 transition 讓鎖定框有種「追蹤」的感覺，跟游標不同 */
    transition: all 0.1s ease-out; 
    z-index: 11001;
    display: none;
}

body.firing #target-box {
    border-color: #ff0055;
    background: rgba(255, 0, 85, 0.1);
    box-shadow: 0 0 20px #ff0055;
}

/* 角落加強 */
#target-box .corner {
    position: absolute;
    width: 10px; height: 10px;
    border: 2px solid var(--secondary);
    box-shadow: 0 0 5px var(--secondary);
}
#target-box .tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
#target-box .tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
#target-box .bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
#target-box .br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* 數據顯示 */
.target-data {
    position: absolute;
    top: -25px; left: 0;
    background: var(--secondary);
    color: #000;
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 5px;
    white-space: nowrap;
    display: flex; gap: 10px;
    box-shadow: 0 0 10px var(--secondary);
}

/* --- 6. 戰術特效層 (VFX) --- */
#vfx-layer {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 12000;
    overflow: hidden;
}

#vfx-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh; /* 強制滿版 */
    pointer-events: none; /* 穿透 */
    z-index: 12000; /* 很高，確保蓋過所有內容 */
}


/* 子彈/雷射光束 */
.projectile {
    position: absolute;
    width: 40px; height: 4px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 10px #00f3ff, 0 0 20px #00f3ff;
    transform-origin: center;
}

/* 爆炸粒子 */
.particle {
    position: absolute;
    width: 4px; height: 4px;
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary);
    border-radius: 50%;
}

/* --- 7. 毀滅動畫 (The Destruction) --- */
/* 被打中的元素會套用這個 Class */
.element-destroyed {
    animation: digitalCrumble 0.4s forwards ease-out !important;
    pointer-events: none !important;
    /* 加入紅色閃光 */
    box-shadow: 0 0 20px #ff0055 !important;
}

@keyframes digitalCrumble {
    0% {
        transform: scale(1) translate(0, 0) skew(0deg);
        filter: brightness(1) hue-rotate(0deg);
        opacity: 1;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    20% {
        transform: scale(1.1) translate(-5px, 5px) skew(10deg);
        filter: brightness(2) hue-rotate(90deg) invert(1); /* 瞬間高亮反色 */
        opacity: 1;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    50% {
        transform: scale(0.9) translate(5px, -5px) skew(-20deg);
        filter: brightness(0.5) hue-rotate(180deg) blur(2px);
        opacity: 0.8;
        /* 碎裂感 */
        clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);
    }
    100% {
        transform: scale(0) translate(0, 50px);
        filter: brightness(0) blur(10px);
        opacity: 0;
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); /* 縮成一點 */
    }
}

/* 畫面震動 Class (加在 body 上) */
body.shake {
    animation: screenShake 0.2s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes screenShake {
    10%, 90% { transform: translate3d(-2px, -1px, 0); }
    20%, 80% { transform: translate3d(3px, 2px, 0); }
    30%, 50%, 70% { transform: translate3d(-5px, -3px, 0); }
    40%, 60% { transform: translate3d(5px, 3px, 0); }
}

/* RWD */
@media (max-width: 900px) {
    #reality-engine-wrapper { display: none; }
}

/* =========================================
   Galaxy Terminal (深空互動終端)
   ========================================= */

#galaxy-terminal {
    position: relative;
    width: 100%;
    height: 80vh; /* 佔據螢幕 80% 高度，作為巨大的 Footer */
    background: #000;
    overflow: hidden;
    border-top: 1px solid var(--primary);
    box-shadow: 0 -20px 50px rgba(0, 243, 255, 0.1);
}

/* 強制 Three.js 容器填滿這個區塊 */
#galaxy-terminal #three-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
}

/* 介面層 */
.galaxy-ui {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none; /* 讓滑鼠穿透去點行星 */
}

/* 標題 */
.galaxy-title {
    position: absolute;
    top: 30px; left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.galaxy-title .glitch-text {
    font-family: var(--font-head);
    font-size: 2rem;
    color: var(--primary);
    letter-spacing: 5px;
    text-shadow: 0 0 10px var(--primary);
}

.galaxy-title .subtitle {
    font-size: 0.8rem;
    color: #666;
    letter-spacing: 3px;
    margin-top: 5px;
}

/* 行星資訊面板 (跟隨滑鼠或固定位置) */
#planet-info-panel {
    position: absolute;
    top: 50%; left: 50%; /* 初始位置 */
    transform: translate(-50%, -50%) scale(0.8);
    width: 300px;
    background: rgba(10, 20, 30, 0.9);
    border: 1px solid var(--secondary);
    padding: 20px;
    opacity: 0; /* 預設隱藏 */
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    backdrop-filter: blur(5px);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

#planet-info-panel.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.panel-line {
    width: 50px; height: 3px;
    background: var(--secondary);
    margin-bottom: 10px;
    box-shadow: 0 0 10px var(--secondary);
}

#planet-name {
    color: #fff;
    font-family: var(--font-head);
    margin: 0 0 10px 0;
    font-size: 1.2rem;
}

#planet-desc {
    color: #ccc;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 15px;
}

.panel-stats {
    display: flex;
    justify-content: space-between;
    font-family: monospace;
    color: var(--primary);
    font-size: 0.7rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 10px;
}

/* =========================================
   Cyber Toast Notification (全息通知系統)
   ========================================= */

#cyber-toast-container {
    position: fixed;
    top: 100px; /* 避開導航列 */
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 15px;
    pointer-events: none; /* 讓滑鼠穿透容器 */
}

/* 通知卡片本體 */
.cyber-toast {
    position: relative;
    width: 320px;
    background: rgba(5, 10, 15, 0.95);
    border: 1px solid var(--primary);
    box-shadow: -5px 5px 20px rgba(0, 243, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 0;
    pointer-events: auto; /* 恢復卡片互動 */
    overflow: hidden;
    
    /* 進場動畫 */
    animation: toastSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transform: translateX(100%); /* 初始位置在外面 */
}

/* 離場動畫 Class */
.cyber-toast.closing {
    animation: toastSlideOut 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
}

@keyframes toastSlideIn {
    to { transform: translateX(0); }
}

@keyframes toastSlideOut {
    to { transform: translateX(120%); opacity: 0; }
}

/* 標題欄 */
.toast-header {
    background: rgba(0, 243, 255, 0.15);
    padding: 8px 15px;
    border-bottom: 1px solid rgba(0, 243, 255, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toast-title {
    font-family: var(--font-head);
    color: var(--primary);
    font-size: 0.85rem;
    letter-spacing: 1px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toast-icon {
    display: inline-block;
    width: 8px; height: 8px;
    background: var(--secondary);
    border-radius: 50%;
    box-shadow: 0 0 5px var(--secondary);
    animation: blink 1s infinite;
}

.toast-close {
    cursor: pointer;
    color: #666;
    font-size: 1.2rem;
    line-height: 0.8;
}
.toast-close:hover { color: #fff; }

/* 內容區 */
.toast-body {
    padding: 15px;
    color: #e0e0e0;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* 底部倒數進度條 */
.toast-progress-bar {
    position: absolute;
    bottom: 0; left: 0;
    height: 3px;
    background: var(--primary);
    width: 100%;
    box-shadow: 0 0 10px var(--primary);
    /* 動畫在 JS 裡動態設定時間 */
}

/* 裝飾角標 */
.cyber-toast::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 15px solid var(--primary);
    border-left: 15px solid transparent;
}

/* =========================================
   NEW FEATURES RWD (銀河與通知系統手機版適配)
   ========================================= */

@media (max-width: 900px) {
    
    /* --- 1. 銀河終端 (Galaxy Terminal) --- */
    #galaxy-terminal {
        height: 60vh; /* 手機版高度縮減，避免滑太久 */
        min-height: 400px;
    }

    .galaxy-title {
        top: 20px;
        width: 100%;
        padding: 0 20px;
    }

    .galaxy-title .glitch-text {
        font-size: 1.2rem; /* 字體縮小 */
        letter-spacing: 2px;
        white-space: nowrap; /* 防止換行 */
    }

    .galaxy-title .subtitle {
        font-size: 0.8rem;
        letter-spacing: 1px;
    }

    /* 行星資訊面板 (手機版固定在底部，不跟隨滑鼠) */
    #planet-info-panel {
        top: auto !important; /* 強制覆蓋 JS 的定位 */
        left: 50% !important;
        bottom: 20px;
        transform: translateX(-50%) scale(0.9); /* 置中並微縮 */
        width: 90%;
        max-width: 350px;
        
        /* 手機版預設顯示一點點提示，或者保持隱藏直到點擊 */
        /* 這裡設定為點擊後顯示 */
        pointer-events: none;
    }

    /* 當 JS 加上 active class 時 */
    #planet-info-panel.active {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }

    /* --- 2. 全息通知 (Cyber Toast) --- */
    #cyber-toast-container {
        top: 80px; /* 避開手機版導航列 */
        right: 0;
        left: 0; /* 左右撐滿 */
        align-items: center; /* 讓通知居中 */
        padding: 0 10px;
    }

    .cyber-toast {
        width: 100%;
        max-width: 350px; /* 限制最大寬度 */
        font-size: 0.85rem;
        
        /* 手機版動畫改為從上方滑入 */
        animation: toastSlideDown 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        transform: translateY(-100%);
    }

    .cyber-toast.closing {
        animation: toastSlideUp 0.4s forwards;
    }
}

/* 手機版專用動畫 Keyframes */
@keyframes toastSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes toastSlideUp {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-100%); opacity: 0; }
}

/* --- 深空訊號接收器 (Uplink Bar) --- */
.uplink-bar {
    position: relative;
    width: 100%;
    height: 60px;
    background: rgba(2, 4, 6, 0.9);
    border-top: 1px solid rgba(0, 243, 255, 0.3);
    border-bottom: 1px solid rgba(0, 243, 255, 0.1);
    backdrop-filter: blur(10px);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
}

.uplink-bar:hover {
    background: rgba(0, 243, 255, 0.05);
    border-top-color: var(--primary);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.2);
}

.uplink-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    max-width: 1200px;
    font-family: var(--font-head);
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.6);
    pointer-events: none; /* 讓點擊穿透到 bar */
}

/* 狀態燈 */
.uplink-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
}

.status-light {
    width: 8px; height: 8px;
    background: #555; /* 預設灰色 */
    border-radius: 50%;
    box-shadow: 0 0 5px #555;
    transition: 0.3s;
}

/* 主標題 */
.uplink-title {
    font-size: 1rem;
    color: var(--primary);
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.3);
    transition: 0.3s;
}

/* 右側裝飾 */
.uplink-deco span {
    font-size: 0.8rem;
    color: var(--primary);
    opacity: 0.5;
    transition: 0.3s;
}

/* 掃描光條動畫 */
.uplink-scanner {
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.1), transparent);
    transform: skewX(-20deg);
    transition: 0.5s;
}

.uplink-bar:hover .uplink-scanner {
    left: 150%;
    transition: 1s ease-in-out;
}

.uplink-bar:hover .uplink-title {
    letter-spacing: 4px; /* Hover 時文字拉開 */
    text-shadow: 0 0 15px var(--primary);
}

/* --- 啟動狀態 (Active State) --- */
.uplink-bar.active {
    border-bottom: 2px solid var(--secondary); /* 變綠色 */
    background: rgba(0, 20, 0, 0.8);
}

.uplink-bar.active .status-light {
    background: var(--secondary); /* 綠燈亮起 */
    box-shadow: 0 0 10px var(--secondary);
}

.uplink-bar.active .status-text {
    color: var(--secondary);
    text-shadow: 0 0 5px var(--secondary);
}

.uplink-bar.active .uplink-title {
    color: #fff;
}

/* --- 銀河終端容器 (折疊邏輯) --- */
#galaxy-terminal {
    /* 這裡的高度設為 0，隱藏內容 */
    height: 0; 
    opacity: 0;
    overflow: hidden;
    /* 這是關鍵：使用貝茲曲線模擬機械展開的質感 */
    transition: height 1s cubic-bezier(0.86, 0, 0.07, 1), opacity 0.5s ease-in;
    border-top: none; /* 邊框由 trigger 負責 */
    
    /* 視覺濾鏡：沒打開時模糊一點 */
    filter: blur(10px) brightness(0);
}

/* 展開狀態 */
#galaxy-terminal.expanded {
    height: 80vh; /* 展開後的高度 */
    opacity: 1;
    filter: blur(0px) brightness(1); /* 清晰 */
    /* 展開時濾鏡也要有過渡動畫 */
    transition: height 1s cubic-bezier(0.86, 0, 0.07, 1), opacity 0.5s ease-out, filter 1.2s ease-out;
}

/* 手機版適配 */
@media (max-width: 768px) {
    .uplink-title { font-size: 0.8rem; }
    .uplink-deco { display: none; }
    #galaxy-terminal.expanded { height: 60vh; }
}

/* =========================================
   GUEST ENTRY GATE (訪客登入閘門)
   ========================================= */

/* 1. 閘門容器：蓋住一切 */
#guest-gate {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: #000; /* 純黑底 */
    z-index: 99999; /* 最高層級 */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* 2. 3D 畫布容器 */
#gate-canvas-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    /* 稍微暗一點，讓 UI 突顯 */
    filter: brightness(0.8);
}

/* 3. UI 層 */
.gate-ui {
    position: relative;
    z-index: 2;
    width: 100%; height: 100%;
    pointer-events: none; /* 讓滑鼠能穿透到 Canvas (如果需要) */
}

/* 頂部資訊 */
.gate-header {
    position: absolute;
    top: 40px; left: 0; width: 100%;
    padding: 0 50px;
    display: flex;
    justify-content: space-between;
    font-family: 'Orbitron', sans-serif;
    color: rgba(0, 243, 255, 0.6);
    font-size: 0.8rem;
    letter-spacing: 2px;
}

.status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    background: #ff0055; /* 初始紅色：等待中 */
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 10px #ff0055;
    animation: blink 1s infinite;
}

/* 中央控制區 */
.gate-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: auto; /* 按鈕要能點 */
    /* 初始稍微隱藏，等 JS 顯示 */
    opacity: 0; 
    animation: fadeInUI 2s 0.5s forwards ease-out;
}

@keyframes fadeInUI { to { opacity: 1; } }

.gate-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 3rem;
    color: #fff;
    margin: 0 0 10px 0;
    letter-spacing: 8px;
    text-shadow: 0 0 20px rgba(255,255,255,0.5);
    /* 故障文字效果 */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.gate-sub {
    font-family: 'Rajdhani', sans-serif;
    color: #888;
    font-size: 1rem;
    letter-spacing: 2px;
    margin-bottom: 40px;
}



/* --- 超高級故障按鈕 (Cyber Glitch Button) --- */
.cyber-glitch-btn {
    position: relative;
    padding: 15px 40px;
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    letter-spacing: 4px;
    cursor: pointer;
    overflow: hidden;
    transition: 0.3s;
    text-transform: uppercase;
}

.cyber-glitch-btn:hover {
    background: rgba(0, 243, 255, 0.1);
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.4);
    letter-spacing: 6px; /* 文字拉開 */
}

/* 按鈕內的裝飾 */
.btn-deco {
    display: inline-block;
    margin-left: 10px;
    opacity: 0;
    transform: translateX(-10px);
    transition: 0.3s;
}
.cyber-glitch-btn:hover .btn-deco {
    opacity: 1;
    transform: translateX(0);
}

/* 底部掃描線 */
.gate-footer {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    padding: 20px 50px;
}

.scan-line {
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    opacity: 0.5;
}

.footer-data {
    display: flex;
    justify-content: space-between;
    font-family: monospace;
    font-size: 0.7rem;
    color: #444;
    margin-top: 10px;
}

/* 鎖定主頁面滾動 (當閘門開啟時) */
body.gate-locked {
    overflow: hidden;
}

/* =========================================
   GUEST GATE RESPONSIVE (訪客閘門 RWD)
   ========================================= */

/* --- 平板與小型筆電 (max-width: 1024px) --- */
@media (max-width: 1024px) {
    .gate-title {
        font-size: 2.5rem;
        letter-spacing: 6px;
    }
}

/* --- 手機版 (max-width: 768px) --- */
@media (max-width: 768px) {
    
    /* 1. 頂部資訊：縮小間距，改為垂直排列以防重疊 */
    .gate-header {
        top: 20px;
        padding: 0 20px;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .gate-id {
        font-size: 0.7rem;
        opacity: 0.7;
    }

    /* 2. 中央區域：字體縮小，確保不超出螢幕 */
    .gate-center {
        width: 100%;
        padding: 0 20px; /* 左右留白 */
    }

    .gate-title {
        font-size: 1.8rem; /* 大幅縮小標題 */
        letter-spacing: 3px;
        line-height: 1.2;
        margin-bottom: 15px;
    }

    .gate-sub {
        font-size: 0.9rem;
        line-height: 1.5;
        letter-spacing: 1px;
        margin-bottom: 30px;
        color: #aaa; /* 手機上提高對比度 */
    }

    /* 3. 按鈕優化：加大點擊範圍，適應觸控 */
    .cyber-glitch-btn {
        width: 100%;
        max-width: 280px; /* 限制最大寬度 */
        padding: 12px 0; /* 上下內距 */
        font-size: 0.9rem;
        letter-spacing: 2px;
        background: rgba(0, 243, 255, 0.05); /* 手機版預設給一點背景色 */
    }

    /* 手機版預設顯示裝飾箭頭，因為沒有 hover */
    .btn-deco {
        opacity: 1;
        transform: translateX(0);
        margin-left: 5px;
    }

    /* 4. 底部資訊：改為置中堆疊 */
    .gate-footer {
        padding: 15px 20px;
    }

    .footer-data {
        flex-direction: column;
        align-items: center;
        gap: 5px;
        font-size: 0.6rem;
        opacity: 0.6;
    }
}

/* --- 手機橫向模式 (Landscape) --- */
/* 防止高度不夠時內容被切掉 */
@media (max-width: 900px) and (orientation: landscape) {
    .gate-center {
        top: 55%; /* 稍微往下移 */
    }
    
    .gate-title {
        font-size: 1.5rem;
        margin-bottom: 5px;
    }
    
    .gate-sub {
        font-size: 0.8rem;
        margin-bottom: 15px;
    }
    
    .gate-header {
        top: 10px;
        flex-direction: row; /* 橫向時改回並排 */
        justify-content: space-between;
    }
    
    .gate-footer {
        padding: 10px 20px;
    }
    
    .cyber-glitch-btn {
        padding: 8px 30px;
    }
}

#mech-3d-container {
    width: 100%;
    height: 100%;
    min-height: 300px; /* 確保有高度 */
    position: relative;
    overflow: hidden;
    border-radius: 8px; /* 配合卡片圓角 */
}
#mech-3d-container canvas {
    outline: none;
    filter: contrast(1.1) brightness(1.1); /* 讓畫面更銳利 */
}

/* ============================================================ 
   TACTICAL BLUEPRINT MODAL (戰術藍圖視窗) - 2025 Redesign
   ============================================================ */

/* 1. 容器與背景 */
.modal-overlay.blueprint-theme {
    background: rgba(5, 10, 15, 0.9); /* 深色背景 */
    backdrop-filter: blur(10px);
    z-index: 15000;
    padding: 20px;
    /* Flex置中 */
    display: none; /* JS控制顯示 */
    justify-content: center;
    align-items: center;
}

.blueprint-container {
    width: 100%;
    max-width: 1100px;
    height: 85vh; /* 佔據畫面 85% 高度 */
    max-height: 700px;
    background: rgba(10, 15, 20, 0.85);
    border: 1px solid rgba(0, 243, 255, 0.3);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(0, 243, 255, 0.15);
    
    /* 科幻切角設計 */
    clip-path: polygon(
        0 0, 100% 0, 
        100% calc(100% - 30px), calc(100% - 30px) 100%, 
        0 100%
    );
    
    animation: modalDeploy 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* 2. 頂部標題列 */
.bp-header {
    height: 60px;
    border-bottom: 1px solid rgba(0, 243, 255, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background: rgba(0, 243, 255, 0.05);
    position: relative;
    flex-shrink: 0;
}

.bp-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary);
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 2px;
}

.bp-header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.bp-coords {
    font-family: monospace;
    color: var(--secondary);
    font-size: 0.8rem;
    opacity: 0.7;
}

.bp-close-btn {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 5px 15px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bp-close-btn:hover {
    background: var(--primary);
    color: #000;
    box-shadow: 0 0 15px var(--primary);
}

/* 頂部掃描條動畫 */
.bp-scan-line {
    position: absolute;
    bottom: 0; left: 0;
    height: 2px;
    width: 0%;
    background: var(--secondary);
    box-shadow: 0 0 10px var(--secondary);
    transition: width 1s ease-out;
}
.modal-overlay[style*="display: flex"] .bp-scan-line {
    width: 100%;
    transition-delay: 0.5s;
}

/* 3. 內容主體 (左右佈局) */
.bp-body {
    display: flex;
    flex: 1; /* 填滿剩餘空間 */
    overflow: hidden; /* 防止溢出 */
}

/* 左側：視覺區 */
.bp-visual-col {
    flex: 1.2;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid rgba(0, 243, 255, 0.1);
    background: radial-gradient(circle at center, rgba(0,243,255,0.03) 0%, transparent 70%);
}

.visual-frame {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    padding: 5px;
}

.img-viewport {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #000;
}

#modal-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持比例 */
    /* 藍圖濾鏡效果 */
    filter: contrast(1.1) saturate(0.8) drop-shadow(0 0 5px rgba(0,243,255,0.3));
    transition: transform 0.3s;
}

/* 圖片掃描線特效 */
.scan-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(0, 243, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 2;
}

.scan-beam {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 5px;
    background: var(--primary);
    box-shadow: 0 0 20px var(--primary);
    opacity: 0.5;
    animation: scanDown 3s linear infinite;
    z-index: 3;
    pointer-events: none;
}

.img-status {
    position: absolute;
    top: 15px; left: 15px;
    color: var(--secondary);
    font-family: monospace;
    font-size: 0.8rem;
    z-index: 4;
    background: rgba(0,0,0,0.6);
    padding: 2px 6px;
    border: 1px solid var(--secondary);
}

/* 角落標記 */
.corner-marker {
    position: absolute;
    width: 15px; height: 15px;
    border: 2px solid var(--primary);
    z-index: 4;
}
.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* 右側：數據區 */
.bp-data-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.3);
}

.data-scroll-wrapper {
    flex: 1;
    overflow-y: auto; /* 內容過長可捲動 */
    padding: 30px;
}

/* 捲軸美化 */
.data-scroll-wrapper::-webkit-scrollbar { width: 4px; }
.data-scroll-wrapper::-webkit-scrollbar-track { background: #111; }
.data-scroll-wrapper::-webkit-scrollbar-thumb { background: var(--primary); }

.proj-type {
    font-size: 0.8rem;
    color: var(--primary);
    letter-spacing: 2px;
    margin-bottom: 5px;
    opacity: 0.7;
}

#modal-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    color: #fff;
    margin: 0 0 15px 0;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
}

.decor-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, var(--primary), transparent);
    margin-bottom: 25px;
}

/* 規格矩陣 */
.spec-matrix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 30px;
}

.spec-item {
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid var(--primary);
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.spec-label {
    font-size: 0.7rem;
    color: #888;
    letter-spacing: 1px;
}

.spec-val {
    font-family: 'Rajdhani', sans-serif;
    font-weight: bold;
    font-size: 1.1rem;
    color: #e0e0e0;
}

.text-green { color: var(--secondary); text-shadow: 0 0 5px var(--secondary); }

.project-desc-box {
    margin-bottom: 30px;
}

#modal-desc {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: #ccc;
}

.pseudo-code {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: rgba(0, 243, 255, 0.6);
    background: rgba(0, 0, 0, 0.4);
    padding: 15px;
    border: 1px dashed rgba(0, 243, 255, 0.3);
    line-height: 1.5;
}

/* 底部控制區 */
.bp-controls {
    padding: 20px 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.nav-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #888;
    padding: 8px 16px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    font-size: 0.9rem;
}

.nav-btn:hover {
    border-color: var(--primary);
    color: #fff;
    background: rgba(0, 243, 255, 0.1);
}

.pagination-display {
    text-align: center;
    font-family: monospace;
    color: var(--primary);
}

.progress-track {
    width: 100px; height: 2px;
    background: #333;
    margin-top: 5px;
    position: relative;
}
.progress-bar {
    width: 33%; height: 100%;
    background: var(--primary);
    box-shadow: 0 0 5px var(--primary);
}

/* 背景網格裝飾 */
.bp-bg-grid {
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: -1;
    pointer-events: none;
}

/* Animation */
@keyframes scanDown {
    0% { top: 0%; opacity: 0; }
    20% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { top: 100%; opacity: 0; }
}

@keyframes modalDeploy {
    from { opacity: 0; transform: scale(0.95) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}



/* ============================================================ 
   MOBILE & TABLET RESPONSIVE SYSTEM (戰術藍圖 - 手機版優化)
   ============================================================ */

@media (max-width: 1024px) {
    /* 平板/筆電小螢幕：稍微縮小邊距 */
    .blueprint-container {
        width: 95%;
        height: 90vh;
    }
}

@media (max-width: 900px) {
    /* --- 1. 容器：全螢幕模式 --- */
    .modal-overlay.blueprint-theme {
        padding: 0;
        align-items: flex-start; /* 防止部分瀏覽器置中導致頂部被切 */
        background: #000; /* 手機版背景純黑，減少效能消耗 */
    }

    .blueprint-container {
        width: 100vw;
        height: 100dvh; /* 關鍵：使用 dvh 避開手機瀏覽器網址列 */
        max-height: none;
        max-width: none;
        border: none;
        border-radius: 0;
        clip-path: none; /* 移除切角，爭取最大顯示空間 */
        box-shadow: none;
        display: flex;
        flex-direction: column;
    }

    /* --- 2. 頂部 Header：簡化資訊 --- */
    .bp-header {
        height: 50px; /* 縮小高度 */
        padding: 0 15px;
        flex-shrink: 0; /* 禁止被壓縮 */
        background: rgba(0, 243, 255, 0.08);
    }

    .bp-title { font-size: 0.9rem; }
    .bp-coords { display: none; } /* 隱藏座標 */
    .bp-scan-line { bottom: auto; top: 0; } /* 掃描線移到最頂 */
    
    .bp-close-btn {
        border: none; /* 移除邊框減少視覺雜訊 */
        padding: 0;
        color: #fff;
    }
    .close-text { display: none; } /* 隱藏文字 */
    .close-x { 
        font-size: 1.8rem; 
        line-height: 1;
        display: block; 
        color: var(--primary);
    }

    /* --- 3. 佈局：垂直堆疊 (Vertical Stack) --- */
    .bp-body {
        flex-direction: column;
        width: 100%;
        height: calc(100dvh - 50px); /* 扣除 Header 高度 */
    }

    /* --- 4. 上半部：視覺掃描區 (固定高度) --- */
    .bp-visual-col {
        flex: none; /* 禁止自動伸縮 */
        width: 100%;
        height: 35%; /* 圖片佔螢幕 35% */
        min-height: 250px; /* 最小高度保護 */
        padding: 0;
        border-right: none;
        border-bottom: 1px solid rgba(0, 243, 255, 0.2);
        background: radial-gradient(circle at center, rgba(0,20,30,1) 0%, #000 100%);
    }

    .visual-frame { border: none; padding: 0; }
    
    /* 移除手機版不必要的角落標記 */
    .corner-marker { display: none; } 
    
    .img-viewport {
        background: transparent;
    }
    
    #modal-img {
        padding: 20px; /* 圖片留白 */
    }

    /* --- 5. 下半部：數據滾動區 (Scrollable) --- */
    .bp-data-col {
        flex: 1; /* 佔據剩餘所有空間 */
        width: 100%;
        display: flex;
        flex-direction: column;
        background: rgba(5, 8, 10, 0.95);
        overflow: hidden; /* 內部滾動 */
    }

    /* 這是唯一可以滾動的區域 */
    .data-scroll-wrapper {
        flex: 1;
        padding: 20px 20px 80px 20px; /* 底部留白給按鈕，防止內容被擋住 */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* iOS 滾動優化 */
    }

    /* 標題與文字調整 */
    #modal-title {
        font-size: 1.6rem;
        margin-bottom: 10px;
    }

    .proj-type { font-size: 0.7rem; }

    /* 規格表：手機版保持兩欄，但字縮小 */
    .spec-matrix {
        gap: 10px;
        margin-bottom: 20px;
    }
    .spec-item { padding: 8px; background: rgba(255,255,255,0.05); }
    .spec-label { font-size: 0.65rem; }
    .spec-val { font-size: 0.95rem; }

    #modal-desc {
        font-size: 0.95rem;
        color: #ddd; /* 提高對比度，戶外易讀 */
        margin-bottom: 20px;
    }

    /* 隱藏裝飾性代碼塊 (手機空間寶貴) */
    .pseudo-code { display: none; }

    /* --- 6. 底部控制區：固定在底部 (Sticky Footer) --- */
    .bp-controls {
        position: absolute;
        bottom: 0; left: 0; width: 100%;
        height: 70px;
        background: rgba(0, 0, 0, 0.9);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 10px 20px;
        z-index: 10;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
    }

    /* 按鈕優化：加大點擊範圍 */
    .nav-btn {
        flex: 1; /* 按鈕等寬 */
        padding: 12px 0;
        background: rgba(0, 243, 255, 0.1);
        border-color: var(--primary);
        color: #fff;
        font-size: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .pagination-display {
        font-size: 0.8rem;
        min-width: 60px;
    }
    
    .progress-track { display: none; } /* 手機版隱藏進度條，只留數字 */
}

/* ============================================================ 
   LANDSCAPE MODE FIX (橫向模式修復)
   當使用者橫著拿手機時，高度會非常不足，必須改成左右排列
   ============================================================ */
@media (max-width: 900px) and (orientation: landscape) {
    .bp-body {
        flex-direction: row; /* 改回左右排列 */
    }

    .bp-header { height: 40px; } /* Header 更窄 */

    /* 左邊圖片 */
    .bp-visual-col {
        width: 40%;
        height: 100%;
        min-height: auto;
        border-right: 1px solid rgba(0, 243, 255, 0.2);
        border-bottom: none;
    }

    #modal-img { padding: 10px; }

    /* 右邊數據 */
    .bp-data-col {
        width: 60%;
    }

    .data-scroll-wrapper {
        padding: 15px 15px 60px 15px; /* 減少內距 */
    }
    
    .bp-controls {
        height: 50px;
        padding: 5px 20px;
    }
    
    .nav-btn { padding: 5px 0; font-size: 0.8rem; }
    #modal-title { font-size: 1.2rem; }
}

/* ============================================================ 
   V2: TACTICAL CONSTRUCT SYSTEM (戰術構建系統)
   ============================================================ */

.tactical-pod {
    position: absolute;
    /* 電腦版定位：在大頭貼的右側 */
    top: 15%;
    left: 110%;
    width: 380px;
    
    /* 玻璃擬態 + 科技黑底 */
    background: rgba(5, 8, 12, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    border: 1px solid rgba(0, 243, 255, 0.15);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    
    z-index: 50;
    opacity: 0; /* 初始隱藏 */
    transform-origin: left center;
    perspective: 1000px; /* 開啟 3D */
    
    /* 切角設計 */
    clip-path: polygon(
        15px 0, 100% 0, 
        100% calc(100% - 15px), calc(100% - 15px) 100%, 
        0 100%, 0 15px
    );
}

/* 掃描線動畫 (由上而下掃描) */
.scan-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(0, 243, 255, 0.1), transparent);
    background-size: 100% 200%;
    animation: scanMove 3s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes scanMove {
    0% { background-position: 0% -100%; }
    100% { background-position: 0% 200%; }
}

/* 四角裝飾 (強化機械感) */
.frame-corner {
    position: absolute;
    width: 10px; height: 10px;
    border: 2px solid var(--primary);
    transition: 0.3s;
    opacity: 0; /* 動畫進場 */
}
.frame-corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.frame-corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.frame-corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.frame-corner.br { bottom: 0; right: 0; border-left: none; border-top: none; }

/* 連接線 (數據傳輸線) */
.data-link-line {
    position: absolute;
    top: 30px;
    left: -60px;
    width: 0px; /* 動畫控制 */
    height: 2px;
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary);
}
.data-link-line::after {
    content: '';
    position: absolute;
    right: 0; top: -3px;
    width: 8px; height: 8px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff;
}

/* 內容排版 */
.tactical-content {
    position: relative;
    z-index: 1;
    padding: 20px;
}

.tac-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-family: 'Orbitron', sans-serif;
    color: var(--primary);
    font-size: 0.75rem;
    letter-spacing: 2px;
}

.tac-icon { animation: blink 2s infinite; }

.tac-battery { display: flex; gap: 3px; }
.tac-battery .bar {
    width: 4px; height: 8px;
    background: var(--secondary);
    box-shadow: 0 0 5px var(--secondary);
}

.tac-body {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.avatar-mini {
    width: 50px; height: 50px;
    border: 1px solid var(--primary);
    padding: 2px;
    flex-shrink: 0;
}
.avatar-mini img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
}

.text-terminal {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #e0f0ff;
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.3);
}

.tac-footer {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    color: #666;
    font-family: monospace;
}

.text-terminal .cursor-block {
    display: inline-block;
    width: 13px;                /* 底線長度 */
    height: 3px;                /* 底線厚度 */
    background: var(--primary); /* 你的主色調 */
    
    margin-left: 2px;           /* 離最後一個字一點距離 */
    
    /* 移除多餘效果 */
    box-shadow: none !important;
    text-shadow: none !important;
    color: transparent !important;
    
    animation: blink 1s step-end infinite;
}

/* 強制讓文字與游標排在同一行 (這段保持不變) */
.text-terminal p#tactical-text {
    display: inline; 
    margin: 0;
    padding: 0;
}

/* 游標微調：確保對齊文字底部 (改這裡！) */
.text-terminal .cursor-block {
    display: inline-block;
    margin-top: 2px;
}

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

/* RWD 手機版 */
@media (max-width: 960px) {
    .tactical-pod {
        top: auto;
        bottom: -180px; /* 往下放 */
        left: 50%;
        transform: translateX(-50%); /* 居中 (注意：GSAP可能會覆蓋這個，JS要做對應處理) */
        width: 90%;
        max-width: 360px;
        transform-origin: center bottom;
    }
    .data-link-line { display: none; } /* 手機版隱藏連接線 */
}

/* --- QUANTUM HEART SYSTEM (FINAL) --- */
#quantum-like-system {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 140px; /* 稍微加大區域 */
    height: 140px;
    z-index: 9999;
    pointer-events: none; /* 讓滑鼠穿透容器 */
}

#like-canvas-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 240px; /* Canvas 渲染範圍加大，避免爆炸被切掉 */
    height: 240px;
    pointer-events: auto; /* 恢復 Canvas 互動 */
    cursor: pointer;
    /* 待機時的藍色光暈 */
    filter: drop-shadow(0 0 15px rgba(0, 243, 255, 0.4)); 
    transition: filter 0.5s ease;
}

/* 點讚後的紅色光暈 */
#quantum-like-system.liked #like-canvas-container {
    filter: drop-shadow(0 0 30px rgba(255, 0, 60, 0.8));
}

.like-ui {
    position: absolute;
    bottom: 10px; /* 調整位置 */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
    opacity: 0.8;
    transition: opacity 0.3s;
}

#quantum-like-system:hover .like-ui {
    opacity: 1;
}

.like-counter-box {
    font-family: 'Rajdhani', sans-serif;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.like-label {
    font-size: 10px;
    color: #00f3ff;
    letter-spacing: 2px;
    margin-bottom: 2px;
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.5);
    transition: color 0.5s;
}

#like-count {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #ffffff;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.like-deco-bar {
    width: 0%;
    height: 2px;
    background: #ff0040;
    box-shadow: 0 0 10px #ff0040;
    margin-top: 4px;
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 狀態變化 */
#quantum-like-system.liked .like-deco-bar {
    width: 100%;
}

#quantum-like-system.liked .like-label {
    color: #ff0040; /* 變成霓虹紅 */
    text-shadow: 0 0 8px #ff0040;
}

@media (max-width: 480px) {
    #quantum-like-system {
        width: 80px;      /* 原本 100px → 更小 */
        height: 80px;
        bottom: 15px;
        right: 15px;
    }

    #like-canvas-container {
        width: 140px;      /* 原本 180px → 更小 */
        height: 140px;
    }

    #like-count {
        font-size: 13px;   /* 原本 16 → 更小 */
    }

    .like-label {
        font-size: 8px;    /* 標籤也縮小 */
    }
}


@media (max-width: 768px) {
    #quantum-like-system {
        width: 100px;      /* 原本 120px → 更小 */
        height: 100px;
        bottom: 20px;
        right: 20px;
    }

    #like-canvas-container {
        width: 170px;      /* 原本 200px → 更小 */
        height: 170px;
    }

    #like-count {
        font-size: 15px;   /* 原本 18 → 更小 */
    }

    .like-label {
        font-size: 9px;
    }
}

/* 手機隱藏點讚系統 */
@media (max-width: 768px) {
  #quantum-like-system {
    display: none !important;
  }
}


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* === Message Board Upgrade === */
/* === System Panel: 核心容器 === */
.system-status-panel {
    position: relative;
    background: var(--bg-dark);
    /* 複雜的背景紋理：網格 + 掃描線 */
    background-image: 
        var(--panel-texture),
        linear-gradient(rgba(0, 243, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.05) 1px, transparent 1px);
    background-size: auto auto, 20px 20px, 20px 20px;
    
    /* 多重邊框創造物理深度感 */
    border: 1px solid var(--primary-dim);
    box-shadow: 
        0 0 0 1px rgba(0,0,0,0.5), /* 內圈黑邊 */
        inset 0 0 30px rgba(0, 243, 255, 0.1), /* 內部輝光 */
        0 0 15px var(--primary-dim); /* 外部輝光 */
        
    overflow: hidden; /* 用於包含內部動畫 */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 增加一個持續旋轉的雷達掃描背景效果 */
.system-status-panel::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(
        transparent 0deg,
        transparent 270deg,
        var(--primary-dim) 360deg
    );
    animation: radar-sweep 10s linear infinite;
    pointer-events: none;
    opacity: 0.3;
    z-index: 0;
}

@keyframes radar-sweep {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* === Ultra Buttons: 高級按鈕 === */
.cyber-tiny-btn {
    position: relative;
    background: linear-gradient(135deg, transparent 10%, var(--primary-dim) 100%);
    border: none; /* 移除默認邊框，改用高級陰影 */
    color: var(--primary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 6px 16px;
    cursor: pointer;
    margin-left: auto;
    text-transform: uppercase;
    overflow: hidden;
    
    /* 科幻感的切角設計 */
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    
    /* 複合陰影模擬發光邊框 */
    box-shadow: inset 0 0 0 1px var(--primary);
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    z-index: 2;
}

/* 按鈕懸停時的狂暴模式 */
.cyber-tiny-btn:hover {
    background: var(--primary);
    color: var(--bg-dark);
    /* 極致輝光 */
    box-shadow: 
        inset 0 0 0 1px var(--primary),
        0 0 30px var(--primary),
        0 0 60px var(--primary-dim);
    text-shadow: 0 0 5px #fff;
    /* 添加微小的抖動效果增加不穩定感 */
    animation: btn-jitter 0.2s infinite linear;
}

/* 按鈕內部的掃光效果 */
.cyber-tiny-btn::after {
    content: '';
    position: absolute;
    top: -50%; left: -60%; width: 20%; height: 200%;
    background: rgba(255,255,255,0.4);
    transform: rotate(25deg);
    transition: all 0.4s;
    opacity: 0;
    filter: blur(5px);
}
.cyber-tiny-btn:hover::after {
    left: 120%;
    opacity: 1;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}


/* Cancel 按鈕的變體 */
.cyber-tiny-btn.cancel {
    background: linear-gradient(135deg, transparent 10%, var(--secondary-dim) 100%);
    color: var(--secondary);
    box-shadow: inset 0 0 0 1px var(--secondary);
}
.cyber-tiny-btn.cancel:hover {
    background: var(--secondary);
    color: var(--bg-dark);
    box-shadow: 
        inset 0 0 0 1px var(--secondary),
        0 0 30px var(--secondary),
        0 0 60px var(--secondary-dim);
}

@keyframes btn-jitter {
    0% { transform: translate(0, 0); }
    25% { transform: translate(1px, 1px); }
    50% { transform: translate(0, 0.5px); }
    75% { transform: translate(-1px, 0); }
    100% { transform: translate(0, 0); }
}


/* === Display Mode: 顯示模式優化 === */
.terminal-screen {
    position: relative;
    z-index: 1; /* 確保在背景掃描線之上 */
}

.terminal-meta {
    display: flex;
    align-items: center;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 4px;
}

/* 為 meta 添加一個小的數據圖標裝飾 */
.terminal-meta::before {
    content: '[DATA_LOG]';
    margin-right: 8px;
    color: var(--primary);
    font-weight: bold;
    opacity: 0.8;
}

#msg-header-text {
    flex-grow: 1;
    /* 輕微的文字發光 */
    text-shadow: 0 0 2px currentColor;
}

/* 狀態紅點的高級版：脈衝核心 */
.blink-dot.red {
    position: relative;
    width: 8px;
    height: 8px;
    background-color: var(--secondary);
    box-shadow: 0 0 10px var(--secondary), 0 0 20px var(--secondary);
    border-radius: 50%;
}
.blink-dot.red::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    border: 1px solid var(--secondary);
    border-radius: 50%;
    animation: core-pulse 1.5s ease-out infinite;
}
@keyframes core-pulse {
    0% { width: 100%; height: 100%; opacity: 1; }
    100% { width: 300%; height: 300%; opacity: 0; }
}


/* === Input Mode: 輸入模式樣式 === */
.terminal-form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px 5px;
    z-index: 1;
}

.form-row {
    position: relative;
    display: flex;
    align-items: center;
    /* 更深的背景，增加對比 */
    background: rgba(10, 16, 25, 0.8);
    /* 移除默認邊框，使用偽元素製作動態邊框 */
    border: none;
    padding: 8px 12px;
    /* 切角設計 */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    transition: all 0.3s ease;
}

/* 輸入框底部的動態能量條 */
.form-row::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0%; /* 默認寬度為0 */
    background: var(--primary);
    box-shadow: 0 0 15px var(--primary);
    transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    opacity: 0.8;
}

/* 當輸入框聚焦時，能量條充滿 */
.form-row:focus-within::after {
    width: 100%;
}

.form-row .prompt {
    color: var(--primary);
    font-family: 'Rajdhani', monospace; /* 改用更現代的等寬字體 */
    font-weight: 700;
    letter-spacing: 1px;
    margin-right: 12px;
    font-size: 0.9rem;
    text-shadow: 0 0 5px var(--primary-dim);
    pointer-events: none;
}

.form-row input {
    background: transparent;
    border: none;
    color: #fff;
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    width: 100%;
    outline: none;
    /* 輸入文字時的輕微發光 */
    text-shadow: 0 0 2px rgba(255,255,255,0.5);
    caret-color: var(--primary); /* 光標顏色 */
}
/* 輸入框的佔位符樣式 */
.form-row input::placeholder {
    color: rgba(255, 255, 255, 0.2);
    font-style: italic;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(0, 243, 255, 0.2);
}

#form-status {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 8px;
    text-align: right;
    font-family: 'Courier New', monospace;
    min-height: 1.2em;
}


/* === Advanced Glitch Effect: 高級故障雜訊 === */
/* 這個效果比單純的位移更難模仿，它使用了 clip-path 和多重陰影來模擬色差和畫面撕裂 */
.text-glitch {
    position: relative;
    color: #fff;
    mix-blend-mode: lighten;
}

.text-glitch::before,
.text-glitch::after {
    content: attr(data-text); /* 需要在HTML中添加 data-text="相同的文字" */
    position: absolute;
    top: 0;
    width: 100%;
    background: var(--bg-dark);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.text-glitch::before {
    left: -2px;
    text-shadow: 2px 0 var(--secondary); /* 紅色色差 */
    animation: glitch-anim-complex-1 2s infinite linear alternate-reverse;
}

.text-glitch::after {
    left: 2px;
    text-shadow: -2px 0 var(--primary); /* 青色色差 */
    animation: glitch-anim-complex-2 3s infinite linear alternate;
}

@keyframes glitch-anim-complex-1 {
    0% { clip-path: inset(20% 0 80% 0); }
    20% { clip-path: inset(60% 0 10% 0); }
    40% { clip-path: inset(10% 0 50% 0); }
    60% { clip-path: inset(80% 0 5% 0); }
    80% { clip-path: inset(30% 0 40% 0); }
    100% { clip-path: inset(50% 0 20% 0); }
}

@keyframes glitch-anim-complex-2 {
    0% { clip-path: inset(10% 0 60% 0); }
    20% { clip-path: inset(30% 0 20% 0); }
    40% { clip-path: inset(50% 0 30% 0); }
    60% { clip-path: inset(20% 0 70% 0); }
    80% { clip-path: inset(70% 0 10% 0); }
    100% { clip-path: inset(40% 0 50% 0); }
}

/* =========================================
   MAGIC THEATER V2 (TACTICAL HUD)
   ========================================= */
:root {
    --hud-green: #00ff41;
    --hud-cyan: #00f3ff;
    --hud-bg: rgba(10, 10, 10, 0.95);
}

.magic-theme {
    background: rgba(0, 0, 0, 0.9); /* 極深黑背景 */
    backdrop-filter: blur(10px);
    z-index: 9999;
    display: none; /* 預設隱藏 */
    justify-content: center;
    align-items: center;
}

/* 主容器：限制最大寬度，模擬手機比例 */
.magic-theater-container {
    width: 100%;
    max-width: 450px; /* 手機垂直影片的最佳寬度 */
    height: 85vh;     /* 佔據畫面高度 */
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--hud-bg);
    border: 1px solid var(--hud-cyan);
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.15);
    overflow: hidden; /* 關鍵：防止內容溢出 */
}

/* --- HUD Header --- */
.hud-header {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    border-bottom: 1px solid rgba(0, 243, 255, 0.3);
    background: rgba(0, 243, 255, 0.05);
    font-family: 'Rajdhani', monospace;
    font-weight: 700;
    letter-spacing: 1px;
}

.hud-text { color: var(--hud-cyan); }
.hud-icon { color: var(--hud-green); margin-right: 8px; animation: blink 2s infinite; }

.magic-close-btn {
    background: transparent;
    border: 1px solid var(--hud-green);
    color: var(--hud-green);
    padding: 4px 12px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    cursor: pointer;
    transition: 0.3s;
}
.magic-close-btn:hover {
    background: var(--hud-green);
    color: #000;
    box-shadow: 0 0 10px var(--hud-green);
}

/* --- Viewport & Cropping (關鍵技術) --- */
.viewport-frame {
    flex: 1;
    position: relative;
    width: 100%;
    background: #000;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 裁切容器：用來隱藏 IG 上下的白色區塊 */
.crop-container {
    width: 100%;
    height: 100%;
    overflow: hidden; 
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 強制覆蓋 IG iframe 樣式 */
.instagram-media {
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    min-width: 100% !important;
    width: 100% !important;
    /* 這裡使用一個技巧：把 iframe 放大，然後用外框裁切掉上下多餘部分 */
    transform: scale(1.02); 
    max-height: 100% !important;
}

/* --- Navigation (隱形觸控區) --- */
.nav-zone {
    position: absolute;
    top: 0; bottom: 0;
    width: 15%; /* 左右各佔 15% 寬度 */
    background: transparent;
    border: none;
    z-index: 50;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    opacity: 0; /* 平常隱藏 */
}
.nav-zone:hover { opacity: 1; background: linear-gradient(90deg, rgba(0,243,255,0.1), transparent); }
.nav-zone.right:hover { background: linear-gradient(-90deg, rgba(0,243,255,0.1), transparent); }

.nav-zone.left { left: 0; }
.nav-zone.right { right: 0; }

.arrow-glitch {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    color: var(--hud-green);
    text-shadow: 2px 0 var(--hud-cyan);
}

/* --- Loading Overlay (駭客雜訊) --- */
.static-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #000;
    z-index: 40;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
.static-overlay.active { opacity: 1; pointer-events: all; }

#noise-canvas {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0.4;
}

.loading-text {
    color: var(--hud-green);
    font-family: 'Consolas', monospace;
    font-size: 1.2rem;
    z-index: 5;
    background: rgba(0,0,0,0.8);
    padding: 5px 10px;
    border: 1px solid var(--hud-green);
}

.loading-scanline {
    width: 100%; height: 2px;
    background: var(--hud-cyan);
    position: absolute;
    animation: scanMove 1.5s linear infinite;
    box-shadow: 0 0 10px var(--hud-cyan);
    z-index: 4;
}

@keyframes scanMove {
    0% { top: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* --- HUD Decorations (瞄準線) --- */
.reticle {
    position: absolute;
    width: 20px; height: 20px;
    border-color: var(--hud-cyan);
    border-style: solid;
    pointer-events: none;
    z-index: 30;
    opacity: 0.7;
}
.tl { top: 10px; left: 10px; border-width: 2px 0 0 2px; }
.tr { top: 10px; right: 10px; border-width: 2px 2px 0 0; }
.bl { bottom: 10px; left: 10px; border-width: 0 0 2px 2px; }
.br { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; }

/* --- Footer --- */
.hud-footer {
    height: 30px;
    background: rgba(0,0,0,0.8);
    border-top: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Consolas', monospace;
    font-size: 0.7rem;
    color: #555;
    position: relative;
    overflow: hidden;
}
.footer-status { color: var(--hud-green); }
.scan-bar-anim {
    position: absolute;
    bottom: 0; left: 0; height: 2px; width: 100%;
    background: linear-gradient(90deg, transparent, var(--hud-green), transparent);
    animation: scanPass 3s ease-in-out infinite;
}
@keyframes scanPass { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* --- RWD: Mobile --- */
@media (max-width: 768px) {
    .magic-theater-container {
        width: 100%;
        max-width: 100%;
        height: 100vh; /* 手機全螢幕 */
        border: none;
    }
    .hud-header { padding-top: 10px; } /* 避開瀏海 */
    .nav-zone { width: 20%; } /* 增加手機點擊範圍 */
}