@charset "UTF-8";

html, body.roadmap-body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden !important;
    font-family: "Comfortaa", cursive, "Noto Sans TC", "微軟正黑體", sans-serif;
    user-select: none;
    /* 🌟 原汁原味深鐵灰黑，不再死黑，點點對比度立即顯現 */
    background-color: #12161a !important; 
    color: #ffffff;
}

.gallery-viewport {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1400px;
    pointer-events: auto;
    /* 🌟 徹底拿掉死黑，完全繼承 body 的深邃灰黑 */
    background: transparent !important;
}

::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ==========================================================================
   1. 上方人物
   ========================================================================== */
.shaky-character-wrapper {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 450px;
    height: 450px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transform-origin: center bottom;
}

.shaky-character-wrapper img#shakyimg {
    height: 100%;
    width: 100%;
    max-height: 450px;
    max-width: 450px;
    display: block;
    filter: none !important;
    transform: translateZ(0);
}

/* 🌟 1. 導覽列兩端標籤：完全對齊 about 標準 */
.nav-links .nav-side-tag,
.about-nav-links .nav-side-tag {
    display: inline-block !important;
    visibility: visible !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    user-select: none;
    pointer-events: none;
}

.nav-links .nav-side-tag.is-left,
.about-nav-links .nav-side-tag.is-left {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 0.5 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    position: static !important;
    margin: 0 !important;
    transform: translateX(-72px) !important;
}

.nav-links .nav-side-tag.is-right,
.about-nav-links .nav-side-tag.is-right {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 0.65 !important;
    color: #ffffff !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    background: rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(4px) !important;
    letter-spacing: 1px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    position: static !important;
    margin: 0 !important;
    transform: translateX(72px) !important;
}

/* 🌟 2. 滾動隱藏：中間 NAV 與右上角漢堡選單一起平滑滑出視窗 */
header,
.site-top-header,
.nav-links {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease !important;
}

/* 當 JS 偵測到向下滑動時，加上 is-hidden 一併收起 */
body.nav-hidden header,
body.nav-hidden .site-top-header,
body.nav-hidden .nav-links {
    transform: translateY(-120%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.nav-hidden .nav-links {
    transform: translateX(-50%) translateY(-150%) !important;
}

/* ==========================================================================
   2. 深底背板與全域點陣
   ========================================================================== */
.stage-backdrop {
    position: absolute;
    top: 500px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    max-width: 92vw;
    height: 500px;
    background-color: rgba(38, 42, 50, 0.94);
    border-radius: 12px;
    z-index: 10;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

/* 🌟 3. 全螢幕手電筒點陣：滑鼠走到哪，周圍點點亮到哪 */
/* 🌟 第一區：極淡環境底點 (0.12)，游標滑過柔和聚光，不再刺眼 */
#section-plan .spotlight-grid {
    position: absolute !important;
    top: -80px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    height: calc(100% + 160px) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-image: radial-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
    
    /* 🌟 調亮點點：基礎 0.3 (常態清晰)，游標滑過 1.0 (聚光發亮) */
    -webkit-mask-image: radial-gradient(circle 350px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0,0,0,1) 0%, rgba(0,0,0,0.25) 100%) !important;
    mask-image: radial-gradient(circle 350px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0,0,0,1) 0%, rgba(0,0,0,0.25) 100%) !important;
}

body.is-expanded .spotlight-grid {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   3. 前景外層與導覽列
   ========================================================================== */
.stage-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 20;
    pointer-events: none;
}

.site-top-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease;
}

.site-top-header.is-hidden {
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
}

/* 🌟 2. 主導覽列：間距 22px + 純水平抖動（完全對齊 about 標準） */
.nav-links,
.about-nav-links {
    position: fixed !important;
    top: 35px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 22px !important;
    z-index: 100 !important;
    pointer-events: auto !important;
}

.nav-links a.navlink,
.about-nav-links a.navlink {
    padding: 0 10px !important;
    font-size: 22px !important;
    font-family: "Comfortaa", sans-serif !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    color: #f7f7f7 !important;
    display: inline-block !important;
    position: relative !important;
    -webkit-box-reflect: below -4px linear-gradient(transparent 50%, rgba(255, 255, 255, 0.35)) !important;
    text-shadow: -0.5px 0px rgba(0, 255, 255, 0.3), 0.5px 0px rgba(255, 0, 255, 0.3);
    transition: color 0.3s ease !important;
}

.nav-links a.navlink.active,
.about-nav-links a.navlink.active {
    color: #ffffff !important;
}

.nav-links a.navlink:hover,
.about-nav-links a.navlink:hover {
    color: #ff8fdd !important;
    background: transparent !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    animation: rgb-burst 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

@keyframes rgb-burst {
    0%   { text-shadow: 0px 0px transparent, 0px 0px transparent; transform: translateX(0); }
    20%  { text-shadow: -5px 0px #00ffff, 5px 0px #ff00ff; transform: translateX(-2px); }
    40%  { text-shadow: 4px 0px #00ffff, -4px 0px #ff00ff; transform: translateX(2px); }
    60%  { text-shadow: -3px 0px #00ffff, 3px 0px #ff00ff; transform: translateX(-1px); }
    80%  { text-shadow: 2px 0px #00ffff, -2px 0px #ff00ff; transform: translateX(1px); }
    100% { text-shadow: -1px 0px rgba(0, 255, 255, 0.6), 1px 0px rgba(255, 0, 255, 0.6); transform: translateX(0); }
}

@keyframes arrowBounceDown {
    0% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(5px); }
    100% { opacity: 0.3; transform: translateY(0); }
}

@keyframes arrowBounceUp {
    0% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-5px); }
    100% { opacity: 0.3; transform: translateY(0); }
}

.expand-trigger-btn {
    position: absolute;
    top: 515px;
    left: 50%;
    margin-left: 415px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
    font-size: 14px;
    z-index: 9999;
    cursor: pointer !important;
    padding: 8px;
    opacity: 0.7;
    pointer-events: auto;
    transition: opacity 0.1s ease, transform 0.1s ease;
}

.expand-trigger-btn i {
    animation: arrowBounceDown 1.5s infinite ease-in-out;
}
.expand-trigger-btn .arrow-1 { animation-delay: 0s; }
.expand-trigger-btn .arrow-2 { animation-delay: 0.2s; }
.expand-trigger-btn .arrow-3 { animation-delay: 0.4s; }

.expand-trigger-btn:hover {
    opacity: 1;
    transform: translateY(3px);
}

body.is-expanded .expand-trigger-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none !important;
}

.collapse-hint {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: none !important;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
    font-size: 12px;
    cursor: pointer !important;
    padding: 6px 12px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease;
}

.collapse-hint i {
    animation: arrowBounceUp 1.5s infinite ease-in-out;
}
.collapse-hint .arrow-up-3 { animation-delay: 0s; }
.collapse-hint .arrow-up-2 { animation-delay: 0.2s; }
.collapse-hint .arrow-up-1 { animation-delay: 0.4s; }

/* ==========================================================================
   4. 機架容器：展開時轉為滿版滾動軌道
   ========================================================================== */
/* 🌟 核心滾動軌道：進場即滿版常態滾動 */
.roadmap-scroll-rack {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 45 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
}

body.is-expanded .roadmap-scroll-rack {
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important; 
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    perspective: none !important;
}

/* ==========================================================================
   5. 區塊與標題排版（第一區塊 100% 原圖還原：1400px 寬版居中）
   ========================================================================== */
/* 🌟 1. 第一區塊：高度下移，完全對齊參考圖 33 的舒適間距 */
.roadmap-block {
    position: relative !important;
    z-index: 10 !important;
    width: 96vw !important;
    max-width: 1750px !important;
    margin: 0 auto 100px auto !important;
    padding: 75px 0 0 0 !important;     /* 👈 從 60px 改為 75px，標題與卡片自然下沉入位 */
    box-sizing: border-box !important;
    display: block !important;
}

/* 🌟 第一區容器：獨立定位空間，並確保文字與卡匣浮在點陣之上 */
#section-plan.roadmap-block {
    position: relative !important;
    z-index: 10 !important;
}

#section-plan .plan-grid,
#section-plan .block-title {
    position: relative !important;
    z-index: 5 !important;
}

