@charset "UTF-8";
/* 
 * 第一卡重新設計 - 參考短版遊戲版型
 * 左側：角色圖
 * 右側：Logo + 裝飾背景 + 按鈕
 */

/* ========================================
   第一卡整體佈局
======================================== */
.type-hero {
  width: 100%;
  min-height: 100vh;
  position: relative;
  z-index: 1; /* 提升封面層級，避免被後續段落覆蓋 */
  display: flex;
  overflow: hidden;
  padding-left: 0;
  margin-left: 0;
}

/* 移除 ::before 和 ::after 偽元素造成的黑線 */
.type-hero::before,
.type-hero::after {
  display: none;
}

/* 確保封面區域沒有任何邊框、陰影 */
.type-hero {
  border: none;
  box-shadow: none;
  outline: none;
  margin-top: 0;
  padding-top: 0;
 
}

/* 移除可能的黑線來源：header 和 modal */
header,
.lp-header,
.lp_header,
.modal-overlay {
  border: none;
  box-shadow: none;
  border-bottom: none;
}

/* 隱藏滾動條（所有瀏覽器） */
.type-hero::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.type-hero {
  -ms-overflow-style: none; /* IE 和 Edge */
  scrollbar-width: none; /* Firefox */
}

@media (max-width: 950px) {
  .type-hero {
    grid-template-columns: 1fr;
    min-height: 100svh;
    min-height: calc(var(--vh, 1vh) * 100); /* 行動裝置視窗高度修正 */
    padding-top: env(safe-area-inset-top); /* iOS 瀏海安全區 */
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* 進階：支援 100dvh 的瀏覽器優先使用動態可視高度 */
@supports (min-height: 100dvh) {
  @media (max-width: 950px) {
    .type-hero {
      min-height: 100dvh;
    }
  }
}

/* 回退：舊版 iOS 使用 -webkit-fill-available */
@supports not (min-height: 100dvh) {
  @media (max-width: 950px) {
    html,
    body {
      height: -webkit-fill-available;
    }
    .type-hero {
      min-height: -webkit-fill-available;
    }
  }
}

/* 手機高度單位回退與安全距（iOS 15 等舊版） */
@supports (min-height: 100dvh) {
  @media (max-width: 950px) {
    .type-hero {
      min-height: 100vh;
    }
  }
}
@supports not (min-height: 100dvh) {
  @media (max-width: 950px) {
    html,
    body {
      height: -webkit-fill-available;
    }
    .type-hero {
      min-height: -webkit-fill-available;
    }
  }
}



/* ========================================
   左側：角色區域
======================================== */
.type-hero .container-left {
  width: 100%;
  position: relative;
  padding-left: 0;
  margin-left: 0;
}

@media (max-width: 950px) {
  .type-hero .container-left {
   
  }
}
@media (max-width: 768px) {
  .type-hero .container-left {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* 允許圖片超出部分被裁切 */
    width: 100vw; /* 確保容器寬度佔滿視窗 */
    height: 100vh; /* 高度撐滿 */
  }
}

@media (max-width: 640px) {
  .type-hero .container-left {
   
  }
}

.type-hero .container-left .character {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start; /* 改為靠左對齊 */
  padding-left: 0;
  margin-left: 0;
}

/* 確保 picture 元素也緊貼左邊 */
.type-hero .container-left .character picture {
  display: block;
  padding: 0;
  margin: 0;
  line-height: 0; /* 移除行高造成的空隙 */
}

/* 手機版 picture 元素置中 */
@media (max-width: 768px) {
  .type-hero .container-left .character picture {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto; /* 寬度自動 */
    height: auto; /* 高度自動 */
  }
}

@media (max-width: 1640px) {
  .type-hero .container-left .character {
   
  }
}

@media (max-width: 1450px) {
  .type-hero .container-left .character {
   
  }
}

@media (max-width: 1250px) {
  .type-hero .container-left .character {
   
  }
}

@media (max-width: 950px) {
  .type-hero .container-left .character {
   
  }
}

@media (max-width: 768px) {
  .type-hero .container-left .character {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex; /* 使用 flexbox */
    justify-content: center; /* 水平置中 */
    align-items: center; /* 垂直置中 */
    overflow: visible; /* 允許圖片完整顯示 */
  }
}

@media (max-width: 640px) {
  .type-hero .container-left .character {
 
  }
}

@media (max-width: 400px) {
  .type-hero .container-left .character {
 
  }
}

.type-hero .container-left .character .character-lead {
  /* 關鍵修改：寬度自動，高度撐滿，不使用 object-fit */
  width: auto;
  height: 100vh;
  max-width: none; /* 移除最大寬度限制，允許圖片按比例放大 */
  position: relative;
  left: 0;
  top: 0;
  padding-left: 0;
  margin-left: 0;
}

@media (max-width: 1250px) {
  .type-hero .container-left .character .character-lead {
  }
}

@media (max-width: 950px) {
  .type-hero .container-left .character .character-lead {
  }
}

@media (max-width: 768px) {
  .type-hero .container-left .character .character-lead {
    position: absolute;
    top: 0;
    width: 100%;
    height: auto;
    left: 0;
  }
}

@media (max-width: 420px) {
  .type-hero .container-left .character .character-lead {

  }
}

@media (max-width: 375px) {
  .type-hero .container-left .character .character-lead {

  }
}

/* ========================================
   右側：內容區域
======================================== */
.type-hero .container-right {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  /* overflow: hidden; */
  min-height: 100vh;
  right: 0;
  bottom: 0;
}

/* 隱藏滾動條（所有瀏覽器） */
.type-hero .container-right::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.type-hero .container-right {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@media (max-width: 950px) {
  .type-hero .container-right {
    width: 100%;
    height: 100%;
    justify-content: space-between; /* 內容靠上，避免把按鈕推到底部 */
    padding: 0; /* 減少 padding */
    overflow: visible; /* 手機版改為 visible，避免按鈕被裁切 */
  }
}

/* Logo 區域 */
.type-hero .container-right-logo {
  flex-shrink: 1; /* 允許 logo 區域在空間不足時縮小 */
  max-height: 40vh; /* 限制 logo 最大高度，防止過大 */
}

/* 針對較矮螢幕的特殊處理 - 1920×919 等 */
@media (max-height: 950px) and (min-width: 1600px) {
  .type-hero .container-right-logo {
    max-height: 25vh; /* 進一步縮小 logo 最大高度 */
  }
  
  .type-hero .container-right-logo img {
    width: 35%; /* 縮小 logo 寬度 */
  }
  
  .type-hero .container-right-box {
    margin-top: 2vh; /* 增加按鈕區域的上邊距 */
  }
}

/* 更精確的處理 - 針對 1920×919 等超寬螢幕 */
@media (min-width: 1900px) and (max-height: 950px) {
  .type-hero .container-right-logo {
    max-height: 20vh; /* 極小高度螢幕的 logo 最大高度 */
  }
  
  .type-hero .container-right-logo img {
    width: 30%; /* 進一步縮小 logo */
  }
  
  .type-hero .container-right-box {
    margin-top: 3vh; /* 增加更多上邊距 */
    flex-shrink: 0; /* 防止按鈕區域被壓縮 */
  }
}

.type-hero .container-right-logo img {
  width: 80%;
  height: auto;
  margin-left: auto;
  position: absolute;
  top: 0;
  right: 6%;
}

@media (max-width: 1640px) {
  .type-hero .container-right-logo img {
    width: 600px;
    right: 0%;
  }
}

@media (max-width: 1250px) {
  .type-hero .container-right-logo img {
    width: 500px;
  }
}

@media (max-width: 1080px) {
  .type-hero .container-right-logo img {
    width: 400px; /* 調整為更小的尺寸 */
  }

  .type-hero .container-right-logo {
    margin-right: 3vw; /* 減少右邊距 */
  }

  .type-hero .container-right-box {
    /* padding-right: 3vw; 減少右邊距 */
  }
}

@media (max-width: 640px) {
  .type-hero .container-right-logo img {
    width: 50%;
    margin-top: 20px;
  }
}

@media (max-width: 420px) {
  .type-hero .container-right-logo img {
    margin-left: 120px;
    margin-top: 0px;
  }
}

@media (max-width: 375px) {
  .type-hero .container-right-logo img {
    margin-left: 120px;
    margin-top: 10px;
    right: 0;
    width: 43%;
  }
}

/* 按鈕區域容器 */
.type-hero .container-right-box {
  width: 50%;
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 10;
  margin-left: auto;
}

/* 手機版和平板版都需要提升層級 */
@media (max-width: 950px) {
  .type-hero .container-right-box {
    z-index: 10; 
  }
}
@media (max-width: 768px) {
  .type-hero .container-right-box {
    margin: 0 auto;
    padding-right: 0;
  }
}
/* iPhone 8 及以下尺寸特別處理 */
@media (max-width: 375px) {
  .type-hero .container-right-box {
    z-index: 1000; /* iPhone 8: 提升到最高層級 */
  }
}

@media (max-width: 640px) {
  .type-hero .container-right-box {
    justify-content: center;
    padding-right: 0;
    width: 100%;
  }
}

.type-hero .container-right-button {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: #2a1b53;;
  padding: 10px 10px 0 10px; /* 减少上 padding，从 15px 改为 10px */
  /* border-radius: 8px; */
  margin-bottom: 2vh;
  margin-right: 3vw;
}

@media (max-width: 950px) {
  .type-hero .container-right-button {
    align-items: center;
    margin-bottom: 20px; /* 移除下推，避免整體下沉 */
  }
}
@media (max-width: 768px) {
  .type-hero .container-right-button {
    align-items: center;
    margin-bottom: 20px; /* 移除下推，避免整體下沉 */
    margin-right: 0;
  }
}
@media (max-width: 640px) {
  .type-hero .container-right-button {
    align-items: center;
    margin-bottom: 2vh; 
    margin-right: 0;
  }
}

@media (max-width: 390px) {
  .type-hero .container-right-button {
  }
}

/* 裝飾背景圖 */
.type-hero .container-right-button-img {
  max-width: 600px;
  width: 100%;
}

.type-hero .container-right-button-img img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1640px) {
  .type-hero .container-right-button-img {
    max-width: 550px;
  }
}

@media (max-width: 1450px) {
  .type-hero .container-right-button-img {
    max-width: 500px;
  }
}

@media (max-width: 1250px) {
  .type-hero .container-right-button-img {
    max-width: 450px;
  }
}

@media (max-width: 1080px) {
  .type-hero .container-right-button-img {
    max-width: 380px; /* 調整為更小的尺寸 */
  }
}

@media (max-width: 950px) {
  .type-hero .container-right-button-img {
    max-width: 400px;
  }
}

@media (max-width: 768px) {
  .type-hero .container-right-button-img {
    max-width: 350px;
  }
}

/* ========================================
   按鈕樣式
======================================== */
.type-hero .container-right-button-box {
  max-width: 600px;
  width: 100%;
  padding: 20px 0px; /* 减少上下 padding */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /* gap: 47px; */
  flex-shrink: 1; /* 允許按鈕容器在空間不足時縮小 */
  max-height: 15vh; /* 减少最大高度，从 25vh 改为 15vh */
  position: relative; /* 確保 z-index 生效 */
  z-index: 10; /* 提升層級，防止被遮擋 */
}

@media (max-width: 1640px) {
  .type-hero .container-right-button-box {
    padding: 15px 0px; /* 减少 padding */
    max-width: 550px;
    /* gap: 40px; */
  }
}

@media (max-width: 1450px) {
  .type-hero .container-right-button-box {
    padding: 12px 0px; /* 减少 padding */
    max-width: 500px;
    /* gap: 35px; */
  }
}

@media (max-width: 1250px) {
  .type-hero .container-right-button-box {
    padding: 10px 0px; /* 减少 padding */
    max-width: 450px;
    /* gap: 30px; */
  }
}

@media (max-width: 1080px) {
  .type-hero .container-right-button-box {
    padding: 15px 0px;
    max-width: 380px; /* 調整為更小的尺寸 */
    /* gap: 25px; */
  }
}

@media (max-width: 950px) {
  .type-hero .container-right-button-box {
    padding: 15px 0px;
    max-width: 400px;
    gap: 15px;
    flex-direction: row;
    /* 上移改由父層 .container-right-box 控制 */
  }
}

@media (max-width: 768px) {
  .type-hero .container-right-button-box {
    padding: 10px 0px;
    max-width: 350px;
    /* gap: 20px; */
  }
}

@media (max-width: 640px) {
  .type-hero .container-right-button-box {
    flex-wrap: nowrap;
    /* gap: 15px; */
  }
}

@media (max-width: 550px) {
  .type-hero .container-right-button-box {
    /* gap: 13px; */
  }
}

@media (max-width: 450px) {
  .type-hero .container-right-button-box {
    /* gap: 12px; */
  }
}

@media (max-width: 380px) {
  .type-hero .container-right-button-box {
    /* gap: 10px; */
  }
}

@media (max-width: 340px) {
  .type-hero .container-right-button-box {
    /* gap: 8px; */
  }
}

/* 按鈕本體 */
.type-hero .container-right-button-box .button {
  width: 289px;
  height: 84px;
  text-align: center;
  appearance: none;
  border: 3px solid #ffffff; /* 與 e9cx 版本一致 */
  background: #fa4cb2;
  color: #ffffff;
  cursor: pointer;
  position: relative;
  z-index: 15; /* 確保按鈕在最上層 */
  padding: 0 6px;
  text-decoration: none;
  font-weight: 900;
  font-size: 30px;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0 8px;
  white-space: nowrap;
  overflow: hidden;
}

@media (max-height: 800px) {
  .type-hero .container-right-button-box .button {
    width: 260px;
    height: 75px;
    font-size: 28px;
    border: 3px solid #ffffff;
  }
}

@media (max-height: 750px) {
  .type-hero .container-right-button-box .button {
    width: 240px;
    height: 68px;
    font-size: 26px;
    border: 2px solid #ffffff;
  }
}

@media (max-height: 700px) {
  .type-hero .container-right-button-box .button {
    width: 220px;
    height: 62px;
    font-size: 24px;
    border: 2px solid #ffffff;
  }

  /* 小高度螢幕的右側容器調整 */
  .type-hero .container-right {
    /*padding: 2vh 0; */
    justify-content: space-between; /* 保持 space-between 佈局 */
  }

  .type-hero .container-right-logo {
    max-height: 30vh; /* 進一步縮小 logo 最大高度 */
  }

  .type-hero .container-right-button-box {
    padding: 10px 0; /* 減少按鈕區域的 padding */
    max-height: 20vh; /* 縮小按鈕容器最大高度 */
  }
}

@media (max-height: 650px) {
  .type-hero .container-right-button-box .button {
    width: 200px;
    height: 56px;
    font-size: 22px;
    border: 2px solid #ffffff;
  }

  /* 極小高度螢幕的右側容器調整 */
  .type-hero .container-right {
    padding: 1vh 0; /* 進一步減少 padding */
    justify-content: space-between; /* 保持 space-between 佈局 */
  }

  .type-hero .container-right-logo {
    max-height: 25vh; /* 極小高度螢幕的 logo 最大高度 */
  }

  .type-hero .container-right-logo img {
    max-width: 70vw; /* 縮小 logo */
  }

  .type-hero .container-right-button-box {
    padding: 5px 0; /* 最小 padding */
    max-height: 15vh; /* 極小高度螢幕的按鈕容器最大高度 */
  }
}

@media (max-width: 1850px) {
  .type-hero .container-right-button-box .button {
    width: 270px;
    height: 78px;
    font-size: 29px;
  }
}

@media (max-width: 1700px) {
  .type-hero .container-right-button-box .button {
    width: 255px;
    height: 74px;
    font-size: 28px;
  }
}

@media (max-width: 1640px) {
  .type-hero .container-right-button-box .button {
    width: 245px;
    height: 70px;
    font-size: 27px;
  }
}

@media (max-width: 1550px) {
  .type-hero .container-right-button-box .button {
    width: 230px;
    height: 66px;
    font-size: 26px;
  }
}

@media (max-width: 1450px) {
  .type-hero .container-right-button-box .button {
    width: 215px;
    height: 62px;
    font-size: 25px;
  }
}

@media (max-width: 1400px) {
  .type-hero .container-right-button-box .button {
    width: 200px;
    height: 58px;
    font-size: 24px;
    border: 2px solid #ffffff;
  }
}

@media (max-width: 1250px) {
  .type-hero .container-right-button-box .button {
    width: 185px;
    height: 54px;
    font-size: 22px;
    border: 2px solid #ffffff;
  }
}

@media (max-width: 1080px) {
  .type-hero .container-right-button-box .button {
    width: 170px; /* 稍微縮小按鈕 */
    height: 50px;
    font-size: 20px;
    border: 3px solid #ffffff;
  }
}

@media (max-width: 950px) {
  .type-hero .container-right-button-box .button {
    width: 280px;
    height: 70px;
    font-size: 24px;
    margin: 0;
  }
}

@media (max-width: 850px) {
  .type-hero .container-right-button-box .button {
    width: 260px;
    height: 65px;
    font-size: 22px;
  }
}

@media (max-width: 768px) {
  .type-hero .container-right-button-box .button {
    width: 240px;
    height: 60px;
    font-size: 22px;
  }
}

@media (max-width: 640px) {
  .type-hero .container-right-button-box .button {
    width: 220px;
    height: 55px;
    font-size: 22px;
    padding: 0 6px;
  }
}

@media (max-width: 550px) {
  .type-hero .container-right-button-box .button {
    width: 200px;
    height: 50px;
    font-size: 20px;
  }
}

@media (max-width: 450px) {
  .type-hero .container-right-button-box .button {
    width: 180px;
    height: 46px;
    font-size: 22px;
    padding: 0 5px;
  }
}

@media (max-width: 380px) {
  .type-hero .container-right-button-box .button .button_text{
    width: 100%;
    height: 42px;
    font-size: 22px;
    padding: 0 4px;
  }
}

@media (max-width: 340px) {
  .type-hero .container-right-button-box .button {
    width: 125px;
    height: 38px;
    font-size: 15px;
    padding: 0 3px;
  }
}

/* 按鈕 Hover 效果 */
.type-hero .container-right-button-box .button:hover {
  background: #fa4cb2e6;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4),
    0 6px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

/* 按鈕 Active 效果 */
.type-hero .container-right-button-box .button:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 按鈕文字 */
.type-hero .container-right-button-box .button .button_text {
  display: inline-block;
  vertical-align: middle;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  font-size: 36px;
}
@media (max-width: 1280px) {
  .type-hero .container-right-button-box .button .button_text {
  
    font-size: 22px;
  }
}
@media (max-width: 768px) {
  .type-hero .container-right-button-box .button .button_text {
    font-size: 20px;
    margin-top: 2px;
  }
}

/* 按鈕圖示 */
.type-hero .container-right-button-box .button .btn_effect {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  vertical-align: middle;
  margin-left: 3px;
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.8));}

@media (max-height: 800px) {
  .type-hero .container-right-button-box .button .btn_effect {
    width: 56px;
    height: 56px;
  }
}

@media (max-height: 750px) {
  .type-hero .container-right-button-box .button .btn_effect {
    width: 68px;
    height: 68px;
  }
}

@media (max-height: 700px) {
  .type-hero .container-right-button-box .button .btn_effect {
    width: 64px;
    height: 64px;
  }
}

@media (max-height: 650px) {
  .type-hero .container-right-button-box .button .btn_effect {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 1850px) {
  .type-hero .container-right-button-box .button .btn_effect {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 1640px) {
  .type-hero .container-right-button-box .button .btn_effect {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 1250px) {
  .type-hero .container-right-button-box .button .btn_effect {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 768px) {
  .type-hero .container-right-button-box .button .btn_effect {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 550px) {
  .type-hero .container-right-button-box .button .btn_effect {
    width: 40px;
    height: 40px;
  }
}

/* ========================================
   移除原有的長版樣式（避免衝突）
======================================== */
.type-hero .cover-chara,
.type-hero .hero-dlc-container,
.type-hero .hero-dlc-contents,
.type-hero .slogan,
.type-hero .hero-dlc-pic,
.type-hero .hero-dlc-btn-container,
.type-hero .hero-dlc-btn,
.type-hero .DLPlayBox-button {
  display: none !important;
}

/* ========================================
   iPad 專用查詢
======================================== */
/* iPad 專用查詢 - 810×1080 解析度（直向模式）*/
@media (min-width: 800px) and (max-width: 820px) and (min-height: 1070px) and (max-height: 1090px) {
  .type-hero .container-left {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* 允許圖片超出部分被裁切 */
    width: 100vw; /* 確保容器寬度佔滿視窗 */
    height: 100vh; /* 高度撐滿 */
  }
  
  .type-hero .container-left .character {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    justify-content: center; /* 手機風格：置中 */
    align-items: center;
    overflow: hidden; /* 裁切超出的高度 */
  }
  
  .type-hero .container-left .character picture {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  
  .type-hero .container-left .character .character-lead {
    width: auto;
    height: 100vh;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    left: -13%;
    top: 0%;
  }
  
  
  /* 右側按鈕區域 - 置中 */
  .type-hero .container-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-right: 0;
    width: 100%;
  }
  
  .type-hero .container-right-box {
    margin: 0 auto; /* iPad 專用：按鈕區域置中 */
  }
  
  .type-hero .container-right-button {
    margin-bottom: 0; /* iPad 專用：移除底部邊距 */
    margin-right: 0; /* iPad 專用：移除右側邊距 */
  }
  
  .type-hero .container-right-button-box {
    align-items: center;
    justify-content: center;
    width: 100%;
  }
}

/* iPad 專用查詢 - 1024×1366 解析度（直向模式）*/
/* @media (max-width: 1366px) and (min-width: 1025px) and (min-height: 1024px) {
  .type-hero .container-left .character {
    width: 100% ;
    left: 0% ;
    top: -10% ;
  }
} */

/* iPad 專用查詢 - 768×1024 解析度（直向模式）*/
/* @media (max-width: 1024px) and (min-width: 768px) and (min-height: 768px) {
  .type-hero .container-left .character {
    width: 104% ;
    left: 0% ;
    top: -17% ;
  }
} */