/* ============================================= */
/* 分會場「趣能量基地」頁面版面
   Figma：M_趣能量分會場 2307:211783／PC- 雙11_趣能量分會場 2315:212672
   767px 以下用 M 版（內容寬隨畫面等比，最寬 480px），
   768px 以上用 PC 版（內容最寬 960px）。 */
/* ============================================= */

/* ---- 基本設定 ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-zh);
  color: var(--neutral-900);
  background-color: #2a50d8; /* 背景圖載入前的底色 */
}

img {
  max-width: 100%;
}

button {
  font-family: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- 大背景：固定在視窗、齊上居中，往下重複鋪滿 ----
   iOS Safari 不支援 background-attachment: fixed，改用 position: fixed 的背景層 */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("../../../images/lottery/bg-m@2x.jpg") center top / auto 100vh repeat-y;
  pointer-events: none;
}

/* ---- 頁面欄 ---- */
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding-bottom: 80px;
}

/* ---- 回主會場按鈕：頁面左上，跟著頁面捲動 ---- */
.page__home-link {
  align-self: flex-start;
  display: block;
  width: 160px;
  height: 40px;
  margin: 12px 0 0 16px;
}

.page__home-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- 主視覺 ---- */
.page__kv {
  width: 100%;
  margin: 0;
}

.page__kv img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- 分會場活動卡片列 ---- */
.entries {
  width: 83.47%; /* 313 / 375 */
}

.entries__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.entries__link {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.entries__link img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- 區塊版頭（趣抽獎／小遊戲） ---- */
.section-title {
  width: 100%;
  margin: 0;
}

.section-title img {
  display: block;
  width: 100%;
  height: auto;
}

.lottery-section,
.game-section {
  display: flex;
  flex-direction: column;
  width: 93.07%; /* 349 / 375 */
  scroll-margin-top: 16px;
}

.lottery-section {
  padding-bottom: 24px;
}

.game-section {
  gap: 16px;
}

/* ---- 小遊戲 ---- */
.game {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px 0 32px;
  background: var(--sky-500);
  border: 2px solid var(--navy-dark);
  border-top: 0;
  border-radius: 16px 16px 40px 40px;
}

/* 遊戲排行圖：寬度撐滿，高度依圖片比例等比縮放（M／PC 各一張） */
.game__rank {
  width: 100%;
  margin: 0;
}

.game__rank img {
  display: block;
  width: 100%;
  height: auto;
}

.game__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 192px;
  height: 55px;
  padding: 10px;
  background: var(--brand-500);
  border: 2px solid var(--navy);
  border-radius: 20px;
  box-shadow: var(--shadow-navy-4);
  text-decoration: none;
}

.game__btn:active {
  transform: translateY(2px);
  box-shadow: var(--shadow-navy-2);
}

.game__btn-text {
  display: block;
  width: 100px;
  height: auto;
}

.game__btn-arrow {
  display: block;
  width: 19px;
  height: 20px;
}

/* ============================================= */
/* PC 版 */
/* ============================================= */
@media (min-width: 768px) {
  .page-bg {
    background-image: url("../../../images/lottery/bg-pc@2x.jpg");
    background-size: auto 100vh;
  }

  .page {
    gap: 40px;
    max-width: 960px;
    padding: 0 13px 120px;
  }

  .page__home-link {
    margin: 16px 0 0;
  }

  .page__kv {
    display: flex;
    justify-content: center;
    padding: 35px 0 5px;
  }

  .page__kv img {
    max-width: 825px;
  }

  .entries {
    width: 100%;
    max-width: 934px;
    padding-bottom: 8px;
  }

  .entries__list {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
  }

  .entries__item--lottery {
    flex: 0 1 297px;
  }

  .entries__item--task {
    flex: 0 1 295px;
  }

  .entries__item--game {
    flex: 0 1 298px;
  }

  .lottery-section,
  .game-section {
    width: 100%;
    max-width: 660px;
  }

  .lottery-section {
    padding-bottom: 0;
  }
}