body {
    background: url('../assets/img/selectgame/bg-pc.jpg') no-repeat center center fixed;
    background-size: cover;  /* 讓背景填滿 */
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: white;
    max-width: 80%;  /* ✅ 限制最大寬度，避免擋住選單 */
    margin: 0 auto;  /* ✅ 讓 `game-menu` 保持置中 */
    z-index: auto;
}


/* 確保 LOGO 和廣告貼齊左右兩側 */
.container {
    width: 100%;
    position: relative;
    max-width: 80%;  /* ✅ 限制最大寬度，避免擋住選單 */
    margin: 0 auto;  /* ✅ 讓 `game-menu` 保持置中 */
    z-index: auto;
}

/* 遊戲選單（保持居中） */
.game-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 125px;
    z-index: -100; /* 確保永遠在最上層 */
}


/* test */
.carousel-wrapper {
  overflow-x: auto;         /* ✅ 開放水平滾動 */
  overflow-y: hidden;       /* ✅ 禁止垂直滾動 */
  white-space: nowrap;      /* ✅ 防止元素自動換行 */
  -webkit-overflow-scrolling: touch; /* ✅ 移動裝置流暢滾動 */
}

#carousel {
  display: flex;
  gap: 20px;
  cursor: grab;
  user-select: none;
  overflow-x: scroll;
  scroll-behavior: smooth;
  padding: 20px;
}

#carousel.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.game-menu {
  display: flex;
  flex-wrap: nowrap;     /* ✅ 防止卡片自動換行 */
  gap: 20px;
  padding: 20px 0;
  width: max-content;    /* ✅ 自動根據內容寬度展開 */
}




/* 當滑鼠移動到 game-card 時，顯示對應的 enter-image */
.game-card:hover .enter-image {
    opacity: 1;
}

/* 進入提示圖片 */
.enter-image {
    position: absolute;
    bottom: 12%; /* 確保圖片顯示在卡片底部 */
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    z-index: 9999999; /* ✅ 加上 z-index 確保在上層 */

}

.overlay {
  position: absolute;
  width: 150%;
  height: 150%;
  top: 0;
  left: 0;
  pointer-events: none; /* 🔥關鍵！讓滑鼠事件穿透 */
}

.image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.image-wrapper:hover .enter-image {
  opacity: 1;
}

.enter-image {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  z-index: 10;
}


/* 開發提示 */
.dev-label {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%); /* 完全置中 */
    background: red;
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding: 5px 16px;
    border-radius: 6px;
    z-index: 10; /* 確保標籤顯示在最上層 */
}


.develop {
    position: relative;
    cursor: not-allowed; /* 禁止點擊 */
}
.disabled {
    pointer-events: none; /* 禁止點擊 */
}

/* 底部橫幅 */
.footer-banner {
    position: fixed; /* 固定在頁面底部 */
    bottom: 0;
    left: 0;
    width: 100vw; /* 讓它填滿整個寬度 */
    height: 80px; /* 可以調整這個值讓圖片更高 */
    background: url('../assets/img/selectgame/sponsor-pc.png') no-repeat center center,  /* 疊加兩張背景圖 */
                url('../assets/img/selectgame/bottom-pc.png') no-repeat center center;
    background-size: contain, cover; /* 第一張填滿，第二張保持原尺寸 */
    z-index: 10; /* 確保在最上層 */
}