body.is-expanded .roadmap-scroll-rack > .roadmap-block:not(#section-display) {
    position: relative !important;
    z-index: 10 !important;
    width: 96vw !important;
    max-width: 1750px !important;
    margin: 0 auto 100px auto !important;
    padding: 75px 0 0 0 !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* 巨型標題 */
.block-title {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    width: 100% !important;
    font-size: clamp(48px, 5.5vw, 80px) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 24px 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 10 !important;
}

body.is-expanded .block-title {
    font-size: clamp(48px, 5.5vw, 80px) !important; /* 👈 不要突然撐大，保持原尺寸 */
    margin: 0 0 24px 0 !important;                  /* 👈 保持 24px */
}

.title-main {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

.title-main::before {
    content: '' !important;
    display: inline-block !important;
    width: 7px !important;
    height: 48px !important;
    background: #ff8fdd !important;
    border-radius: 4px !important;
    margin-right: 18px !important;
    box-shadow: 0 0 16px rgba(255, 143, 221, 0.85) !important;
}

body.is-expanded .title-main::before {
    width: 7px !important;
    height: 48px !important;
    border-radius: 4px !important;
    margin-right: 18px !important;
    box-shadow: 0 0 16px rgba(255, 143, 221, 0.85) !important;
}

.title-aside {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    font-family: "Comfortaa", sans-serif !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    padding-bottom: 10px !important;
    background: linear-gradient(90deg, #ff8fdd 0%, #00f0ff 50%, #ff8fdd 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: neonFlow 3s linear infinite !important;
    border-bottom: 1px solid rgba(255, 143, 221, 0.45) !important;
}

body.is-expanded .title-aside {
    opacity: 1 !important;
    transform: translateX(0) !important;
    padding-bottom: 10px !important;
    background: linear-gradient(90deg, #ff8fdd 0%, #00f0ff 50%, #ff8fdd 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: neonFlow 3s linear infinite !important;
    border-bottom: 1px solid rgba(255, 143, 221, 0.45) !important;
}

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

/* ==========================================================================
   6. 模組卡匣網格（Plan 01–05）
   ========================================================================== */
.plan-grid {
    display: grid !important;
    grid-template-columns: calc(50% - 12px) calc(50% - 12px) !important;
    gap: 24px !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    perspective: 1400px !important;
    transform-style: preserve-3d !important;
    align-items: stretch !important;
}

.card-sensor-wrapper {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    transform-origin: center top !important;
    will-change: transform, opacity !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

.card-sensor-wrapper:has(.pbox-card),
.pbox-card {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

.step-card,
.pbox-card {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
    transform-style: preserve-3d !important;
    will-change: transform, box-shadow, opacity !important;
    background: linear-gradient(135deg, rgba(30, 35, 45, 0.65) 0%, rgba(15, 18, 24, 0.78) 100%) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 14px !important;
    padding: 32px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    box-sizing: border-box !important;
    cursor: default !important;
    pointer-events: auto !important;
    outline: 16px solid transparent !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
                inset 0 0 0 1px rgba(0, 240, 255, 0.08) !important;
    transition: border-color 0.3s ease,
                box-shadow 0.35s ease,
                background 0.35s ease !important;
}

.step-card *,
.pbox-card * {
    pointer-events: none !important;
}

.step-card::before,
.pbox-card::before {
    content: attr(data-step) !important;
    position: absolute !important;
    top: 22px !important;
    right: 24px !important;
    font-family: 'Comfortaa', cursive !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: rgba(0, 240, 255, 0.4) !important;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.2) !important;
    letter-spacing: 1px !important;
    transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease !important;
    z-index: 4 !important;
}

.card-sensor-wrapper:hover .step-card,
.card-sensor-wrapper:hover .pbox-card,
.step-card:hover,
.pbox-card:hover {
    border-color: #00f0ff !important;
    background: linear-gradient(
        135deg, 
        rgba(45, 28, 38, 0.75) 0%, 
        rgba(24, 15, 20, 0.88) 100%
    ) !important;
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.75),
                0 0 16px rgba(0, 240, 255, 0.85),
                inset 0 1px 1px rgba(255, 255, 255, 0.85),
                inset 0 0 18px rgba(255, 143, 221, 0.2) !important;
}

.card-sensor-wrapper:hover .step-card::before,
.card-sensor-wrapper:hover .pbox-card::before,
.step-card:hover::before,
.pbox-card:hover::before {
    color: #00f0ff !important;
    text-shadow: 0 0 12px rgba(0, 240, 255, 1), 
                 0 0 25px rgba(0, 240, 255, 0.9), 
                 0 0 50px rgba(0, 240, 255, 0.8) !important;
    transform: scale(1.12) !important;
}

.step-card::after,
.pbox-card::after {
    content: '' !important;
    position: absolute !important;
    inset: -60% !important;
    border-radius: 14px !important;
    pointer-events: none !important;
    background: 
        linear-gradient(
            120deg, 
            transparent 35%, 
            rgba(255, 255, 255, 0.03) 44%, 
            rgba(255, 255, 255, 0.28) 49%, 
            rgba(0, 240, 255, 0.38) 51%, 
            rgba(255, 255, 255, 0.08) 53%, 
            transparent 62%
        ),
        linear-gradient(
            60deg, 
            transparent 40%, 
            rgba(255, 255, 255, 0.15) 49.5%, 
            rgba(0, 240, 255, 0.18) 51%, 
            transparent 60%
        ) !important;
    background-position: 
        calc(100% - var(--mouse-percent-x, 50%)) calc(100% - var(--mouse-percent-y, 50%)),
        calc(var(--mouse-percent-x, 50%) * 0.8) calc(var(--mouse-percent-y, 50%) * 0.8) !important;
    background-size: 180% 180%, 180% 180% !important;
    opacity: 0 !important;
    z-index: 2 !important;
    mix-blend-mode: screen !important;
    transition: opacity 0.3s ease !important;
}

.card-sensor-wrapper:hover .step-card::after,
.card-sensor-wrapper:hover .pbox-card::after,
.step-card:hover::after,
.pbox-card:hover::after {
    opacity: 1 !important;
}

.step-card h3,
.pbox-card h3 {
    margin: 0 0 12px 0 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    position: relative !important;
    z-index: 3 !important;
}

.step-card p,
.pbox-card p {
    margin: 0 0 10px 0 !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    position: relative !important;
    z-index: 3 !important;
}

.step-card > *,
.pbox-card > * {
    transition: opacity 0.25s ease !important;
    will-change: opacity, transform !important;
}

/* ==========================================================================
   🌟 45° 實體藍圖封套撲克牌 ➔ 高級發牌飛散落位 (頂部無字 + 下沉50px + 同款霓虹漸層)
   ========================================================================== */

#section-plan {
    perspective: 2200px !important;
}

#section-plan .plan-grid {
    perspective: 2200px !important;
    transform-style: preserve-3d !important;
    position: relative !important;
}

@media screen and (min-width: 601px) {
    /* 進場初始：Grid 真實卡片隱藏就位，完全移除 scale 與 translateZ 的位移差 */
    body.is-deck-dealing #section-plan .card-sensor-wrapper {
        opacity: 0;
        transform: none !important;
        pointer-events: none;
        transition: none !important;
    } 

    /* 發牌交接：全權交由 GSAP 接管，徹底拔除 1.15s transition 與 cubic-bezier 彈跳 */
    body:not(.is-deck-dealing) #section-plan .card-sensor-wrapper {
        opacity: 1;
        transform: none !important;
        transition: none !important;
        pointer-events: auto;
    }

    /* 頂部真實主副標：保持在原生 Y 軸 (translateY(0))，禁止下沉位移，交由 GSAP 淡入 */
    body.is-deck-dealing #section-plan .block-title {
        opacity: 0;
        transform: none !important;
        filter: none !important;
        pointer-events: none;
        transition: none !important;
    }

    body:not(.is-deck-dealing) #section-plan .block-title {
        opacity: 1;
        pointer-events: auto !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    #section-plan .card-sensor-wrapper:nth-child(1) { transition-delay: 0.04s !important; }
    #section-plan .card-sensor-wrapper:nth-child(2) { transition-delay: 0.10s !important; }
    #section-plan .card-sensor-wrapper:nth-child(3) { transition-delay: 0.16s !important; }
    #section-plan .card-sensor-wrapper:nth-child(4) { transition-delay: 0.22s !important; }
    #section-plan .card-sensor-wrapper:nth-child(5) { transition-delay: 0.28s !important; }

    /* 🌟 核心要求 1：一開始左上與右上「完全沒有文字」 */
    body.is-deck-dealing #section-plan .block-title {
        opacity: 0;
        transform: translateY(-20px) !important;
        filter: none !important; /* 👈 移除 blur，杜絕霧化 */
        pointer-events: none;
        transition: none !important;
    }

    /* 展開瞬間：標題才由透明 + 模糊平滑回位定錨到左右兩側 */
    body:not(.is-deck-dealing) #section-plan .block-title {
        opacity: 1;
        pointer-events: auto !important;
        transform: translateY(0) !important;
        filter: blur(0px) !important;
        transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), 
                    opacity 0.9s ease, 
                    filter 0.9s ease !important;
    }

    /* 🌟 核心要求 2：紙牌展示舞台再往下 50px */
    .poker-deck-stage {
        position: absolute;
        top: calc(58% + 0px) !important;
        left: 50%;
        transform: translate(-50%, -50%) translateY(10px); /* 👈 在這裡加 translateY(20px) 往下移 */
        width: 600px;
        height: 200px;
        pointer-events: none;
        z-index: 99;
        perspective: 2200px;
        transform-style: preserve-3d;
        transition: opacity 0.5s ease;
        animation: none !important;
        display: block !important; /* 👈 確保進場正常顯示！ */
    }

    .poker-deck-card {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(26, 30, 38, 0.92) 0%, rgba(13, 16, 22, 0.98) 100%);
        border: 1px solid rgba(0, 240, 255, 0.35);
        border-radius: 16px;
        backdrop-filter: blur(16px);
        box-shadow: 0 40px 80px rgba(0, 0, 0, 0.92), 0 0 25px rgba(0, 240, 255, 0.35);
        transform-origin: center center;
        transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
        box-sizing: border-box;
    }

