/* --- 🎯 Drupal 嵌入專用容器（撐開空間，防止下半部內容被遮擋） --- */
.stadium-game-vessel {
    position: relative;
    width: 100%;
    height: 100vh; /* 桌機版：元件在 Drupal 頁面中佔用整格螢幕高度 */
    min-height: 650px; /* 確保大螢幕下基本的視覺空間 */
    /* background-color: #0b0f19; */
    overflow: hidden; /* 把動畫與多餘區塊鎖在區塊內 */
}

/* --- 基礎重設（限定在此元件內，不污染全站） --- */
.stadium-game-vessel * {
    box-sizing: border-box;
}

/* --- 頁面切換核心邏輯（由原本的相對於 body，改為相對於 .stadium-game-vessel） --- */
.page1-container, .page2-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 完美填滿父容器高度，不向下溢出 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

.page1-container.active, .page2-container.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

/* --- 第一頁：影片與內容 --- */
.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.main-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-around; 
    align-items: center;
    text-align: center;
    padding: 6vh 20px; 
}

.page1-container .title {color: #ffffff;font-size: 36px;width: 100%;/* font-weight: 700; */margin: 0 0 15px 0;letter-spacing: 0.5px;/* text-shadow: 0 2px 10px rgba(0,0,0,0.6); */}
.page1-container .subtitle {color: #ffffff;font-size: 18px;width: 100%;font-weight: 400;line-height: 1.4;margin: 0;opacity: 0.9;/* text-shadow: 0 2px 8px rgba(0,0,0,0.6); */}
.page1-container .orange-btn {background-color: #d34400;color: white;font-size: 16px;font-weight: 600;padding: 12px 60px;border: none;border-radius: 4px;cursor: pointer;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);transition: background-color 0.2s, transform 0.2s;margin-top: auto;}
.page1-container .orange-btn:hover { background-color: #e64800; transform: translateY(-2px); }

/* --- 第二頁：地圖導覽區 --- */
.map-wrapper {
    position: relative;
    width: 100%;
    height: 100%; /* 填滿父容器 */
    background-image: url('https://www.zyxel.com/sites/zyxel/files/library/assets/newsletters/202606_game/p2_1920x1000.jpg');
    background-size: cover;
    background-position: top;
}

.top-instruction {
    position: absolute;
    top: 4vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    text-align: center;
    width: 65%;
}

.top-instruction p {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 400;
    /* text-shadow: 0 2px 8px rgba(0,0,0,0.8); */
}

/* --- 白點基礎與「絕對同步」的雙層呼吸樣式 --- */
.hotspot {
    --spot-color: #ffffff;
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: var(--spot-color);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 5;
    outline: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    transform: translate(-50%, -50%);
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
}

.hotspot::before, .hotspot::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--spot-color);
    border-radius: 50%;
    box-sizing: border-box;
    pointer-events: none;
    transform-origin: center;
    animation: pulseRipple 2s cubic-bezier(0.25, 0, 0, 1) infinite;
}
.hotspot::after { animation-delay: 1s; }

/* 點擊選中狀態：不停止呼吸，只把變數覆蓋成亮黃色 */
.hotspot.active {
    --spot-color: #d34400;
    box-shadow: 0 0 0 4px rgb(211 68 0 / 30%), 0 0 20px #d34400;
    /* transform: translate(-50%, -50%) scale(1.1); */
}

@keyframes pulseRipple {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(3); opacity: 0; }
}

/* 6 個白點桌機定位 */
.spot-1 {top: 80%;left: 24.5%;}
.spot-2 {top: 60%;left: 22.5%;}
.spot-3 {top: 50%;left: 41.5%;}
.spot-4 {top: 84%;left: 55%;}
.spot-5 {top: 34%;left: 70%;}
.spot-6 {top: 58%;left: 79%;}

/* --- 桌機版對話框結構（控制在容器內部） --- */
.info-card-overlay {
    position: absolute;
    top: 25%;
    z-index: 10;
    display: none; 
    pointer-events: none;
}
.info-card-overlay.active { display: block; }
.info-card-overlay.side-right { right: 5%; left: auto; }
.info-card-overlay.side-left { left: 5%; right: auto; }

.card-content {
    background: rgb(255 255 255 / 100%);
    /* backdrop-filter: blur(12px); */
    border-radius: 15px;
    padding: 25px;
    width: 460px;
    max-height: 65vh;
    overflow-y: auto;
    pointer-events: auto;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    animation: cardFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(10px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 對話框內細節 */
.card-content::-webkit-scrollbar { width: 5px; }
.card-content::-webkit-scrollbar-track { background: transparent; margin: 15px 0; }
.card-content::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 10px; }
.card-content::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); }