/* 手機版適配 */
@media (max-width: 768px) {
    body {
        background: url('../assets/img/selectgame/bg-pc.jpg') no-repeat center center fixed;
        background-size: cover;  /* 讓背景填滿 */
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100vh;
        width: 100vw;
    }

    /* 開發提示 */
    .dev-label {
        position: absolute;
        top: 8%;
        left: 18%;
        width: 100px;
        transform: translate(-50%, -50%); /* 完全置中 */
        background: red;
        color: white;
        font-size: 24px;
        font-weight: bold;
        padding: 4px 2px;
        border-radius: 6px;
        z-index: 10; /* 確保標籤顯示在最上層 */
    }

    /* 確保 LOGO 和廣告貼齊左右兩側 */
    .container {
        width: 100%;
        position: relative;
        max-width: 100%;  /* ✅ 限制最大寬度，避免擋住選單 */
        margin: 0 auto;  /* ✅ 讓 `game-menu` 保持置中 */
        left: 50px;
        z-index: auto;
    }

        /* test */
    .carousel-wrapper {
        overflow-x: auto;         /* ✅ 開放水平滾動 */
        overflow-y: hidden;       /* ✅ 禁止垂直滾動 */
        white-space: nowrap;      /* ✅ 防止元素自動換行 */
        -webkit-overflow-scrolling: touch; /* ✅ 移動裝置流暢滾動 */
    }


    .game-menu {
        max-width: 100%;  /* ✅ 限制最大寬度，避免擋住選單 */
        margin: 0 auto;  /* ✅ 讓 `game-menu` 保持置中 */
        flex-direction: column;
        gap: 20px;
        margin-top: 140px;
        margin-bottom: 110px;
        z-index: -100; /* 確保永遠在最上層 */
        width: 400px;
    }
    
    .game-card {
        width: 110%;
        max-width: 110%;
        height: auto;
        overflow: hidden;
    }

    .game-card picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }


    .enter-image {
        content: url('../assets/img/selectgame/Enter-mb.png');

        width: 315px;
        bottom: 42px;
    }

    /* 進入提示圖片 */
    .enter-image {
        position: relative;
        width: 100%;
        opacity: 0;
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
        z-index: 9999999; /* ✅ 確保在上層 */
        transform: translateY(-30%);
        left: 0; /* 確保不會偏移到右邊 */
    }


    .footer-banner {
        width: 100%;
        background-size: cover;
        z-index: 1000; /* 確保在最上層 */
    }

  .carousel-wrapper, .game-menu {
    width: 100%;
    overflow: hidden;  /* 防止橫向滾動 */
  }

  .game-card {
    width: 100%;  /* 讓每個遊戲卡片填滿寬度 */
    box-sizing: border-box;  /* 確保寬度計算不會受到 padding 影響 */
  }
}

/* 只在桌機寬度生效 */
@media (min-width: 769px) {

  /* 讓 track 的間距也跟視窗縮放（可選） */
  .carousel-wrapper .game-menu,
  .carousel-wrapper #carousel {
    gap: clamp(12px, 1.6vw, 24px);
  }

  /* 卡片：用 clamp + aspect-ratio 等比縮放 */
  .carousel-wrapper .game-menu .game-card {
    flex: 0 0 auto;
    width: clamp(220px, 22vw, 360px) !important; /* 覆蓋舊值 */
    height: auto !important;                     /* 解除固定高度 */
    aspect-ratio: 3 / 5;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: transform .3s ease;
  }

  /* 主圖填滿卡片（不影響 .enter-image） */
  .carousel-wrapper .game-menu .game-card picture,
  .carousel-wrapper .game-menu .game-card picture > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* 或 contain 看需求 */
    display: block;
  }

  /* Enter 小圖也跟著卡片寬度縮放（可調比例） */
  .carousel-wrapper .game-menu .game-card .enter-image {
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    width: clamp(120px, 40%, 160px);
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    z-index: 10;
    overflow: hidden;  /* 防止橫向滾動 */
  }
  .carousel-wrapper .game-menu .game-card:hover .enter-image { opacity: 1; }

  
}



.mt.hidden{display:none}.mt{position:fixed;inset:0;z-index:9999}
.mt__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.mt__dialog{position:relative;margin:10vh auto 0;max-width:420px;background:#0f1115;color:#e9edf3;
  border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 12px 36px rgba(0,0,0,.35);padding:18px}
.mt__title{margin:0 0 8px;font-size:18px}.mt__desc{margin:0 0 14px;opacity:.9;line-height:1.55}
.mt__actions{display:flex;justify-content:flex-end}.mt__btn{padding:9px 14px;border-radius:10px;border:0;background:#4f8cff;color:#fff;cursor:pointer}
.mt__close{position:absolute;right:10px;top:8px;width:32px;height:32px;border:0;border-radius:8px;background:#1a1e26;color:#cfd6e4;cursor:pointer}
.mt__close:hover{background:#232835}
@media (max-width:480px){.mt__dialog{margin:12vh 12px 0;max-width:none}}
/* 讓整個遮罩容器用置中版面 */
.mt{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;              /* 或用 display:flex 也可以 */
  place-items: center;        /* 水平＋垂直置中 */
}

/* 對話框本身去掉原本的 margin，並避免超出畫面 */
.mt__dialog{
  margin: 0;                                  /* 取消 10vh auto 的位移 */
  width: min(420px, calc(100vw - 24px));      /* 小螢幕留邊距 */
  max-height: calc(100vh - 24px);             /* 太高時不超出視窗 */
  overflow: auto;                              /* 內容過長可捲動 */
}

/* 小螢幕微調（可選） */
@media (max-width:480px){
  .mt__dialog{
    width: calc(100vw - 24px);
  }
}