/* 🌟 1. 預設厚度直接拉到最飽滿的最大值，完全沒有下壓行程 */
.poker-deck-card.card-5 { 
    transform: rotateX(56deg) rotateZ(-38deg) translate3d(0, 0, 0px) scale(0.85); 
    opacity: 0.55; 
}
.poker-deck-card.card-4 { 
    transform: rotateX(56deg) rotateZ(-38deg) translate3d(0, 0, 34px) scale(0.85); 
    opacity: 0.68;
    animation: deckLayer4 3.2s infinite ease-in-out;
}
.poker-deck-card.card-3 { 
    transform: rotateX(56deg) rotateZ(-38deg) translate3d(0, 0, 68px) scale(0.85); 
    opacity: 0.8;
    animation: deckLayer3 3.2s infinite ease-in-out;
}
.poker-deck-card.card-2 { 
    transform: rotateX(56deg) rotateZ(-38deg) translate3d(0, 0, 104px) scale(0.85); 
    opacity: 0.9;
    animation: deckLayer2 3.2s infinite ease-in-out;
}
.poker-deck-card.card-1 { 
    transform: rotateX(56deg) rotateZ(-38deg) translate3d(0, 0, 138px) scale(0.85); 
    opacity: 1;
    border-color: #00f0ff;
    box-shadow: 0 50px 90px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 240, 255, 0.6);
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    animation: deckLayer1 3.2s infinite ease-in-out;
}

    /* 展開飛散時暫停呼吸動畫 */
    .poker-deck-stage.is-exploding .poker-deck-card {
        animation: none !important;
    }

    .deck-cover-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .deck-cover-title {
        font-size: 38px;
        font-weight: 800;
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        line-height: 1;
        letter-spacing: 0.5px;
    }

    .deck-cover-title::before {
        content: '';
        display: inline-block;
        width: 5px;
        height: 28px;
        background: #ff8fdd;
        border-radius: 3px;
        margin-right: 12px;
        box-shadow: 0 0 12px rgba(255, 143, 221, 0.9);
    }

    .deck-cover-step {
        font-size: 13px;
        font-weight: 700;
        color: rgba(0, 240, 255, 0.85);
        letter-spacing: 1.5px;
        font-family: 'Comfortaa', sans-serif;
    }

    /* 🌟 牌面右下角副標：強制穿透 3D 渲染，呈現粉紅到青藍漸層 */
        .deck-cover-aside {
            font-size: 11px !important;
            font-weight: 700 !important;
            letter-spacing: 2.2px !important;
            font-family: 'Comfortaa', sans-serif !important;
            
            /* 粉紅到青藍的線性漸層 */
            background: linear-gradient(90deg, #ff7eb3 0%, #d87bf8 45%, #00f0ff 100%) !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            color: transparent !important;
            
            /* 確保在 3D 旋轉環境下維持圖層渲染 */
            transform: translateZ(1px);
            display: inline-block !important;
            opacity: 1;
        }

    /* 發牌展開時：牌組向四周荷官式飛散淡出 */
    .poker-deck-stage.is-exploding .poker-deck-card.card-1 { 
        transform: rotateX(0deg) rotateZ(0deg) translate3d(-340px, -200px, 120px) scale(1); 
        opacity: 0; 
    }
    .poker-deck-stage.is-exploding .poker-deck-card.card-2 { 
        transform: rotateX(0deg) rotateZ(0deg) translate3d(340px, -200px, 120px) scale(1); 
        opacity: 0; 
    }
    .poker-deck-stage.is-exploding .poker-deck-card.card-3 { 
        transform: rotateX(0deg) rotateZ(0deg) translate3d(-340px, 140px, 120px) scale(1); 
        opacity: 0; 
    }
    .poker-deck-stage.is-exploding .poker-deck-card.card-4 { 
        transform: rotateX(0deg) rotateZ(0deg) translate3d(340px, 140px, 120px) scale(1); 
        opacity: 0; 
    }
    .poker-deck-stage.is-exploding .poker-deck-card.card-5 { 
        transform: rotateX(0deg) rotateZ(0deg) translate3d(0px, 280px, 120px) scale(1); 
        opacity: 0; 
    }
}

/* ==========================================================================
   7. 區塊二：Display Only 滿版獨立吸附舞台與 3D 展台
   ========================================================================== */
#section-display.roadmap-block {
    position: sticky !important;
    top: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    left: 0 !important;
    translate: none !important;
    margin: 0 !important;
    padding: 70px 40px 40px 40px !important;
    box-sizing: border-box !important;
    border-radius: 44px 44px 0 0 !important;
    background: linear-gradient(180deg, #DFD3CE 0%, #c0abc1 60%, #B8ACB2 100%) !important;
    box-shadow: 0 -25px 50px rgba(0, 0, 0, 0.45) !important;
    overflow: hidden !important;
    z-index: 20 !important;
    transform-origin: 50% 50% !important;
    will-change: transform, opacity, border-radius !important;
}

.display-huge-bg-title {
    position: absolute !important;
    bottom: 35px !important;
    top: auto !important;
    left: 50% !important;
    translate: -50% 0;
    width: 100vw !important;
    text-align: center !important;
    font-size: 22px !important;
    font-weight: bolder !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    user-select: none !important;
    z-index: 15 !important;
    color: #1a1614 !important;
    -webkit-text-stroke: 0 !important;
    letter-spacing: 5px !important;
    opacity: 0.95;
    font-family: "Comfortaa", sans-serif !important;
    transform-origin: 50% 50% !important;
    will-change: transform, opacity !important;
}

#section-display .display-title-wrap {
    position: relative !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto 15px auto !important;
    width: 100% !important;
    transform-origin: 50% 50% !important;
    will-change: transform, opacity !important;
}

#section-display .title-main.title-display {
    color: #1a1614 !important;
    font-size: clamp(48px, 6vw, 76px) !important;
    line-height: 1.1 !important;
    justify-content: center !important;
    display: inline-flex !important;
}

#section-display .title-display::before {
    display: none !important;
}

#section-display .title-aside-display {
    opacity: 1 !important;
    transform: none !important;
    margin-top: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 4px !important;
    color: #1a1614 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    animation: none !important;
}

