/* 主視覺色票取自背景圖：深藍夜空 + 月亮金 + 雲朵米白 */
.lottery-shell[data-v-f63ffb6a] {
  --lt-navy: #0E1F4A;
  --lt-gold: #F5C64A;
  --lt-cream: #FDF6E6;
  --lt-ink: #1C2B3A;
}

/* LiffPage 的根元素會同時帶到本元件的 scope，故這裡改得到它的底色與內距 */
.lottery-shell.liff-page[data-v-f63ffb6a] {
  background: transparent;
  padding: 0 0 24px;
  color: var(--lt-cream);
  min-height: 100vh;
}
/* 中秋主視覺底圖。用 ::before 而非 slot 裡的 div：
   LiffPage 在 loading 時不 render slot，底圖若放 slot 裡，這張 400KB 的 PNG
   要等 API 回來才開始下載解碼，名單出現後底圖才慢半拍補上。
   放 ::before 則是進頁就開始載（loading 動畫本身是不透明滿版，蓋著看不到，但已經在載了）。
   ⚠ 這層是不透明的，slot 內任何內容都必須包在 .lt-content 裡才會疊在它上面。
   LINE WebView 不吃 background-attachment:fixed，故用 position:fixed 的獨立圖層。 */
.lottery-shell.liff-page[data-v-f63ffb6a]::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--lt-navy);
  background-image: url(../img/lottery-bg.3b83170d.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

/* 內容疊在底圖之上 */
.lt-content[data-v-f63ffb6a] { position: relative; z-index: 1;
}
.lt-title[data-v-f63ffb6a] {
  margin: 0;
  /* 上方留白讓出背景圖的月亮與兔子 */
  padding: 190px 16px 14px;
  font-size: calc(20px * var(--liff-scale, 1));
  font-weight: 800;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* ── 尚未開始 / 無名單 ── */
.lt-empty[data-v-f63ffb6a] {
  margin: 0 16px;
  padding: 28px 18px;
  border-radius: 16px;
  background: rgba(253, 246, 230, 0.94);
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.lt-empty-icon[data-v-f63ffb6a] { font-size: calc(40px * var(--liff-scale, 1)); line-height: 1; margin-bottom: 10px;
}
.lt-empty-text[data-v-f63ffb6a] { margin: 0; font-size: calc(16px * var(--liff-scale, 1)); font-weight: 700; color: var(--lt-ink);
}

/* ── 主頁籤（中獎名單 / 活動規則）── */
/* 釘在頂端：規則頁高度約五個螢幕，不釘住的話看到最後要往回捲三千多 px 才切得回名單。
   sticky 掛在滿版外框而不是 pill 上：pill 左右各留 16px，捲動的名單卡片會從那兩條
   空隙穿過去。外框滿版且底色不透明，才擋得住。 */
.lt-segwrap[data-v-f63ffb6a] {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 8px 16px 12px;
  background: rgba(14, 31, 74, 0.95);
}
.lt-seg[data-v-f63ffb6a] {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(14, 31, 74, 0.6);
  border: 1px solid rgba(245, 198, 74, 0.45);
}
.lt-seg-btn[data-v-f63ffb6a] {
  flex: 1 1 0;
  /* button 不繼承 font-family，不寫的話會掉回瀏覽器預設字體、跟全頁不一致 */
  font-family: inherit;
  min-height: 42px;
  padding: 9px 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--lt-cream);
  font-size: calc(15px * var(--liff-scale, 1));
  font-weight: 700;
  cursor: pointer;
}
.lt-seg-btn.active[data-v-f63ffb6a] {
  background: var(--lt-gold);
  color: var(--lt-ink);
}

/* ── 防詐提醒 ── */
.lt-fraud[data-v-f63ffb6a] {
  margin: 0 16px 14px;
  padding: 12px 14px;
  border-radius: 16px;
  /* 與其他卡片同底色，但加一圈警示紅外框 —— 一眼分得出是警語不是活動內容。
     不用單邊 border：圓角配單邊框在 WebView 上會缺角。 */
  background: rgba(253, 246, 230, 0.96);
  border: 2px solid #B3261E;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.lt-fraud-title[data-v-f63ffb6a] {
  margin: 0 0 5px;
  font-size: calc(16px * var(--liff-scale, 1));
  font-weight: 800;
  color: #B3261E;
}
.lt-fraud-text[data-v-f63ffb6a] {
  margin: 0;
  font-size: calc(15px * var(--liff-scale, 1));
  line-height: 1.75;
  color: var(--lt-ink);
}

/* ── 活動規則 ── */
.lt-rules[data-v-f63ffb6a] { margin: 0 16px;
}
.lt-rule-card[data-v-f63ffb6a] {
  margin-bottom: 14px;
  padding: 16px 16px 18px;
  border-radius: 16px;
  background: rgba(253, 246, 230, 0.96);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  color: var(--lt-ink);
}
.lt-rule-card[data-v-f63ffb6a]:last-child { margin-bottom: 0;
}
.lt-rule-h[data-v-f63ffb6a] {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--lt-gold);
  font-size: calc(17px * var(--liff-scale, 1));
  font-weight: 800;
}
.lt-rule-sh[data-v-f63ffb6a] { margin: 16px 0 6px; font-size: calc(15px * var(--liff-scale, 1)); font-weight: 800;
}
.lt-rule-sh[data-v-f63ffb6a]:first-of-type { margin-top: 0;
}
.lt-rule-p[data-v-f63ffb6a] { margin: 0 0 6px; font-size: calc(14px * var(--liff-scale, 1)); line-height: 1.75;
}
.lt-rule-b[data-v-f63ffb6a] { font-weight: 800;
}
.lt-rule-ul[data-v-f63ffb6a], .lt-rule-ol[data-v-f63ffb6a] { margin: 0 0 8px; padding-left: 20px;
}
.lt-rule-ul li[data-v-f63ffb6a], .lt-rule-ol li[data-v-f63ffb6a] {
  margin-bottom: 6px;
  font-size: calc(14px * var(--liff-scale, 1));
  line-height: 1.75;
}

/* ── 活動說明四步驟 ── */
.lt-steps[data-v-f63ffb6a] { list-style: none; margin: 0; padding: 0;
}
.lt-step[data-v-f63ffb6a] {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(28, 43, 58, 0.1);
}
.lt-step[data-v-f63ffb6a]:last-child { border-bottom: none;
}
.lt-step-n[data-v-f63ffb6a] {
  flex: 0 0 auto;
  /* 圓圈與行高跟著字級一起放大，否則特大級時數字會頂出圓外 */
  width: calc(26px * var(--liff-scale, 1));
  height: calc(26px * var(--liff-scale, 1));
  border-radius: 50%;
  background: var(--lt-gold);
  color: var(--lt-ink);
  font-size: calc(14px * var(--liff-scale, 1));
  font-weight: 800;
  line-height: calc(26px * var(--liff-scale, 1));
  text-align: center;
}
.lt-step-body[data-v-f63ffb6a] { flex: 1 1 auto; min-width: 0;
}
.lt-step-t[data-v-f63ffb6a] { margin: 2px 0 3px; font-size: calc(15px * var(--liff-scale, 1)); font-weight: 800;
}
.lt-step-d[data-v-f63ffb6a] { margin: 0; font-size: calc(14px * var(--liff-scale, 1)); line-height: 1.7; color: #3C4A58;
}
.lt-hi[data-v-f63ffb6a] {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(14, 31, 74, 0.92);
  text-align: center;
}
.lt-hi-line[data-v-f63ffb6a] {
  margin: 0;
  font-size: calc(13px * var(--liff-scale, 1));
  font-weight: 700;
  line-height: 1.8;
  color: var(--lt-gold);
}

/* ── 日期區塊 ── */
.lt-day[data-v-f63ffb6a] { margin-bottom: 18px;
}
.lt-day[data-v-f63ffb6a]:last-of-type { margin-bottom: 0;
}
.lt-day-label[data-v-f63ffb6a] {
  margin: 0 16px 8px;
  font-size: calc(15px * var(--liff-scale, 1));
  font-weight: 800;
  color: var(--lt-gold);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* ── 名單卡片 ── */
.lt-card[data-v-f63ffb6a] {
  margin: 0 16px;
  border-radius: 16px;
  background: rgba(253, 246, 230, 0.96);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.lt-list[data-v-f63ffb6a] { list-style: none; margin: 0; padding: 6px 0;
}
/* 一列：姓名、手機靠左，獎項靠右（純文字，不做標籤色塊）。
   獎項名稱可能很長（如耳機型號）：只讓獎項這一欄縮、在右側自行換行，
   姓名與手機固定不縮，確保遮罩後的身分資訊永遠完整可讀。 */
.lt-row[data-v-f63ffb6a] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(28, 43, 58, 0.08);
  color: var(--lt-ink);
}
.lt-row[data-v-f63ffb6a]:last-child { border-bottom: none;
}
.lt-name[data-v-f63ffb6a] { flex: 0 0 auto; font-size: calc(16px * var(--liff-scale, 1)); font-weight: 700;
}
.lt-phone[data-v-f63ffb6a] { flex: 0 0 auto; font-size: calc(14px * var(--liff-scale, 1)); color: #5A6672; letter-spacing: 0.3px;
}
/* 正式名單與未填名單共用；margin-left:auto 推到最右，min-width:0 讓長名稱能在剩餘寬度內換行 */
.lt-prize[data-v-f63ffb6a] {
  margin-left: auto;
  flex: 0 1 auto;
  min-width: 0;
  text-align: right;
  /* 換行時讓各行長度平均，避免「500 元」的「元」單獨掉到下一行（不支援的瀏覽器照一般換行） */
  text-wrap: balance;
  font-size: calc(14px * var(--liff-scale, 1));
  font-weight: 600;
  line-height: 1.5;
  color: var(--lt-ink);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.lt-deadline[data-v-f63ffb6a] {
  margin: 16px 16px 0;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(253, 246, 230, 0.96);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  font-size: calc(14px * var(--liff-scale, 1));
  line-height: 1.7;
  color: var(--lt-ink);
}
.lt-note[data-v-f63ffb6a] {
  margin: 14px 16px 0;
  /* 這行現在是整頁最後一個元素，自己留下緣空白 */
  padding-bottom: 4px;
  font-size: calc(12px * var(--liff-scale, 1));
  text-align: center;
  color: rgba(253, 246, 230, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* ── 尚未填寫中獎資訊中獎人（卡片下半部）── */
/* 與正式名單同一張卡片，靠一條分隔線與淺底區分，不另外浮一個區塊。
   卡片本身有 border-radius + overflow:hidden，這裡只加上緣線、不需自己設圓角。 */
.lt-pending[data-v-f63ffb6a] {
  padding: 14px 16px 4px;
  background: rgba(28, 43, 58, 0.045);
}
/* 分隔線只在上面真的有正式名單時才畫；開獎後還沒有人填資料時，
   本區塊是卡片裡唯一的內容，頂端那條線會變成沒有上文的浮線。 */
.lt-list + .lt-pending[data-v-f63ffb6a] {
  border-top: 2px solid rgba(28, 43, 58, 0.14);
}
.lt-pending-title[data-v-f63ffb6a] {
  margin: 0 0 6px;
  font-size: calc(15px * var(--liff-scale, 1));
  font-weight: 800;
  color: var(--lt-ink);
}
.lt-pending-list[data-v-f63ffb6a] { list-style: none; margin: 0; padding: 0;
}
.lt-pending-row[data-v-f63ffb6a] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(28, 43, 58, 0.08);
}
.lt-pending-row[data-v-f63ffb6a]:last-child { border-bottom: none;
}
/* 暱稱不縮（否則會被右側長獎名擠到逐字斷行），但最多佔一半寬度，
   超長暱稱才在這一半內換行；縮的空間一律讓給獎項 */
.lt-pending-name[data-v-f63ffb6a] {
  flex: 0 0 auto;
  max-width: 50%;
  font-size: calc(15px * var(--liff-scale, 1));
  font-weight: 700;
  color: var(--lt-ink);
  word-break: break-all;
}

/* ── 錯誤面板 ── */
.lt-panel[data-v-f63ffb6a] {
  margin: 0 16px;
  padding: 24px 18px;
  border-radius: 16px;
  background: rgba(253, 246, 230, 0.94);
  text-align: center;
  color: var(--lt-ink);
}
.lt-panel-title[data-v-f63ffb6a] { margin: 0 0 6px; font-size: calc(16px * var(--liff-scale, 1)); font-weight: 800;
}
.lt-panel-text[data-v-f63ffb6a] { margin: 0; font-size: calc(14px * var(--liff-scale, 1));
}