.card-content .close-btn {position: absolute;top: 6px;right: 14px;font-size: 28px;background: none;border: none;cursor: pointer;color: #666;/* transition: color 0.2s; */}
.card-content .close-btn:hover { color: #000; }
.card-title {font-size: 24px;color: #000;font-weight: 700;margin-bottom: 18px;}
.section-title {font-size: 16px;font-weight: 700;margin-top: 18px;margin-bottom: 6px;}
.text-green {color: #298719;}
.card-text {/* font-size: 16px; */}

.badge-group {display: flex;gap: 10px;flex-wrap: wrap;margin-top: 10px;}
a.equipment-badge {
    display: inline-block;
    background-color: #298719;
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 300;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.1s;
    cursor: pointer;
}
a.equipment-badge:hover { background-color: #006e18;/*  transform: translateY(-1px); */ }

.benefit-list { list-style-type: none; padding-left: 0; }
.benefit-list li {font-size: 15px;margin-bottom: 8px;position: relative;padding-left: 15px;font-weight: 300;}
.benefit-list li::before {content: "•";color: #000000;/* font-weight: bold; */position: absolute;left: 0;top: 0;}


@media screen and (max-width: 768px) {
    .stadium-game-vessel {
        height: auto; 
        overflow: visible; 
        min-height: 80vh;
    }

    #page-2 {
        position: relative; 
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .page1-container {
        height: 80vh; 
        position: absolute;
    }
    .page1-container:not(.active) {
        display: none; 
    }

    .page1-container .title,
    .page1-container .subtitle{
        text-align: left;
        width: 80%;
        padding:0 15px;
    }

    /* 上半部地圖區 */
    .map-wrapper {
        height: 72vh;
        width: 100%;
        flex-shrink: 0;
        background-image: url('https://www.zyxel.com/sites/zyxel/files/library/assets/newsletters/202606_game/p2_mobile.jpg');
        background-position: center;
    }

    .top-instruction { 
        top: 5%;
        width: 90%; 
    }
    .top-instruction p { font-size: 15px; text-align: left; }
    .hotspot { width: 14px; height: 14px; }

    /* 6 個手機版白點精準定位 */
    .spot-1 { top: 83%; left: 16%; }
    .spot-2 { top: 65%; left: 14%; }
    .spot-3 { top: 52%; left: 37%; }
    .spot-4 { top: 84%; left: 57%; }
    .spot-5 { top: 45%; left: 81%; }
    .spot-6 { top: 66%; left: 86%; }

    /* 下半部對話框配置 */
    .info-card-overlay {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        height: auto;
        padding: 18px 0 0 0; 
    }
    
    .info-card-overlay.side-right { right: 0; left: 0; }
    .info-card-overlay.side-left { left: 0; right: 0; }
    
    .card-content {
        position: relative;
        width: 100%;
        max-height: none;
        box-shadow: none;
        background: #e0e0e0;
        border-radius: 20px;
        margin-top: 0; 
        padding: 20px 25px;
    }

    .info-card-overlay::before {
        content: '';
        position: absolute;
        top: 4px;
        left: 15%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 16px 16px 16px;
        border-color: transparent transparent #e0e0e0 transparent;
        pointer-events: none;
        display: block;
    }

    .card-content .close-btn {
        display: none;
    }
}

@media screen and (max-width: 575.98px){
    .page1-container .title,
    .page1-container .subtitle{
        text-align: left;
        width: 100%;
    }
    .map-wrapper {
        height: 48vh;
    }
}
@media screen and (max-width: 390px){
    /* .map-wrapper{
        height: 54vh;
    } */
    .region-content .basic-page .content h2{
        font-size: 22px;
    }
}