#three-orbit-container {
    position: relative !important;
    width: 100vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    height: 640px !important;
    margin-top: -40px !important; 
    overflow: hidden !important;
    z-index: 10 !important;
    transform-origin: 50% 50% !important;
    will-change: transform, opacity !important;
}

#three-orbit-container canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* ✅ 替換為：提升層級至 99999，穿透 Canvas 遮擋，修復 Hover/Active */
.orbit-nav-arrows {
    display: flex !important;
    justify-content: center !important;
    gap: 80px !important;
    margin-top: -150px !important;
    position: relative !important;
    z-index: 99999 !important;
    pointer-events: none !important; /* 👈 改為 none，讓外框空隙可以順暢滑過 */
    transform-origin: 50% 50% !important;
    will-change: transform, opacity !important;
}

.orbit-nav-arrows button {
    pointer-events: auto !important; /* 👈 只有按鈕本體吃點擊與長按 */
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1.5px solid rgba(26, 22, 20, 0.45) !important;
    color: #1a1614 !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 17px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 100000 !important;
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.orbit-nav-arrows button:hover {
    transform: scale(1.18) !important;
    border-color: #1a1614 !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.orbit-nav-arrows button:active {
    transform: scale(0.92) !important;
    background-color: rgba(26, 22, 20, 0.2) !important;
}

/* ==========================================================================
   8. 區塊三：Executor 雙對稱流光變數
   ========================================================================== */
@property --beam-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@property --beam-spread {
    syntax: '<angle>';
    inherits: false;
    initial-value: 10deg;
}

/* 滿版獨立視窗，強制定錨螢幕正中央 */
#section-executor.roadmap-block {
    position: relative !important;
    z-index: 25 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #0c0e12 !important;
    z-index: 25 !important;
}

#section-executor .block-title {
    display: none !important;
}

/* 黑曜石面板 */
.executor-stage-panel {
    position: relative !important;
    width: 1040px !important;
    max-width: 90vw !important;
    height: 520px !important;
    min-height: 520px !important;
    border-radius: 32px !important;
    padding: 0 60px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 50px !important;
    background: linear-gradient(135deg, rgba(24, 27, 34, 0.96) 0%, rgba(14, 16, 20, 0.98) 100%) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: none !important;
    margin: 0 auto !important;
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.8),
                inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    will-change: transform, box-shadow;
}

/* Hover 浮起 */
/*.executor-stage-panel:hover {
    transform: translateY(-14px) !important;
    box-shadow: 
        0 50px 110px rgba(0, 0, 0, 0.92),
        0 0 40px rgba(0, 240, 255, 0.35),
        0 0 40px rgba(255, 143, 221, 0.26),
        inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
}
*/

/* 第三區防抖護城河 (全面放寬感應區，徹底杜絕死角抖動) */
.executor-stage-panel::before {
    content: '' !important;
    position: absolute !important;
    /* 上、左、右全面大幅外擴至 40px */
    top: -40px !important;              /* 👈 從 -25px 放寬到 -40px，游標從上方切入時絕對穩定 */
    left: -40px !important;             /* 👈 從 -25px 放寬到 -40px */
    right: -40px !important;            /* 👈 從 -25px 放寬到 -40px */
    /* 底部補足面板上浮 -14px 產生的空缺，直接延伸到 -65px */
    bottom: -65px !important;           /* 👈 從 -45px 放寬到 -65px，大幅增加緩衝區 */
    background: transparent !important;
    pointer-events: auto !important;
    z-index: 2 !important;
}

/* 雙對稱旋轉邊緣光刃 */
.stage-border-beam,
.stage-border-beam::before,
.stage-border-beam::after {
    pointer-events: none !important;
}

.stage-border-beam {
    display: block !important;
    position: absolute !important;
    inset: -1.5px !important;
    border-radius: 33.5px !important;
    z-index: 1 !important;
    overflow: visible !important;
    padding: 1.5px !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.stage-border-beam::before {
    content: '' !important;
    position: absolute !important;
    inset: -50% !important;
    background: conic-gradient(
        from var(--beam-angle),
        transparent 0deg,
        rgba(0, 240, 255, 0.95) 25deg,
        #ffffff 35deg,
        rgba(255, 143, 221, 0.95) 45deg,
        transparent 70deg,
        transparent 180deg,
        rgba(255, 143, 221, 0.95) 205deg,
        #ffffff 215deg,
        rgba(0, 240, 255, 0.95) 225deg,
        transparent 250deg
    ) !important;
    animation: rotateBorderBeam 6s linear infinite !important;
}

.stage-border-beam::after {
    content: '' !important;
    position: absolute !important;
    inset: -10px !important;
    border-radius: 40px !important;
    background: conic-gradient(
        from var(--beam-angle),
        transparent 0deg,
        rgba(0, 240, 255, 0.35) 35deg,
        transparent 70deg,
        transparent 180deg,
        rgba(255, 143, 221, 0.35) 215deg,
        transparent 250deg
    ) !important;
    filter: blur(20px) !important;
    opacity: 0.75 !important;
    transition: opacity 0.4s ease, filter 0.4s ease !important;
    animation: rotateBorderBeam 6s linear infinite !important;
    z-index: -1 !important;
}

.executor-stage-panel:hover .stage-border-beam::after {
    opacity: 1 !important;
    filter: blur(36px) !important;
}

@keyframes rotateBorderBeam {
    0% { --beam-angle: 0deg; }
    100% { --beam-angle: 360deg; }
}

/* ==========================================================================
   9. Executor 頭像卡匣 (380px)
   ========================================================================== */
.executor-avatar-wrap {
    width: 380px !important;
    height: 380px !important;
    min-width: 380px !important;
    min-height: 380px !important;
    max-width: 380px !important;
    max-height: 380px !important;
    position: relative !important;
    perspective: 1200px !important;
    border-radius: 28px !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75) !important;
    z-index: 5 !important;
    cursor: default !important;
    flex-shrink: 0 !important;
}

.avatar-card-inner {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    border: none !important;
    outline: none !important;
    transform-style: preserve-3d !important;
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: transform;
}

.executor-avatar-wrap:hover .avatar-card-inner {
    transform: rotateY(360deg) !important;
}

.avatar-face {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 28px !important;
    border: none !important;
    outline: none !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

.avatar-front {
    z-index: 2 !important;
    transform: rotateY(0deg) !important;
}

.avatar-back {
    z-index: 1 !important;
    transform: rotateY(180deg) !important;
}

.executor-avatar-wrap:hover .avatar-front {
    opacity: 0 !important;
}

.executor-avatar-wrap:hover .avatar-back {
    z-index: 3 !important;
    transform: rotateY(0deg) !important;
    opacity: 1 !important;
}

/* SHAKY 待機逐格扭動 */
.executor-avatar,
.shake-frame {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    transform: translateZ(0);
    will-change: opacity;
}

.avatar-front .frame-center {
    opacity: 1 !important;
    z-index: 1 !important;
}

.avatar-front .frame-right {
    z-index: 2 !important;
    opacity: 0;
    animation: shakyStepRight 0.4s infinite steps(1) !important;
}

.avatar-front .frame-left {
    z-index: 2 !important;
    opacity: 0;
    animation: shakyStepLeft 0.4s infinite steps(1) !important;
}

@keyframes shakyStepRight {
    0%, 24.9% { opacity: 1; }
    25%, 100% { opacity: 0; }
}

@keyframes shakyStepLeft {
    0%, 49.9% { opacity: 0; }
    50%, 74.9% { opacity: 1; }
    75%, 100% { opacity: 0; }
}

.executor-avatar-wrap:hover .avatar-front .shake-frame {
    animation-play-state: paused !important;
}

/* ==========================================================================
   10. 右側文字雜誌級排版
   ========================================================================== */
.executor-info-wrap {
    width: 530px !important;
    max-width: 530px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 5 !important;
}

.executor-chapter-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 4px !important;
    color: rgba(255, 255, 255, 0.45) !important;
    margin-bottom: 12px !important;
    font-family: "Comfortaa", sans-serif !important;
}

