/* ✅ 全站背景設定為白色，並設定預設字型 */
body {
  margin: 0;
  background-color: #FFCFFA; /* 首屏背景底色 */
  font-family: 'Noto Sans CJK TC', Bold; /* 預設中文字型 */
}

/* ✅ 首屏整體外框容器：橫向置中用 */
.hero {
  display: flex;
  justify-content: center; /* 將內層內容在桌機時置中對齊 */
  width: 100%;
}

/*外層容器，限制內容最大寬度為 430px 並設定相對定位，讓內部的 .overlay-content 可以絕對定位在它上面。👉 實質上是「放圖片和浮動內容」的容器*/
/* ✅ 首屏內容容器：限制最大寬度 430px */
.hero-content {
  position: relative; /* 讓 overlay-content 可以絕對定位在這個容器上 */
  width: 100%;
  max-width: 430px; /* 手機最大寬度限制 */
  overflow: visible; /* ⬅️ 這行可以讓箭頭浮出容器也被顯示 */
}

/* ✅ 背景圖片區塊 */
/* 背景圖的 <img> 樣式（寬度 100%、自動縮放），用來做 mobile-first RWD 的背景圖。*/
.hero-bg {
  width: 100%;  /* 圖片寬度設為滿版（手機設計） */
  height: auto; /* 高度自動等比例縮放 */
  display: block;
  vertical-align: bottom;
}

/* ✅ 浮動區塊：會覆蓋在 hero-bg 圖上（可以調整位置
整體浮動區（logo + 文字） */
.overlay-content {
  position: absolute;
  top: 5%;        /* ⬅️❗️可調整整體上移下移的 Y 軸距離 */
  left: 50%;       /* X 軸對齊中間 */
  transform: translateX(-50%); /* 讓整個區塊真正水平置中 */
  width: 100%;
  text-align: center;
  padding: 0 16px; /* 左右留白 */
  box-sizing: border-box;
}


/* ✅ LOGO 圖片區塊（可調整大小與位置） */
.hero-logo {
  width: 75%;      /* ⬅️❗️可調整 LOGO 寬度百分比或 px 單位 */
  max-width: 280px;
  margin-bottom: 16px; /* ⬅️❗️可調整 LOGO 與文字之間的垂直距離 */
  position: relative;
  top: -12px; /* 負值上移 */
}

/* ✅ 文字區塊（三行） */
.hero-text p {
  margin: 0;
  color: #665751;           /* ⬅️❗️文字顏色（可改成其他 HEX） */
  font-family: 'Noto Sans CJK TC', Bold;
  font-weight: 700; /* Noto Bold 權重是 700，這比 'bold' 更準確 */
  font-size: 14px;          /* ⬅️❗️文字大小 */
  letter-spacing: 0px;      /* ⬅️❗️字距 */
  line-height: 1.6;         /* 行距（越大越鬆） */
  position: relative;
  top: -16px;
}

/* ✅ 桌機時外層容器置中對齊 */
@media (min-width: 768px) {
  .hero {
    justify-content: center;
  }
}

/* ✅ 第二屏區塊 */
.second-screen {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ✅ 共用內容容器與背景圖樣式已沿用 .hero-content & .hero-bg */
/* 第二屏活動說明標題圖（03-1.png） */
.second-title {
  position: absolute;
  top: -100px;          /* 🟡 調整 Y 軸距離背景圖上緣的位置 */
  left: 50%;         /* 🟡 水平置中對齊 */
  transform: translateX(-50%); /* 🟡 真正讓它水平置中 */
  width: 72%;
  max-width: 300px;
}
/* 第二屏活動說明圖（03-2.png） */
.second-subtitle {
  position: absolute;
  top: -20px;          /* 🟡 調整圖片二的 Y 軸位置 */
  left: 50%;
  transform: translateX(-50%);
  width: 120%;         /* ✅ 改這個讓圖片變寬 */
  max-width: 360px;   /* ✅ 可以調大最大寬度限制 */
}



/* ✅ 第二屏浮動層（放兩個 CTA 用） */
.second-overlay {
  position: absolute;
  top: 15%;             /* ⬅️ 整體浮動區塊的 Y 軸位置（不一定要調） */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
}

 position: relative;
  width: 100%;
  height: 100%;  /* ✅ 確保整個高度跟 .hero-content 一樣高 */
}

/* ✅ 活動說明通用 CTA 樣式 */
.cta-btn {
  display: block;
  position: relative;
  margin: 0 auto;
}

/* ✅ 活動說明CTA 1 單獨樣式控制（可調大小、位置） */
.cta-btn-1 {
  width: 75%;         /* ⬅️ CTA 1 寬度 */
  max-width: 280px;
  top: 350px;           /* ⬅️ CTA 1 垂直微調 */
  left: 0px;          /* ⬅️ CTA 1 水平微調 */
}

/* ✅ 活動說明CTA 2 單獨樣式控制（可調大小、位置） */
.cta-btn-2 {
  width: 60%;         /* ⬅️ CTA 2 寬度 */
  max-width: 260px;
  margin-top: 20px;   /* ⬅️ CTA 2 與 CTA 1 的垂直距離 */
  top: 350px;           /* ⬅️ CTA 2 垂直微調 */
  left: 0px;          /* ⬅️ CTA 2 水平微調 */
}