.executor-tag-badge {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    color: #00f0ff !important;
    background: rgba(0, 240, 255, 0.08) !important;
    border: 1px solid rgba(0, 240, 255, 0.35) !important;
    padding: 5px 14px !important;
    border-radius: 30px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.2) !important;
}

.executor-name-wrap {
    margin: 0 0 16px 0 !important;
    display: block !important;
    transform-origin: left bottom !important;
    will-change: transform;
}

.executor-name-svg {
    display: block !important;
    overflow: visible !important;
}

.svg-mask-text {
    font-size: 30px !important;
    font-weight: 800 !important;
    fill: #ffffff !important;
    letter-spacing: 0.5px !important;
}

.svg-base-text {
    font-size: 30px !important;
    font-weight: 800 !important;
    fill: rgba(255, 255, 255, 0.68) !important;
    letter-spacing: 0.5px !important;
}

.executor-desc {
    font-size: 14.5px !important;
    line-height: 1.75 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin: 0 0 24px 0 !important;
    text-align: left !important;
    transition: color 0.8s ease !important;
}

.executor-desc.is-lit {
    color: rgba(255, 255, 255, 0.88) !important;
}

.executor-actions {
    margin-bottom: 24px !important;
}

.action-start-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 30px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 4px !important;
    transition: all 0.35s ease !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.action-start-btn:hover {
    color: #ff8fdd !important;
    border-color: #ff8fdd !important;
    background: rgba(255, 143, 221, 0.12) !important;
    box-shadow: 0 0 25px rgba(255, 143, 221, 0.4) !important;
}

.executor-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.pill-tag {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.65) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    letter-spacing: 0.6px !important;
}

/* ==========================================================================
   11. 第三區 Footer
   ========================================================================== */
#section-executor footer,
#section-executor .executor-footer {
    position: absolute !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    z-index: 9999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 0.15 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: auto !important;
}

#section-executor footer .global-footer-container {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    color: #ffffff !important;
    font-size: 0.9rem !important;
    font-family: "Comfortaa", sans-serif !important;
    letter-spacing: 0.5px !important;
    pointer-events: auto !important;
}

#section-executor footer .footer-copyright,
#section-executor footer .footer-pipe,
#section-executor footer .footer-btn {
    color: #ffffff !important;
    font-size: 0.9rem !important;
    font-family: "Comfortaa", sans-serif !important;
    display: inline-block !important;
    opacity: 1 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
}

#section-executor footer .footer-pipe {
    margin: 0 8px !important;
    opacity: 0.7 !important;
}

#section-executor footer:hover {
    opacity: 1 !important;
}

#section-executor footer .footer-btn:hover {
    color: #dfc28c !important;
    cursor: pointer !important;
}



/* 🌟 第三區背景點陣：預設常態微亮 (完全對齊圖 34) */
#section-executor .executor-grid {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 0.35 !important;          /* 👈 預設常態就看得見點點 */
    visibility: visible !important;
    background-image: radial-gradient(rgba(255, 255, 255, 0.45) 1.2px, transparent 1.2px) !important;
    background-size: 24px 24px !important;
    transition: opacity 0.4s ease !important;
}

/* 🌟 名片面板本體：完全獨立垂直置中，不再偏高偏低 */
#section-executor .executor-stage-panel {
    position: relative !important;
    z-index: 10 !important;
    margin: 0 auto !important;
    /* 微微往上補償 25px 視覺重心，徹底對齊圖 34 的正中間 */
    transform: translateY(-25px) !important;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Hover 浮起 */
#section-executor .executor-stage-panel:hover {
    transform: translateY(-38px) !important;
}

/* 🌟 Footer 獨立浮貼最底層 24px，完全抽離 flex，不干擾面板 */
#section-executor footer,
#section-executor .executor-footer,
footer.site-footer {
    position: absolute !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 20 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 0.35 !important;
    pointer-events: auto !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   背景點點長方形慢速波紋 (4.5s 絲滑效果，原地增亮、四邊等距外推)
   ========================================================================== */

@property --ripple-dist {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

body.is-expanded:has(#section-executor .executor-stage-panel:hover) .spotlight-grid {
    transform: none !important;
    background-size: 24px 24px !important;
    background-image: radial-gradient(rgba(255, 255, 255, 0.95) 1px, transparent 1px) !important;

    -webkit-mask-image: 
        linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='80' y='60' width='840' height='380' rx='36' fill='none' stroke='black' stroke-width='90' filter='url(%23b)'/%3E%3C/svg%3E") !important;
    mask-image: 
        linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='80' y='60' width='840' height='380' rx='36' fill='none' stroke='black' stroke-width='90' filter='url(%23b)'/%3E%3C/svg%3E") !important;

    -webkit-mask-composite: source-over !important;
    mask-composite: add !important;
    -webkit-mask-position: center center, center center !important;
    mask-position: center center, center center !important;
    -webkit-mask-repeat: no-repeat, no-repeat !important;
    mask-repeat: no-repeat, no-repeat !important;

    -webkit-mask-size: 100% 100%, calc(1040px + var(--ripple-dist) * 2) calc(520px + var(--ripple-dist) * 2) !important;
    mask-size: 100% 100%, calc(1040px + var(--ripple-dist) * 2) calc(520px + var(--ripple-dist) * 2) !important;

    animation: strictFourSideRipple 4.5s cubic-bezier(0.1, 0.7, 0.2, 1) 1 forwards !important;
    will-change: --ripple-dist, filter;
}

@keyframes strictFourSideRipple {
    0% {
        --ripple-dist: 20px;
        filter: brightness(1.7);
    }
    30% {
        filter: brightness(1.7);
    }
    70% {
        filter: brightness(1.4);
    }
    100% {
        --ripple-dist: 900px;
        filter: brightness(1);
    }
}

/* 只要確保舞台有深度的 3D 透視即可 */
#section-plan {
    perspective: 2000px !important;
}

#section-plan .plan-grid {
    perspective: 2000px !important;
    transform-style: preserve-3d !important;
}

/* ==========================================================================
   響應式適配：1440 與 1024 獨立微調
   ========================================================================== */

/* 1. 1024 尺寸 (寬度小於 1200px)：保持緊湊收斂，05 號剛好滿版 */
@media screen and (max-width: 1200px) {
    body.is-expanded .roadmap-scroll-rack > .roadmap-block:not(#section-display) {
        width: 92vw !important;
        padding-top: 76px !important;
        margin-bottom: 60px !important;
    }

    body.is-expanded .block-title {
        font-size: 62px !important;
        margin-bottom: 14px !important;
    }
    body.is-expanded .title-main::before {
        height: 38px !important;
    }

    .plan-grid {
        gap: 16px !important;
    }

    .step-card,
    .pbox-card {
        padding: 18px 26px !important;
    }
    .step-card h3,
    .pbox-card h3 {
        margin-bottom: 8px !important;
        font-size: 18px !important;
    }
    .step-card p,
    .pbox-card p {
        margin-bottom: 6px !important;
        font-size: 13.5px !important;
        line-height: 1.55 !important;
    }

    /* 第三區名片適度縮小 */
    .executor-stage-panel {
        width: 920px !important;
        max-width: 92vw !important;
        gap: 36px !important;
        padding: 0 40px !important;
    }
    .executor-avatar-wrap {
        width: 320px !important;
        height: 320px !important;
        min-width: 320px !important;
        min-height: 320px !important;
    }
}

/* 2. 1440 尺寸：微調版（05 邊框完整露出，同時擋住 Display Only） */
@media screen and (min-width: 1201px) and (max-width: 1500px) {
    body.is-expanded .roadmap-scroll-rack > .roadmap-block:not(#section-display) {
        padding-top: 75px !important;    /* 從 75px 稍微退到 65px，省下 10px 剛好露出 05 底邊 */
        margin-bottom: 160px !important; /* 加大推力，徹底把 Display Only 壓在畫面外 */
    }

    body.is-expanded .block-title {
        font-size: 72px !important;
        margin-bottom: 16px !important;
    }

    .plan-grid {
        gap: 18px !important;
    }

    .step-card,
    .pbox-card {
        padding: 26px 30px !important;  /* 保持大氣厚度，不縮成扁卡片 */
    }

    .step-card p,
    .pbox-card p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 8px !important;
    }
}