/* ✅ 第二之一屏比賽狀況區塊 */
.second-half-screen {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ✅ 浮動層比賽狀況區塊 */
.second-half-overlay {
  position: absolute;
  top: 8%; /* ⬅️ 整體區塊 Y 軸微調 */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ✅ 比賽狀況區塊標題 */
.second-half-title {
  position: relative;     /* ✅ 加這句才能使用 top 微調 */
  top: -70px;             /* ✅ 往上移動 20px，越小越上，正值會往下
  */
  width: 79%;             /* ✅ 可調整圖片大小 */
  max-width: 300px;       /* ✅ 可限制最大寬度 */
  margin: 0 auto;         /* ✅ 水平置中 */
  display: block;
  margin-bottom: 12px; /* 與文字距離 */
}




/* ✅ 比賽狀況區塊說明文字 */
.second-half-text p {
  position: relative;   /* ✅ 這行是必要的，才能使用 top/left 微調 */
  top: -65px;           /* ✅ Y 軸：負數往上，正數往下 */
  left: 0px;            /* ✅ X 軸：負數往左，正數往右 */
  font-family: 'Noto Sans CJK TC', Bold;
  font-size: 14px;
  font-weight: 700;
  color: #665751;
  line-height: 1.6;
  letter-spacing: 0px;
  margin: 4px 0;
  text-align: center;
}

/* ✅ 比賽狀況區塊插圖 */
.second-half-img {
  position: absolute;
  top: 70px;                   /* 你想放在哪個位置，就自己調 */
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  max-width: 365px;
}


/* ✅ 比賽狀況CTA 1 單獨樣式控制（可調大小、位置） */
.second-half-cta-1 {
  width: 85%;         /* ⬅️ CTA 1 寬度 */
  max-width: 400px;
  top: 380px;           /* ⬅️ CTA 1 垂直微調 */
  left: 0px;          /* ⬅️ CTA 1 水平微調 */
}

/* ✅ 比賽狀況CTA 2 單獨樣式控制（可調大小、位置） */
.second-half-cta-2 {
  width: 60%;         /* ⬅️ CTA 2 寬度 */
  max-width: 260px;
  margin-top: 20px;   /* ⬅️ CTA 2 與 CTA 1 的垂直距離 */
  top: 380px;           /* ⬅️ CTA 2 垂直微調 */
  left: 0px;          /* ⬅️ CTA 2 水平微調 */
}

/* ✅ 第四屏與第三屏接縫處貼合 */
.third-screen .hero-content {
  margin-top: -2px; /* 負值讓圖片往上蓋住上一張 */
}

/* ✅ 第三屏區塊（接續前一屏） */
.third-screen {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ✅ 浮動層，控制所有內容統一放置在背景圖上 */
.third-overlay {
  position: absolute;
  top: 12%; /* ⬅️ 整體區塊 Y 軸位置 */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ✅ 隊伍介紹區塊標題 */
.third-title-img {
  position: relative;     /* ✅ 加這句才能使用 top 微調 */
  top: -100px;             /* ✅ 往上移動 20px，越小越上，正值會往下
  */
  width: 79%;             /* ✅ 可調整圖片大小 */
  max-width: 300px;       /* ✅ 可限制最大寬度 */
  margin: 0 auto;         /* ✅ 水平置中 */
  display: block;
  margin-bottom: 12px; /* 與文字距離 */
}


/* ✅ 隊伍介紹區塊插圖 */
.third-img {
  position: absolute;
  top: 110px;                   /* 你想放在哪個位置，就自己調 */
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  max-width: 365px;
}


/* ✅ 通用文字樣式，動物戰隊介紹 */
.text-block p {
  font-family: 'Noto Sans CJK TC', sans-serif;
  font-weight: 700;
  color: #665751;
  font-size: 14px;
  line-height: 1.6;
  margin: 4px 0;
  letter-spacing: 0px;
}



/* 動物戰隊前導說明 */
.text-block-1 {
  position: relative;
  top: -85px;  /* Y 軸：往上移動 10px */
  left: 0px;   /* X 軸：不動 */
}


/* ✅ 動物戰隊CTA 共用樣式（可覆蓋） */
.cta-btn {
  display: block;
  position: relative;
  margin: 8px auto;
}

/* ✅ 動物戰隊CTA 1 控制點 */
.third-cta-1 {
  width: 75%;         /* ⬅️ CTA 1 寬度 */
  max-width: 280px;
  top: 400px;          /* ⬅️ 微調 Y 軸改成更負的數字會更往上 */
  left: 0px;         /* ⬅️ 微調 X 軸 */
}

/* ✅ 動物戰隊CTA 2 控制點 */
.third-cta-2 {
  width: 60%;         /* ⬅️ CTA 2 寬度 */
  max-width: 260px;
  top: 400px;
  left: 0px;
}

/* ✅ 第四屏與第三屏接縫處貼合 */
.fourth-screen .hero-content {
  margin-top: -1px; /* 負值讓圖片往上蓋住上一張 */
}


/* ✅ 第四屏區塊樣式 */
.fourth-screen {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ✅ 第四屏浮動區塊 */
.fourth-overlay {
  position: absolute;
  top: 12%; /* 整體上下位置 */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ✅ 第四屏標題圖樣式 */
.fourth-title-img {
  display: block;
  width: 82%;             /* 可調整寬度 */
  max-width: 350px;       /* 最大寬度限制 */
  margin: 0 auto 12px;    /* 水平置中 + 與下方圖留距 */
  position: relative;
  top: -60px;             /* Y 軸微調：負值往上 */
}

/* ✅ 第四屏插圖樣式 */
.fourth-img {
  position: absolute;
  top: 15px;                   /* 你想放在哪個位置，就自己調 */
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  max-width: 360px;
}


/* ✅ 第四屏 CTA 按鈕樣式 */
.fourth-cta {
  display: block;
  position: relative;
  width: 75%;             /* 按鈕寬度 */
  max-width: 350px;
  top: 280px;              /* Y 軸微調：越大越往下 */
  left: 0px;              /* X 軸微調 */
  margin: 16px auto;
}

/* ✅ 第四屏與第三屏接縫處貼合 */
.fifth-screen .hero-content {
  margin-top: -1px; /* 負值讓圖片往上蓋住上一張 */
}

/* ✅ 第五屏外層結構 */
.fifth-screen {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ✅ 第五屏 premium 浮動層（疊在 06-BG.png 上） */
.fifth-overlay {
  position: absolute;
  top: 75%;               /* ⬅️ 控整體垂直位置（可調整） */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
}

/* ✅ 第五屏標題 */
.fifth-title-img {
  position: relative;     /* ✅ 加這句才能使用 top 微調 */
  top: -470px;             /* ✅ 往上移動 20px，越小越上，正值會往下
  */
  width: 81%;             /* ✅ 可調整圖片大小 */
  max-width: 350px;       /* ✅ 可限制最大寬度 */
  margin: 0 auto;         /* ✅ 水平置中 */
  display: block;
  margin-bottom: 12px; /* 與文字距離 */
}


/* ✅ 第五屏插圖 */
.fifth-img {
  position: absolute;
  top: -380px;                   /* 你想放在哪個位置，就自己調 */
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  max-width: 350px;
}


/* ✅  第五屏 premium  CTA 按鈕可調大小與位置 */
.fifth-cta {
  display: block;
  position: relative;
  width: 75%;             /* ⬅️ 寬度比例（或改 px） */
  max-width: 350px;
  top: 5px;               /* ⬅️ Y 軸微調（負數往上、正數往下） */
  left: 0px;              /* ⬅️ X 軸微調 */
  margin: 0 auto;
}

/* ✅ 最上方 floating 固定最上方、吸頂、含背景與陰影 */
.floating-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background-color: #F277CF;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;

  min-height: 44px;  /* ✅ 重點：固定這條的最小高度 */
}


/* ✅ 最上方 floating banner  */
body {
  padding-top: 40px; /* ✅ 預留浮動 banner 空間，讓第一屏不被擋住 */
}

/* ✅ 最上方 floating banner 限寬與內部對齊設定 */
.floating-banner-inner {
  width: 100%;
  max-width: 430px;
  padding: 4px 16px;
  display: flex;
  justify-content: center;  /* ✅ 重點：改成 center 才能置中 有改這邊*/
  align-items: center;
}

/* ✅ 最上方 floating banner CTA 圖片 */
.floating-cta {
  height: 17px;      /* ✅ 控制按鈕圖片大小（推薦用 height 控）有改到 15->17 */
  margin-right: 4px; /* ✅ 若你想加一點右邊留白 */
  flex-shrink: 0;
  margin-top: 7px;   /* ✅ Y 軸位置（越大越往下） */
  margin-right: 1px; /* ✅ X 軸位置（越大越靠左） */
}


/* ✅ 所有按鈕漂浮動畫效果：上下微動 */
@keyframes floatY {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* ✅ 所有按鈕共用懸浮動畫 class，所有 CTA 都能套用 */
.float-cta {
  animation: floatY 1s ease-in-out infinite;
}

/* ✅ 預覽 Loading 畫面樣式 */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFCFFA;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease; /* ✅ 淡出動畫 */
}

/* ✅ 預覽 Loading 畫面 logo */
.loading-img {
  width: 250px;       /* ✅ 控制圖片寬度，常見值：120px ~ 200px */
  max-width: 80%;     /* ✅ 讓圖片在手機上不會超過畫面 */
  height: auto;       /* ✅ 等比縮放，高度自動調整 */
  margin-bottom: 10px;
}

/* ✅ 預覽 Loading 畫面文案*/
.loading-text {
  font-family: 'Noto Sans CJK TC', sans-serif;
  color: #665751;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* ✅ 預覽 Loading 畫面淡出效果 */
.loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}
/* ✅ 控制輪播效果 */