/* ==========================================================================
   行動與平板修復：解除滾動限制，同時嚴格放行按鈕互動
   ========================================================================== */
@media screen and (max-width: 900px) {
    html, body.roadmap-body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.is-expanded .roadmap-scroll-rack {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        /* 移除 touch-action: pan-y 避免吞噬子元素點擊 */
    }

    /* 確保按鈕本身觸控與滑鼠事件 100% 獨立放行 */
    .orbit-nav-arrows,
    .orbit-nav-arrows button {
        touch-action: manipulation !important;
        pointer-events: auto !important;
    }

    /* 徹底隱藏懸浮標籤與頂部裝飾 */
    .collapse-hint,
    .nav-indicator,
    [class*="orbit-active-caption"],
    div:has(> a[href*="section-"]),
    .nav-side-tag,
    .nav-links {
        display: none !important;
    }
}

/* ==========================================================================
   768 平板專屬：徹底定死第三區 (杜絕拖曳、名片置中、Footer 完美同框)
   ========================================================================== */
@media screen and (max-width: 820px) {

    /* ---------------- 1. 選單精準控制 ---------------- */
    body:not(.is-expanded) .nav-links {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        top: 535px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 99999 !important;
    }

    body.is-expanded .nav-links,
    body.is-expanded .site-top-header {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .collapse-hint,
    .nav-indicator,
    [class*="orbit-active-caption"],
    div:has(> a[href*="section-"]),
    .nav-side-tag {
        display: none !important;
    }

    /* ---------------- 2. 第一區：排版保持 (05 完整入屏，Display 擋在視窗外) ---------------- */
    body.is-expanded .roadmap-scroll-rack > .roadmap-block:first-child {
        width: 92vw !important;
        padding-top: 64px !important;
        padding-bottom: 20px !important;
        margin-bottom: 40px !important;
    }

    body.is-expanded .block-title {
        font-size: 54px !important;
        margin-bottom: 12px !important;
    }
    body.is-expanded .title-main::before {
        height: 32px !important;
    }

    .plan-grid {
        gap: 14px !important;
    }

    .step-card,
    .pbox-card {
        padding: 16px 22px !important;
    }
    .step-card h3,
    .pbox-card h3 {
        font-size: 16px !important;
        margin-bottom: 6px !important;
    }
    .step-card p,
    .pbox-card p {
        font-size: 12.8px !important;
        line-height: 1.5 !important;
        margin-bottom: 4px !important;
    }

/* ---------------- 3. 第三區：徹底斬斷拖曳手勢與多餘高度 ---------------- */
    body.is-expanded .roadmap-scroll-rack > #section-executor,
    body.is-expanded #section-executor,
    #section-executor.roadmap-block {
        width: 100vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;          /* 👈 恢復 hidden，確保第三區能順利滾出就位 */
        
        touch-action: pan-y !important;
        overscroll-behavior: none !important;
        
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;   /* 👈 垂直完全居中 */
        align-items: center !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    /* 名片容器：拿掉往上提的負 margin，自然垂直置中，上方就有足夠空間讓光暈散開 */
    .executor-stage-panel {
        width: 700px !important;
        min-width: 0 !important;
        max-width: 92vw !important;
        height: 350px !important;
        min-height: 350px !important;
        padding: 0 24px !important;
        gap: 20px !important;
        border-radius: 22px !important;
        margin: 0 auto !important;            /* 👈 改回 0 auto（拿掉 -20px），上緣不再撞頂被切平 */
        transform: none !important;
    }

    .executor-avatar-wrap {
        width: 250px !important;
        height: 250px !important;
        min-width: 250px !important;
        min-height: 250px !important;
        max-width: 250px !important;
        max-height: 250px !important;
        border-radius: 18px !important;
    }
    .avatar-card-inner,
    .avatar-face {
        border-radius: 18px !important;
    }

    .executor-info-wrap {
        width: calc(100% - 270px) !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }

    .executor-chapter-label {
        font-size: 10.5px !important;
        margin-bottom: 4px !important;
    }

    .executor-tag-badge {
        font-size: 10.5px !important;
        padding: 2px 8px !important;
        margin-bottom: 8px !important;
    }

    .executor-name-wrap {
        margin: 0 0 8px 0 !important;
        width: 100% !important;
    }
    .executor-name-svg {
        width: 100% !important;
        max-width: 340px !important;
        height: auto !important;
    }
    .svg-mask-text,
    .svg-base-text {
        font-size: 22px !important;
    }

    .executor-desc {
        font-size: 12px !important;
        line-height: 1.5 !important;
        margin: 0 0 10px 0 !important;
    }

    .executor-actions {
        margin-bottom: 10px !important;
    }
    .action-start-btn {
        padding: 7px 18px !important;
        font-size: 11px !important;
    }

    .executor-tags {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        width: 100% !important;
    }
    .pill-tag {
        font-size: 10.5px !important;
        padding: 2px 7px !important;
        white-space: nowrap !important;
    }

    /* ---------------- 4. Footer：維持目前完美的可視位置 ---------------- */
    #section-executor footer,
    #section-executor .executor-footer {
        display: block !important;
        position: absolute !important;
        bottom: 250px !important;        /* 維持你在圖 1 最滿意的位置 */
        top: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 100 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    #section-executor footer .global-footer-container {
        font-size: 11.5px !important;
        white-space: nowrap !important;
        color: #ffffff !important;
    }

}

/* ==========================================================================
   全尺寸：左右切換按鈕強制生效樣式 (還原原本：Hover 變白、按下變深)
   ========================================================================== */
#section-display .orbit-nav-arrows button,
.orbit-nav-arrows button,
button#btnOrbitLeft,
button#btnOrbitRight {
    background: rgba(255, 255, 255, 0.25) !important;
    border: 1.5px solid rgba(26, 22, 20, 0.45) !important;
    color: #1a1614 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    transform: scale(1) !important;
    box-shadow: none !important;
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                background-color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease !important;
}

/* 🌟 1. Hover 懸停：放大 1.18 倍、背景變純白、泛亮光圈 (如圖 20) */
@media (hover: hover) and (pointer: fine) {
    #section-display .orbit-nav-arrows button:hover,
    button#btnOrbitLeft:hover,
    button#btnOrbitRight:hover {
        transform: scale(1.18) !important;
        border-color: #1a1614 !important;
        background-color: #ffffff !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22), 0 0 15px rgba(255, 255, 255, 0.8) !important;
    }
}

#section-display .orbit-nav-arrows button.is-hovered,
button#btnOrbitLeft.is-hovered,
button#btnOrbitRight.is-hovered {
    transform: scale(1.18) !important;
    border-color: #1a1614 !important;
    background-color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22), 0 0 15px rgba(255, 255, 255, 0.8) !important;
}

/* 🌟 2. Active 按下：顏色變深、下壓微縮 0.92 倍 (如圖 21 原版手感) */
#section-display .orbit-nav-arrows button:active,
#section-display .orbit-nav-arrows button.is-active,
button#btnOrbitLeft:active,
button#btnOrbitLeft.is-active,
button#btnOrbitRight:active,
button#btnOrbitRight.is-active {
    transform: scale(0.92) !important;
    background-color: rgba(26, 22, 20, 0.28) !important; /* 👈 還原原本的深色半透明 */
    border-color: #1a1614 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) inset !important; /* 內陰影增強下壓沉浸感 */
    transition: transform 0.05s ease !important;
}

/* ==========================================================================
   📱 手機直接展開完全版 (再拉高一點點 + pill-tag 緊湊化)
   ========================================================================== */
@media screen and (max-width: 600px) {

    /* 0. 滿版視窗定錨 */
    html, body, body.roadmap-body,
    .gallery-viewport {
        margin: 0 !important;
        padding: 0 !important;
        width: 100vw !important;
        height: 100% !important;
        overflow: hidden !important;
        background: #12161a !important;
        background-color: #12161a !important;
    }

    /* 隱藏首頁底板與多餘觸發按鈕 */
    .stage-backdrop,
    .expand-trigger-btn,
    .collapse-hint,
    .nav-links,
    #main-top-header {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* 1. 核心滾動軌道 (拉高底部滑動裕度至 110px，長螢幕自然向上抬升) */
    body.is-expanded .roadmap-scroll-rack {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        padding: 45px 16px 110px 16px !important;  /* 👈 底部再推高一點 */
        box-sizing: border-box !important;
        z-index: 45 !important;
        perspective: none !important;
        background: #090a0d !important;
    }

    /* 2. SHAKY 置頂公仔 */
    .shaky-character-wrapper {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        height: 320px !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 10px auto 10px auto !important;
        pointer-events: none !important;
        z-index: 50 !important;
    }

    .shaky-character-wrapper img#shakyimg {
        width: 290px !important;
        height: 310px !important;
        max-width: 85vw !important;
        max-height: 320px !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
        transform: none !important;
    }

    /* 3. 第一區塊 (Plan 01~05) */
    .roadmap-block,
    body.is-expanded .roadmap-scroll-rack > .roadmap-block:not(#section-display) {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 20px auto !important;
        padding: 12px 0 0 0 !important;
        opacity: 1 !important;
        transform: none !important;
        touch-action: pan-y !important;
        display: block !important;
        position: relative !important;
    }

    .block-title {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        margin: 0 0 20px 0 !important;
    }

    .title-main {
        font-size: 34px !important;
        line-height: 1 !important;
    }

    .title-main::before {
        height: 24px !important;
        width: 5px !important;
        margin-right: 10px !important;
    }

    .title-aside {
        display: inline-block !important;
        opacity: 1 !important;
        transform: none !important;
        font-size: 11px !important;
        letter-spacing: 2px !important;
        padding-left: 15px !important;
        padding-bottom: 2px !important;
        color: rgba(255, 255, 255, 0.55) !important;
    }

    .plan-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .step-card, .pbox-card {
        padding: 22px 18px !important;
        border-radius: 16px !important;
    }

    /* 4. 第二區塊 (Display Only) */
    div#section-display,
    #section-display,
    #section-display.roadmap-block,
    body.is-expanded #section-display,
    body.is-expanded .roadmap-scroll-rack > #section-display {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        translate: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 24px 16px 16px 16px !important;
        margin: 10px auto 10px auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        border-radius: 32px !important;
        touch-action: pan-y !important;
        opacity: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        z-index: 20 !important;
    }

    #section-display .title-main.title-display {
        font-size: 34px !important;
        line-height: 1 !important;
        order: 1 !important;
    }

    #section-display .title-aside-display {
        margin-top: 4px !important;
        order: 2 !important;
    }

    #three-orbit-container {
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        transform: none !important;
        height: 330px !important;
        margin-top: -10px !important;
        overflow: hidden !important;
        touch-action: pan-y !important;
        opacity: 1 !important;
        order: 3 !important;
    }

    #three-orbit-container canvas {
        width: 100% !important;
        height: 100% !important;
        touch-action: pan-y !important;
    }

    .orbit-nav-arrows {
        margin-top: -30px !important;
        margin-bottom: 15px !important;
        gap: 50px !important;
        position: relative !important;
        z-index: 50 !important;
        pointer-events: none !important;
        transform: none !important;
        opacity: 1 !important;
        order: 4 !important;
    }

    .orbit-nav-arrows button {
        pointer-events: auto !important;
        width: 44px !important;
        height: 44px !important;
    }

    .display-huge-bg-title {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        translate: none !important;
        margin: 0 auto 4px auto !important;
        font-size: 14px !important;
        letter-spacing: 4px !important;
        width: 100% !important;
        text-align: center !important;
        opacity: 0.9 !important;
        font-weight: 700 !important;
        color: #1a1614 !important;
        order: 5 !important;
    }

    /* 5. 第三區塊 (Executor) */
    div#section-executor,
    #section-executor,
    #section-executor.roadmap-block,
    body.is-expanded #section-executor,
    body.is-expanded .roadmap-scroll-rack > #section-executor {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 5px 0 5px 0 !important;
        margin: 5px auto 0 auto !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        touch-action: pan-y !important;
        overscroll-behavior: auto !important;
        overflow: visible !important;
        opacity: 1 !important;
        transform: none !important;
        z-index: 25 !important;
    }

    #section-executor #executorGrid,
    #section-executor .executor-grid {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

    /* 🌟 名片面板本體：無論點擊、hover、active，都絕對不准 translateY 上浮！ */
    #section-executor .executor-stage-panel,
    .executor-stage-panel,
    #section-executor:hover .executor-stage-panel,
    #section-executor .executor-stage-panel:hover,
    .executor-stage-panel:hover,
    #section-executor .executor-stage-panel:active,
    .executor-stage-panel:active,
    #section-executor .executor-stage-panel:focus-within {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;          /* 👈 徹底鎖死，永遠不准上移 */
        width: 92vw !important;
        max-width: 380px !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: auto !important;
        padding: 24px 18px 20px 18px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        border-radius: 24px !important;
        margin: 0 auto !important;
        touch-action: pan-y !important;
        opacity: 1 !important;
        z-index: 10 !important;
        pointer-events: auto !important;
        box-shadow: 0 35px 80px rgba(0, 0, 0, 0.8),
                    inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
    }

    .executor-stage-panel::before {
        display: none !important;
    }

    .stage-border-beam {
        inset: 0 !important;
        border-radius: 24px !important;
        padding: 1.5px !important;
        overflow: hidden !important;
    }

    .stage-border-beam::before {
        inset: -100% !important;
    }

    .stage-border-beam::after {
        display: none !important;
    }

    /* 🌟 頭像卡匣：尺寸固定，原地自轉 */
    .executor-avatar-wrap {
        width: 130px !important;
        height: 130px !important;
        min-width: 130px !important;
        min-height: 130px !important;
        max-width: 130px !important;
        max-height: 130px !important;
        border-radius: 20px !important;
        margin: 0 auto !important;
        flex-shrink: 0 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    .avatar-card-inner, .avatar-face {
        border-radius: 20px !important;
        pointer-events: auto !important;
    }

    .executor-info-wrap {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .executor-chapter-label {
        font-size: 11px !important;
        letter-spacing: 2px !important;
        margin-bottom: 4px !important;
    }

    .executor-tag-badge {
        font-size: 11px !important;
        letter-spacing: 1.5px !important;
        padding: 3px 12px !important;
        margin-bottom: 8px !important;
    }

    .executor-name-wrap {
        margin: 0 auto 8px auto !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        transform: none !important;
    }

    .executor-name-svg {
        display: block !important;
        width: 320px !important;
        height: 38px !important;
        margin: 0 auto !important;
        overflow: visible !important;
        transform: translateX(70px) !important;
    }

    .svg-mask-text,
    .svg-base-text {
        font-size: 21px !important;
        letter-spacing: 0.5px !important;
    }

    .executor-desc {
        font-size: 12.5px !important;
        line-height: 1.55 !important;
        margin: 4px auto 12px auto !important;
        text-align: center !important;
        width: 100% !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
    }

    .executor-actions {
        margin-bottom: 14px !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .action-start-btn {
        margin: 0 auto !important;
        pointer-events: none !important; /* 👈 徹底禁止點擊，手勢穿透，不開信箱 */
        cursor: default !important;
    }

    .executor-tags {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

    /* 🌟 加入要求的緊湊 padding */
    .pill-tag {
        padding: 2px 4px !important;
        font-size: 10.5px !important;
        white-space: nowrap !important;
    }

    /* 6. Footer：緊跟在名片正下方，拉高離底距離 */
    #section-executor footer,
    #section-executor .executor-footer,
    footer.site-footer {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 16px auto 0 auto !important;    /* 👈 縮減間距，往上提拉 */
        padding: 0 10px !important;
        width: 100% !important;
        opacity: 0.85 !important;
        text-align: center !important;
        pointer-events: auto !important;
        display: block !important;
        visibility: visible !important;
        z-index: 20 !important;
    }

    #section-executor footer .global-footer-container {
        display: block !important;
        font-family: "Comfortaa", sans-serif !important;
        font-size: 12px !important;
        line-height: 1.6 !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* 第 1 排：版權文字 */
    #section-executor footer .footer-copyright {
        display: block !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        opacity: 0.95 !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 4px !important;
        white-space: nowrap !important;
    }

    #section-executor footer .footer-copyright + .footer-pipe {
        display: none !important;
    }

    /* 第 2 排：按鈕與直槓保持橫向一行 */
    #section-executor footer .footer-btn {
        display: inline-block !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        color: #ffffff !important;
        opacity: 0.9 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }

    #section-executor footer .footer-pipe {
        display: inline-block !important;
        margin: 0 8px !important;
        font-size: 11px !important;
        color: #ffffff !important;
        opacity: 0.5 !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }
}

/* ==========================================================================
   第三區：電腦版專屬 (寬度 > 600px 時才執行絕對居中，絕不干擾手機)
   ========================================================================== */
@media screen and (min-width: 601px) {
    /* 1. 滿版視窗 */
    #section-executor.roadmap-block,
    body.is-expanded #section-executor {
        position: relative !important;
        width: 100vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background-color: #12161a !important;
        z-index: 25 !important;
    }

    /* 2. 名片面板：強制絕對定位螢幕正中央 */
    #section-executor .executor-stage-panel {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        z-index: 10 !important;
        transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease !important;
    }

    /* Hover 浮起 */
    #section-executor .executor-stage-panel:hover {
        transform: translate(-50%, calc(-50% - 14px)) !important;
    }

    /* 3. 桌機底層點點 */
    #section-executor #executorGrid,
    #section-executor .executor-grid {
        position: absolute !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        pointer-events: none !important;
        z-index: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
        background-image: radial-gradient(rgba(255, 255, 255, 0.45) 1.2px, transparent 1.2px) !important;
        background-size: 24px 24px !important;
        -webkit-mask-image: radial-gradient(circle 350px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0,0,0,1) 0%, rgba(0,0,0,0.25) 100%) !important;
        mask-image: radial-gradient(circle 350px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0,0,0,1) 0%, rgba(0,0,0,0.25) 100%) !important;
    }

    /* 4. Hover 名片波紋 */
    #section-executor:has(.executor-stage-panel:hover) #executorGrid,
    #section-executor:has(.executor-stage-panel:hover) .executor-grid {
        opacity: 1 !important;
        background-image: radial-gradient(rgba(255, 255, 255, 0.95) 1px, transparent 1px) !important;
        -webkit-mask-image: 
            linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='80' y='60' width='840' height='380' rx='36' fill='none' stroke='black' stroke-width='90' filter='url(%23b)'/%3E%3C/svg%3E") !important;
        mask-image: 
            linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='80' y='60' width='840' height='380' rx='36' fill='none' stroke='black' stroke-width='90' filter='url(%23b)'/%3E%3C/svg%3E") !important;
        -webkit-mask-composite: source-over !important;
        mask-composite: add !important;
        -webkit-mask-position: center center, center center !important;
        mask-position: center center, center center !important;
        -webkit-mask-repeat: no-repeat, no-repeat !important;
        mask-repeat: no-repeat, no-repeat !important;
        -webkit-mask-size: 100% 100%, calc(1040px + var(--ripple-dist, 0px) * 2) calc(520px + var(--ripple-dist, 0px) * 2) !important;
        mask-size: 100% 100%, calc(1040px + var(--ripple-dist, 0px) * 2) calc(520px + var(--ripple-dist, 0px) * 2) !important;
        animation: strictFourSideRipple 4.5s cubic-bezier(0.1, 0.7, 0.2, 1) 1 forwards !important;
    }

    /* 5. Footer 固定在螢幕底部 24px */
    #section-executor footer,
    #section-executor .executor-footer,
    footer.site-footer {
        position: absolute !important;
        bottom: 24px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        z-index: 20 !important;
        opacity: 0.15 !important;
    }
}

/* ==========================================================================
   3D 卡片「風琴分層拉開」Keyframes + 螢幕底端 20px 提示
   ========================================================================== */
/* 🌟 2. 呼吸動畫在飽滿狀態下輕微向上浮動（不再縮回 104px） */
@keyframes deckLayer1 {
    0%, 100% { transform: rotateX(56deg) rotateZ(-38deg) translate3d(0, 0, 138px) scale(0.85); }
    50%      { transform: rotateX(56deg) rotateZ(-38deg) translate3d(0, 0, 150px) scale(0.85); } 
}
@keyframes deckLayer2 {
    0%, 100% { transform: rotateX(56deg) rotateZ(-38deg) translate3d(0, 0, 104px) scale(0.85); }
    50%      { transform: rotateX(56deg) rotateZ(-38deg) translate3d(0, 0, 114px) scale(0.85); } 
}
@keyframes deckLayer3 {
    0%, 100% { transform: rotateX(56deg) rotateZ(-38deg) translate3d(0, 0, 68px) scale(0.85); }
    50%      { transform: rotateX(56deg) rotateZ(-38deg) translate3d(0, 0, 76px) scale(0.85); }  
}
@keyframes deckLayer4 {
    0%, 100% { transform: rotateX(56deg) rotateZ(-38deg) translate3d(0, 0, 34px) scale(0.85); }
    50%      { transform: rotateX(56deg) rotateZ(-38deg) translate3d(0, 0, 40px) scale(0.85); }  
}

/* 🌟 提示字本體與淡出控制 */
.deck-scroll-hint {
    position: fixed !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(0) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    color: rgba(255, 255, 255, 0.15) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 3.5px !important;
    font-family: 'Comfortaa', sans-serif !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    z-index: 99999 !important;
    opacity: 1 !important;
    transition: opacity 0.35s ease, transform 0.35s ease !important;
    animation: hintBreathe 2s infinite ease-in-out !important;
}

/* 滾動時立即隱藏淡出 */
.deck-scroll-hint.is-hidden {
    opacity: 0 !important;
    transform: translateX(-50%) translateY(20px) !important;
    pointer-events: none !important;
    animation: none !important;
}

.deck-scroll-hint i {
    font-size: 10px !important;
    /* 🌟 改用 rgba，給予 40% 的青藍色柔光，不再死亮刺眼 */
    color: rgba(0, 240, 255, 0.45) !important;
    /* 🌟 動畫拉長到 2.2s，上下浮動更平緩優雅 */
    animation: arrowSoftBreathe 2.2s infinite ease-in-out !important;
}

/* 牌組展開時，提示字同步平滑淡出 */
.poker-deck-stage.is-exploding .deck-scroll-hint {
    opacity: 0 !important;
    transform: translateX(-50%) translateY(15px) !important;
    transition: all 0.4s ease;
}

/* 🌟 核心：透明度最高只到 0.45，最低 0.15，跟隨上方文字做細膩呼吸 */
@keyframes arrowSoftBreathe {
    0%, 100% {
        opacity: 0.18;
        transform: translateY(0);
    }
    50% {
        opacity: 0.45;
        transform: translateY(4px); /* 👈 位移縮小為 4px，動作更細緻 */
    }
}


/* ==========================================================================
   Roadmap 專屬：單頁強制壓制 1024px 兩側小字（不改動 shaky-interactive.css）
   ========================================================================== */
@media screen and (max-width: 1024px) {
    /* 🌟 全面關閉過渡動畫並強制隱藏，徹底打消 shaky-interactive.css 的 0.5s 延遲浮現 */
    html body.roadmap-body .nav-side-tag,
    html body.is-expanded .nav-side-tag,
    html body .site-top-header .nav-side-tag,
    html body #navLinks .nav-side-tag {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: none !important;   /* 👈 核心：拔除 0.5s 動畫，防止延遲被叫醒 */
        animation: none !important;
    }
}

/* 🌟 2. 768px 以下：以全路徑強行隱藏 NAV，只留漢堡按鈕 */
@media screen and (max-width: 768px) {
    html body .nav-links,
    html body .about-nav-links,
    html body #main-top-header .nav-links {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* 確保漢堡按鈕顯現 */
    html body .menu-btn,
    html body .hamburger-btn,
    html body .menu-toggle,
    html body .nav-hamburger {
        display: flex !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        z-index: 99999 !important;
    }
}

/* ==========================================================================
   Roadmap 專屬：手機版漢堡選單微調（往內收，對齊卡片邊界）
   ========================================================================== */
@media screen and (max-width: 600px) {
    body.roadmap-body .menu-container {
        right: 20px !important; /* 👈 從 20px 往左內收 8px，視覺比例更平衡對稱 */
        top: 15px !important;
    }
}