@charset "UTF-8";

.logo {
  width: 16%;
  position: absolute;
  margin: 10px 0 0 10px;
}

.logo img {
  display: block;
  width: 100%;
}

.conm div img {
  width: 100%;
  display: block;
}

.conff {
  width: 100%;
  padding-bottom: 0%;
}

.conff picture {
  display: block;
}

.frmbx .frmbx__mobile {
  display: none;
}

#particles-js {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  z-index: 2;
  pointer-events: none;
}

/* ==========================================================
   鎏金歲月 — 活動頁樣式
   設計寬度 1920 / 內容寬 1260 / 框寬 1164
   ========================================================== */
:root {
  --c-bg: #0a0d18;
  --c-panel: #141926;
  --c-panel-line: #6d5b47;
  --c-text: #e9dfc8;
  --c-gold: #f3cf7a;
  --c-gold-deep: #8a4b12;
  --c-red: #e0312a;
  --c-pink: #ff4d5e;
  --c-blue: #1e7fd6;
  --c-cyan: #34e0e8;
  --c-ink: #3a2a1a;
  --c-brown: #7a2e0e;
  --f-sans: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --f-serif: "Noto Serif TC", "PMingLiU", serif;
  --w-container: 1260px;
  --w-frame: 1164px;
}

*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: .08em;
  -webkit-font-smoothing: antialiased
}

img {
  display: block;
  max-width: 100%;
  height: auto
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none
}

p {
  margin: 0
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: inherit
}

a {
  color: var(--c-gold);
  text-decoration: none;
  transition: color .2s
}

a:hover {
  color: #fff3c9
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap
}

/* ---------- 主視覺 ---------- */
.hero {
  position: relative;
  padding-bottom: 41%;
  background: url(../images/bg/hero.jpg) center top no-repeat;
  background-size: cover;
}

.hero__logo {
  position: absolute;
  left: 40px;
  top: 36px;
  width: 270px;
  height: 105px
}

.hero__slogan {
  position: absolute;
  left: clamp(59px, 13.8vw, 265px);
  top: clamp(82px, 8.33vw, 160px);
  width: min(24vw, 460px);
  display: block;
}

.hero__slogan img {
  width: 100%;
  height: auto
}

.hero__slogan--2 {
  top: clamp(180px, 26.82vw, 515px);
  width: min(42.92vw, 824px);
}

.hero__slogan--3 {
  top: clamp(248px, 35.65vw, 646px);
  width: min(42.97vw, 825px)
}

.hero__links {
  position: absolute;
  right: 14px;
  top: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 0 0 10px;
  font-size: 16px;
  line-height: 1.2
}

.hero__links a {
  display: block;
  padding: 8px 10px;
  color: #f3cf7a;
  white-space: nowrap;
  text-shadow: 0 1px 2px #000;
  background: rgba(10, 13, 24, .72);
  border: 1px solid rgba(243, 207, 122, .55);
  border-radius: 3px;
  transition: color .15s, transform .15s, filter .15s
}

.hero__links a:hover {
  color: #fff6d6;
  background: rgba(10, 13, 24, .9);
  transform: translateY(-1px);
  filter: brightness(1.12)
}

.hero__links a:active {
  transform: translateY(1px);
  filter: brightness(.95)
}

.hero__links a:not(.hero__fb) {
  padding: 0 10px;
  color: #fff;
  background: none;
  border: 0;
  border-radius: 0
}

.hero__links a:not(.hero__fb)+a:not(.hero__fb) {
  border-left: 1px solid rgba(255, 255, 255, .7);
  padding-left: 16px
}

.hero__links a:not(.hero__fb):hover {
  color: #fff
}

.hero__links .hero__fb {
  width: 36px;
  height: 36px;
  margin-left: 0;
  padding: 0;
  line-height: 0;
  background: none;
  border: 0;
  border-radius: 0
}

.hero__links .hero__fb:hover {
  background: none
}

/* ---------- 導覽列 ---------- */
.gnav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 78px;
  background: #141a33 url(../images/bg/nav-bar.png) left top/auto 100% repeat-x;
  background-size: 100% 100%;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .38);
}

.gnav__list {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0
}

.gnav__list li {
  display: flex;
  align-items: center
}

.gnav__list li+li::before {
  content: "◈";
  margin: 0 26px;
  color: #b9a47a;
  font-size: 14px
}

.gnav__list a {
  font-family: var(--f-serif);
  font-size: 24px;
  font-weight: 500;
  color: #e8c77f;
  letter-spacing: .12em;
  text-shadow: 0 1px 2px #000
}

.gnav__list a:hover,
.gnav__list a.is-active {
  color: #fff6d6;
  text-shadow: 0 0 10px rgba(255, 210, 120, .8)
}

/* ---------- 背景：可無限延伸 ----------
   第1層 bg-bottom 固定貼底（玫瑰裝飾）
   第2層 bg-tile 往下 repeat-y，內容多長背景就延伸多長 */
.page {
  background:
    url(../images/bg/mbgb.png) center bottom no-repeat,
    url(../images/bg/mbg_03.jpg) center top repeat-y,
    var(--c-bg)
}

/* 中央深色面板：高度由內容撐開 */
.container {
  width: 100%;
  max-width: var(--w-container);
  margin: 0 auto;
  padding: 5px 5px 140px;
}

.contbx {
  width: 100%;
  background: url("../images/bg/minm.png");
  background-size: 100% auto;
}

.conm {
  width: 90%;
  margin: -10% auto 0 auto;
}

/* .container{width:100%;max-width:var(--w-container);margin:0 auto;padding:40px 48px 140px;background:linear-gradient(180deg,#131827 0%,#1a2031 50%,#151a29 100%);border-left:1px solid var(--c-panel-line);border-right:1px solid var(--c-panel-line)} */
.sec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding-bottom: 90px
}

.sec:last-child {
  padding-bottom: 0
}

/* 區塊標題 */
.sec-title {
  display: flex;
  justify-content: center;
  width: 100%
}

.sec-title--top {
  margin-top: -40px
}

.sec-title--line {
  position: relative
}

.sec-title--line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #a07a3c 30%, #a07a3c 70%, transparent)
}

.sec-title--line img {
  position: relative
}

.sec-title--wide {
  position: relative
}

.sec-title--wide::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #a07a3c 30%, #a07a3c 70%, transparent)
}

.sec-title--wide img {
  position: relative
}

.lead {
  font-family: var(--f-serif);
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  text-wrap: pretty;
  color: #f1e6cf
}

.lead--gold {
  color: var(--c-gold);
  font-weight: 700
}

/* ---------- 通用可伸縮框（三段式：上／中 repeat-y／下） ----------
   內容增加時中段自動延伸，不需重切圖 */
.frame2 {
  position: relative;
  width: 100%;
  max-width: var(--w-frame);
  min-height: 210px;
  padding: 5px 100px 5px;
  color: var(--c-ink);
  background: url(../images/frame/minbg_02.png);
  background-size: 100% auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 28px;
}

.frame {
  position: relative;
  width: 100%;
  max-width: var(--w-frame);
  min-height: 210px;
  padding: 56px 110px 70px;
  color: var(--c-ink);
  background:
    url(../images/frame/fmm_01.jpg) center top/100% auto no-repeat,
    url(../images/frame/fmm_03.jpg) center bottom/100% auto no-repeat,
    url(../images/frame/fmm_02.jpg) center top/100% auto repeat-y;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px
}

.framei {
  position: relative;
  width: 100%;
  max-width: var(--w-frame);
  min-height: 210px;
  padding: 0 110px 0;
  color: var(--c-ink);
  /* background:
    url(../images/frame/frame-top.jpg) center top/100% auto no-repeat,
    url(../images/frame/frame-bottom.jpg) center bottom/100% auto no-repeat,
    url(../images/frame/frame-mid.jpg) center top/100% auto repeat-y; */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px
}

.frame--draw {
  position: relative;
  padding-top: 64px;
  padding-bottom: 84px
}

.frame--draw::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: min(72%, 620px);
  aspect-ratio: 611 / 263;
  z-index: 0;
  background: url('../images/frame/bbggg.png') center center/100% auto no-repeat;
  opacity: .75;
  pointer-events: none
}

.frame--draw>* {
  position: relative;
  z-index: 1
}

.frame-head {
  width: 100%;
  display: flex;
  justify-content: center
}

.frame-head img {
  max-width: 820px;
  width: 100%
}

.frame-head--sm img {
  max-width: 696px
}

/* ---------- 活動方式卡片（上方標頭圖＋可伸縮內文） ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  width: 100%
}

.card {
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .4))
}

.card__head {
  width: 100%
}

.card__body {
  flex: 1;
  min-height: 120px;
  padding: 16px 26px 5px;
  font-size: 17px;
  line-height: 1.5;
  color: #6f5f4c;
  text-wrap: pretty;
  background: url(../images/card/c1_02.png) repeat-y;
  background-size: 100% auto;
}

.card__body2 {
  flex: 1;
  min-height: 120px;
  padding: 16px 26px 5px;
  font-size: 17px;
  line-height: 1.5;
  color: #6f5f4c;
  text-wrap: pretty;
  background: url(../images/card/c2_02.png) repeat-y;
  background-size: 100% auto;
}

.card__body3 {
  flex: 1;
  min-height: 120px;
  padding: 16px 26px 5px;
  font-size: 17px;
  line-height: 1.5;
  color: #6f5f4c;
  text-wrap: pretty;
  background: url(../images/card/c3_02.png) repeat-y;
  background-size: 100% auto;
}

.rules {
  width: 100%;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 14px
}

.rules__title {
  font-family: var(--f-serif);
  font-size: 24px;
  color: var(--c-pink)
}

.rules__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 12px
}

.rules__list li {
  position: relative;
  padding-left: 36px;
  font-family: var(--f-serif);
  font-size: 20px;
  color: #fff
}

.rules__list li::before {
  content: "◆";
  position: absolute;
  left: 0;
  color: #fff
}

/* ---------- 圖片按鈕 ---------- */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px
}

.img-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 90%;
  transition: transform .15s, filter .15s
}

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

.img-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.12)
}

.img-btn:active {
  transform: translateY(1px)
}

.img-btn[disabled] {
  cursor: not-allowed
}

.img-btn[disabled]:hover {
  transform: none;
  filter: none
}

.loginbx {
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(100%, 400px);
  margin: 0 auto;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease
}

.loginbx img {
  width: 100%;
  display: block;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .28));
  transition: filter .2s ease, transform .2s ease
}

.loginbx:hover {
  transform: translateY(-3px);
  filter: brightness(1.1)
}

.loginbx:hover img {
  filter: drop-shadow(0 14px 22px rgba(40, 22, 0, .45)) brightness(1.08)
}

.loginbx:active {
  transform: translateY(0);
  filter: brightness(.96)
}

.loginbx:active img {
  transform: scale(.99)
}

.login-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px
}

.login-tip.is-hidden {
  display: none
}

/* 未登入：隱藏抽獎框；登入後：隱藏登入按鈕與提示文字 */
body:not(.is-logged-in) #sec-member .frame,
body:not(.is-logged-in) #sec-draw .frame,
body:not(.is-logged-in) #sec-draw .notes,
.is-logged-in .loginbx--draw,
.is-logged-in .lead--gold {
  display: none
}

/* ---------- 登入框內容 ---------- */
.field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px
}

.field__label {
  font-family: var(--f-serif);
  font-size: 28px;
  font-weight: 900;
  color: #1c2a4a;
  letter-spacing: .15em
}

.select {
  position: relative;
  width: 340px;
  max-width: 100%
}

.select::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 30px;
  top: 50%;
  margin-top: -5px;
  border: 9px solid transparent;
  border-top: 12px solid #1a1a1a;
  border-bottom: 0;
  pointer-events: none;
}

.select select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 58px;
  padding: 0 54px 0 28px;
  font-family: var(--f-sans);
  font-size: 20px;
  letter-spacing: .1em;
  text-align: center;
  text-align-last: center;
  color: #2a2a2a;
  background: url('../images/icon/inbgg.png') center center/100% 100% no-repeat;
  border: 0;
  outline: none;
  box-shadow: none;
  cursor: pointer
}

.select select option {
  color: #f2d58f;
  background: #2b2117;
}

.select select.account-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.account-select__trigger {
  width: 100%;
  height: 58px;
  padding: 0 54px 0 28px;
  border: 0;
  background: url('../images/icon/inbgg.png') center center/100% 100% no-repeat;
  color: #2a2a2a;
  font-family: var(--f-sans);
  font-size: 20px;
  letter-spacing: .1em;
  text-align: center;
  cursor: pointer;
}

.select.is-open {
  z-index: 20;
}

.account-select__menu {
  position: absolute;
  z-index: 21;
  top: calc(100% + 4px);
  left: 50%;
  width: min(220px, calc(100vw - 32px));
  max-height: 220px;
  overflow-y: auto;
  transform: translateX(-50%);
  border: 1px solid #9b7745;
  border-radius: 5px;
  background: #2b2117;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .42);
}

.account-select__menu[hidden] {
  display: none;
}

.account-select__option {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: #f2d58f;
  font-family: var(--f-sans);
  font-size: 16px;
  text-align: center;
  cursor: pointer;
}

.account-select__option:hover,
.account-select__option:focus-visible,
.account-select__option[aria-selected="true"] {
  background: rgba(243, 207, 122, .15);
  color: #fff4d4;
  outline: none;
}

.sub-title {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  font-family: var(--f-serif);
  font-size: 40px;
  font-weight: 700;
  color: var(--c-brown);
  letter-spacing: .1em
}

.sub-title::before,
.sub-title::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, #b58a3a)
}

.sub-title::after {
  background: linear-gradient(90deg, #b58a3a, transparent)
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  width: 100%;
  max-width: 840px
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center
}

.stat img {
  width: 100%;
  mix-blend-mode: multiply
}

.stat__name {
  font-family: var(--f-serif);
  font-size: 26px;
  font-weight: 700;
  color: #3a2a1a
}

.stat__num {
  font-size: 52px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--c-brown);
  letter-spacing: .06em
}

.stat__unit {
  width: 180px;
  padding-top: 8px;
  border-top: 1px solid #c9a868;
  font-size: 20px;
  color: #5a4a3a
}

/* ---------- 抽獎 ---------- */
.draw-desc {
  font-family: var(--f-serif);
  font-size: 26px;
  font-weight: 900;
  color: #ab210c;
  text-align: center;
  text-wrap: pretty;
  letter-spacing: .04em;

  text-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 0 5px rgba(255, 224, 150, .9), 0 0 10px rgba(255, 224, 150, .45)
}

.remain {
  padding: 4px 60px;
  font-family: var(--f-serif);
  font-size: 30px;
  font-weight: 700;
  color: #3a2a1a;
  background: url('../images/head/nbbg.png') center center/100% auto no-repeat;
  border: 0;
  border-radius: 6px;
  box-shadow: none
}

.remain b {
  margin: 0 8px;
  font-family: var(--f-sans);
  font-size: 42px;
  color: #c98a08
}

.draw-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%
}

.draw-btns .img-btn {
  flex: 1 1 180px;
  max-width: 220px;
  min-width: 120px
}

.draw-frame-result-open .remain,
.draw-frame-result-open .draw-btns {
  display: none;
}

.draw-result[hidden] {
  display: none
}

.draw-result {
  width: 100%;
  padding: 18px 0 0;
}

.draw-result__panel {
  width: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: 0px 4% 36px;
  background: transparent;
}

.draw-result__content {
  max-width: 990px;
  margin: 0 auto;
  text-align: center;
}

.draw-result__heading {
  margin-bottom: 12px;
  color: #49301b;
  font-family: var(--f-serif);
  font-size: clamp(24px, 3.2vw, 42px);
  font-weight: 500;
  letter-spacing: .08em;
}

.draw-result__table-wrap {
  width: 100%;
  overflow-x: hidden;
}

.draw-result__table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid #9a6b32;
  border-radius: 5px;
  overflow: hidden;
  color: #3b2817;
  font-family: var(--f-serif);
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: 0;
  background: #f2dfb7;
}

.draw-result__table th,
.draw-result__table td {
  padding: 8px 6px;
  border-right: 1px solid #b58a52;
  border-bottom: 1px solid #b58a52;
  text-align: center;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.draw-result__table th:nth-child(1),
.draw-result__table td:nth-child(1) {
  width: 17%;
}

.draw-result__table th:nth-child(2),
.draw-result__table td:nth-child(2),
.draw-result__table th:nth-child(3),
.draw-result__table td:nth-child(3) {
  width: 24%;
}

.draw-result__table th:nth-child(4),
.draw-result__table td:nth-child(4) {
  width: 20%;
}

.draw-result__table th:nth-child(5),
.draw-result__table td:nth-child(5) {
  width: 15%;
}

.draw-result__table th:last-child,
.draw-result__table td:last-child {
  border-right: 0;
}

.draw-result__table tbody tr:last-child td {
  border-bottom: 0;
}

.draw-result__table th {
  padding-top: 7px;
  padding-bottom: 7px;
  color: #fff0c9;
  background: linear-gradient(180deg, #76502a, #422713);
  font-weight: 500;
}

.draw-result__table td {
  height: 60px;
  background: #f3e1bc;
}

.draw-result__table tbody tr:nth-child(even) td {
  background: #ead0a0;
}

.draw-result__word {
  display: inline-block;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* 祝願字箋抽獎結果：祝福文字卡片（每列 5 張，不足一列置中） */
.draw-result__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.draw-card {
  position: relative;
  display: flex;
  width: calc((100% - 14px * 4) / 5);
  min-height: 129px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px;
  border: 1px solid #5c472c;
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(255, 240, 211, .035), rgba(255, 240, 211, .015));
  text-align: center;
}

.draw-card::before,
.draw-card::after {
  position: absolute;
  width: 14px;
  height: 14px;
  content: "";
  pointer-events: none;
}

.draw-card::before {
  top: 7px;
  left: 7px;
  background: linear-gradient(#d8c9a8, #d8c9a8) left top/13px 1px no-repeat,
    linear-gradient(#d8c9a8, #d8c9a8) left top/1px 13px no-repeat;
}

.draw-card::after {
  right: 7px;
  bottom: 7px;
  background: linear-gradient(#d8c9a8, #d8c9a8) right bottom/13px 1px no-repeat,
    linear-gradient(#d8c9a8, #d8c9a8) right bottom/1px 13px no-repeat;
}

.draw-card img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.draw-card__quantity {
  color: #302a21;
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.4;
}

@media (max-width:767px) {
  .draw-result__cards {
    gap: 8px;
  }

  .draw-card {
    width: calc((100% - 8px * 2) / 3);
    min-height: 105px;
  }

  .draw-card img {
    width: 52px;
    height: 52px;
  }

  .draw-card__quantity {
    font-size: 14px;
  }
}

.draw-result__pages {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  margin-top: 22px;
}

.draw-result__page,
.draw-result__back {
  min-width: 40px;
  padding: 7px 14px;
  border: 1px solid #b88b2d;
  border-radius: 4px;
  color: #fff5d4;
  background: #173d2b;
  cursor: pointer;
}

.draw-result__page.is-active,
.draw-result__page:hover,
.draw-result__back:hover {
  color: #2b1a07;
  background: #d8ad4b;
}

.draw-result__back {
  min-width: 116px;
  margin-top: 18px;
  padding: 8px 28px;
  border: 2px solid #b58a52;
  border-radius: 8px;
  color: #fff2d0;
  background: linear-gradient(180deg, #9b7040 0%, #704720 52%, #4b2b13 100%);
  box-shadow: inset 0 1px 0 rgba(255, 244, 205, .35), 0 3px 6px rgba(55, 30, 12, .4);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .08em;
  text-shadow: 0 1px 1px rgba(45, 22, 8, .8);
}

.draw-result__back:hover {
  color: #fff;
  background: linear-gradient(180deg, #b58952 0%, #875b2d 52%, #5d3719 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 5px 10px rgba(55, 30, 12, .5);
  transform: translateY(-1px);
}

.draw-result__back:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 3px rgba(45, 22, 8, .4);
}

.draw-result-open {
  overflow: visible;
}

.notes {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 20px
}

.notes li {
  position: relative;
  padding-left: 40px;
  font-size: 20px;
  letter-spacing: .14em;
  color: #f1e8d6
}

.notes li::before {
  content: "※";
  position: absolute;
  left: 0
}

.notes em {
  font-style: normal
}

.c-gold {
  color: #ffc726
}

.c-cyan {
  color: var(--c-cyan)
}

.c-blue {
  color: #f0a22e
}

.c-red {
  color: #8ed8e6
}

/* ---------- 廿載典藏（列表可自由增減） ---------- */
.collect {
  width: 100%;
  max-width: 920px;
  display: flex;
  flex-direction: column
}

.collect__row {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 160px;
  align-items: center;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid #d9c49c
}

.collect__row:last-child {
  border-bottom: 0
}

.seals {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px
}

.seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 44px;
  font-family: var(--f-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 40px;
  color: #fff
}

.seal::first-line {
  color: inherit
}

.seal {
  position: relative
}

.seal small {
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 400;
  color: #8a6a3a
}

.seal {
  background: radial-gradient(circle at 50% 22px, #9a9a9a 0 16px, #e9e9e9 17px 18px, #777 19px 21px, transparent 22px) top center/44px 44px no-repeat
}

.seal.is-on {
  background: radial-gradient(circle at 50% 22px, #c0302a 0 16px, #f3c8b8 17px 18px, #8a1a14 19px 21px, transparent 22px) top center/44px 44px no-repeat
}

.collect__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 21px;
  line-height: 1.4;
  color: #2a2a2a
}

.collect__item small {
  font-size: 15px;
  color: #a8641c
}

/* ---------- 頁籤 ---------- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px
}

.tabs--sm {
  gap: 20px
}

.tab {
  opacity: .55;
  filter: grayscale(.3)
}

.tab.is-active,
.tab:hover {
  opacity: 1;
  filter: none
}

.tab-panel {
  display: none;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 28px
}

.tab-panel.is-active {
  display: flex
}

#prize-collect .frame-head--sm {
  display: none;
}

.frame2>.tab-panel {
  display: none;
  grid-column: 1;
  grid-row: 2;
}

.frame2>.tab-panel.is-active {
  display: flex;
}

/* ---------- 表格（列數可自由增減） ---------- */
.table-wrap {
  width: 100%;
  overflow-x: auto
}

.prize-table {
  width: 100%;
  /* max-width: 790px; */
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  border: 3px solid #b8955a;
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0;
  color: #2a1a0a
}

.prize-table th {
  padding: 12px 8px;
  background: #3d2a12;
  color: #fff;
  border: 1px dotted #8a7a5a;
}

.prize-table td {
  padding: 10px 8px;
  background: #fdf6d8;
  border: 1px dotted #9a8a6a;
  vertical-align: middle;
}

.blessing-phrase {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.prize-table .blessing-phrase img {
  display: block;
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.prize-table td:first-child {
  width: 30%;
  text-align: center
}

.prize-zoom {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  vertical-align: middle;
  border: 1px solid #b8955a;
  border-radius: 4px;
  background: rgba(61, 42, 18, .08);
}

.prize-zoom:hover {
  background: rgba(61, 42, 18, .18);
}

.prize-zoom__icon {
  position: relative;
  display: block;
  width: 19px;
  height: 19px;
}

.prize-zoom__icon::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border: 2px solid #8a5b24;
  border-radius: 50%;
  content: "";
}

.prize-zoom__icon::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 8px;
  height: 2px;
  transform: rotate(45deg);
  transform-origin: center;
  border-radius: 2px;
  background: #8a5b24;
  content: "";
}

.prize-lightbox[hidden] {
  display: none;
}

.prize-lightbox:not([hidden]) {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(0, 0, 0, .82);
  cursor: zoom-out;
}

.prize-lightbox img {
  width: auto;
  max-width: min(100%, 1200px);
  max-height: calc(100vh - 56px);
  object-fit: contain;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
  cursor: default;
}

.prize-lightbox__close {
  position: absolute;
  top: 18px;
  right: 22px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  color: #fff;
  font-size: 26px;
  line-height: 1;
}

.prize-lightbox__close:hover {
  background: rgba(255, 255, 255, .16);
}

.prize-table tbody tr:nth-child(odd) td {
  background: #fbeebd
}

.serial-table {
  width: 100%;
  max-width: 930px;
  margin: 0 auto;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: .02em;
  text-align: center;
  color: #1a1a1a;
  border: 2px solid #b8955a;
  border-radius: 4px;
  overflow: hidden
}

.serial-table th {
  padding: 6px 8px;
  font-family: var(--f-serif);
  font-size: 17px;
  font-weight: 500;
  color: #f5e2b8;
  background: linear-gradient(180deg, #4a3822, #2e2214)
}

.serial-table th+th {
  border-left: 1px solid #8a6a3a
}

.serial-table td {
  height: 34px;
  padding: 2px 8px;
  background: #fbf2dc;
  border-top: 1px solid #c7aa76
}

.serial-table td+td {
  border-left: 1px solid #c7aa76
}

.serial-collect-words {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.serial-table--collect .serial-collect-words img {
  display: block;
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.tab-panel .serial-table--two-column th,
.tab-panel .serial-table--two-column td {
  width: 50%;
}

.serial-table--two-column .stamp {
  width: auto;
  height: 42px;
  line-height: 1;
}

.serial-table--two-column .stamp img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.stamp {
  display: inline-block;
  width: 50px;

  line-height: 20px;
  font-family: var(--f-serif);
  font-size: 18px;


}

/* ---------- 注意事項 ---------- */
.notice {
  counter-reset: n;
  width: 100%;
  max-width: 770px;
  display: flex;
  flex-direction: column;
  gap: 0
}

.notice li {
  counter-increment: n;
  position: relative;
  padding-left: 36px;
  font-size: 19px;
  line-height: 1.9;
  letter-spacing: .12em;
  color: #ffffff
}

.notice li::before {
  content: counter(n) ".";
  position: absolute;
  left: 0;
  color: #fff4c2
}

/* ---------- 頁尾 ---------- */
.footer {
  background: #000;
  padding: 28px 20px 60px
}

.footer__inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px
}

.footer__logos {
  width: 292px;
  flex: none
}

.footer__text {
  flex: 1;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
  color: #ddd
}

.footer__rating {
  width: 52px;
  flex: none
}

.gotop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-serif);
  font-size: 14px;
  font-weight: 700;
  color: #2a1a08;
  background: radial-gradient(circle at 50% 35%, #ffe7a0, #c8912e);
  border: 2px solid #fff0c0;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s
}

.gotop.is-show {
  opacity: 1;
  pointer-events: auto
}

.gotop:hover {
  color: #000
}

/* ---------- 窄螢幕 ---------- */
@media (max-width:1100px) {
  .container {
    padding: 40px 20px 100px
  }

  .frame {
    padding: 48px 48px 64px
  }

  .cards {
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px
  }

  .collect__row {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 8px
  }

  .gnav {
    height: auto;
    padding: 10px
  }

  .gnav__list {
    flex-wrap: wrap;
    gap: 6px 0
  }

  .gnav__list a {
    font-size: 18px
  }

  .gnav__list li+li::before {
    margin: 0 12px
  }

  .hero {
    height: 420px
  }

  /* .hero__slogan {
    left: 16px;
    width: clamp(220px, 37.75vw, 290px)
  }

  .hero__slogan--1 {
    top: clamp(82px, 10.68vw, 116px)
  }

  .hero__slogan--2 {
    top: clamp(180px, 23.44vw, 255px);
    width: clamp(250px, 40.76vw, 313px)
  }

  .hero__slogan--3 {
    top: clamp(248px, 32.55vw, 354px);
    width: clamp(230px, 36.33vw, 279px)
  } */

  .hero__links {
    right: 8px;
    top: 8px;
    max-width: calc(100% - 16px);
    height: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    font-size: 13px
  }

  .hero__links a {
    padding: 5px 6px
  }

  .stats {
    gap: 12px
  }

  .stat__unit {
    width: auto
  }

  .footer__inner {
    flex-direction: column;
    text-align: center
  }

  .draw-result__panel {
    padding: 0 0 28px;
  }

  .draw-result__table-wrap {
    overflow: visible;
  }

  .draw-result__table {
    width: 100%;
    min-width: 0;
    table-layout: auto;
  }

  .draw-result__table thead {
    display: none;
  }

  .draw-result__table,
  .draw-result__table tbody,
  .draw-result__table tr,
  .draw-result__table td {
    display: block;
  }

  .draw-result__table tr {
    padding: 6px 0;
    border-bottom: 1px solid #b58a52;
  }

  .draw-result__table tr:last-child {
    border-bottom: 0;
  }

  .draw-result__table td {
    display: grid;
    grid-template-columns: 5.5em minmax(0, 1fr);
    width: 100% !important;
    min-height: 36px;
    height: auto;
    padding: 6px 10px;
    border: 0;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .draw-result__table td::before {
    color: #6b431f;
    font-weight: 700;
  }

  .draw-result__table td:nth-child(1)::before {
    content: "獎勵品項";
  }

  .draw-result__table td:nth-child(2)::before {
    content: "虛寶序號";
  }

  .draw-result__table td:nth-child(3)::before {
    content: "虛寶密碼";
  }

  .draw-result__table td:nth-child(4)::before {
    content: "獲得時間";
  }

  .draw-result__table td:nth-child(5)::before {
    content: "祝福文字";
  }
}

@media (max-width:767px) {
  .framei {
    padding: 0;
  }

  body {
    font-size: 16px;
    letter-spacing: .04em
  }

  .hero {
    height: 400px;
    background-size: auto 100%;
    background-position: calc(50% - -20%) top
  }

  .hero__logo {
    left: 16px;
    top: 18px;
    width: 30%;
    height: 70px
  }

  .logo {
    width: 30%;
  }

  .hero__slogan {
    position: absolute;
    left: clamp(59px, 13.8vw, 265px);
    top: clamp(99px, 8.33vw, 160px);
    width: min(28vw, 460px);
    display: block;
  }

  .hero__slogan--2 {
    top: clamp(180px, 35.82vw, 515px);
    width: min(42.92vw, 824px);
  }

  .hero__slogan--3 {
    top: clamp(248px, 43.65vw, 646px);
    width: min(57.97vw, 825px);
  }

  .hero__links {
    left: auto;
    right: 8px;
    bottom: auto;
    top: 8px;
    justify-content: flex-end;
    gap: 2px;
    padding: 0;
    line-height: 1
  }

  .hero__links a:not(.hero__fb) {
    padding: 0 7px;
    font-size: 12px
  }

  .hero__links a:not(.hero__fb)+a:not(.hero__fb) {
    padding-left: 10px
  }

  .hero__links .hero__fb {
    width: 30px;
    height: 30px
  }

  .hero__links .hero__fb img {
    width: 100%;
    height: 100%
  }

  .gnav {
    padding: 8px 6px
  }

  .gnav__list {
    gap: 2px 0
  }

  .gnav__list a {
    font-size: 15px;
    letter-spacing: .04em
  }

  .gnav__list li+li::before {
    margin: 0 6px;
    font-size: 10px
  }

  .container {
    padding: 28px 12px 80px
  }

  .sec {
    gap: 22px;
    padding-bottom: 64px
  }

  .sec-title img {
    max-width: 90%;
    height: auto
  }

  .lead {
    font-size: 18px;
    line-height: 1.6
  }

  .frame {
    padding: 40px 10px 52px;
    gap: 22px;
  }

  .frame--draw {
    padding-top: 48px;
    padding-bottom: 64px
  }

  .frame-head img {
    max-width: 100%
  }

  .rules,
  .notes {
    padding: 0 4px
  }

  .rules__title {
    font-size: 19px
  }

  .rules__list li {
    padding-left: 26px;
    font-size: 16px
  }

  .field__label {
    font-size: 22px
  }

  .field {
    width: 100%
  }

  .select {
    width: min(100%, 340px)
  }

  .select select {
    height: 50px;
    padding: 0 48px 0 16px;
    font-size: 17px
  }

  .account-select__trigger {
    height: 50px;
    padding: 0 48px 0 16px;
    font-size: 17px;
  }

  .select::after {
    right: 24px;
  }

  .sub-title {
    font-size: 27px
  }

  .stats {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .stat img {
    width: auto;
    height: auto
  }

  .stat__name {
    font-size: 22px
  }

  .stat__num {
    font-size: 42px
  }

  .draw-desc {
    font-size: 20px;
    line-height: 1.6
  }

  .remain {
    width: 100%;
    padding: 4px 16px;
    font-size: 21px;
    text-align: center
  }

  .remain b {
    font-size: 32px
  }

  .draw-btns {
    gap: 12px
  }

  .draw-btns .img-btn {
    flex-basis: 40%;
    min-width: 110px;
    max-width: 180px
  }

  .draw-result__panel {
    padding: 0 0 28px;
  }

  .draw-result__content {
    width: 100%;
  }

  .draw-result__heading {
    margin-bottom: 10px;
    font-size: 24px;
  }

  .draw-result__table-wrap {
    overflow: visible;
  }

  .draw-result__table {
    width: 100%;
    min-width: 0;
    table-layout: auto;
    border-radius: 5px;
    font-size: 15px;
  }

  .draw-result__table thead {
    display: none;
  }

  .draw-result__table,
  .draw-result__table tbody,
  .draw-result__table tr,
  .draw-result__table td {
    display: block;
  }

  .draw-result__table tr {
    padding: 6px 0;
    border-bottom: 1px solid #b58a52;
  }

  .draw-result__table tr:last-child {
    border-bottom: 0;
  }

  .draw-result__table td {
    display: grid;
    grid-template-columns: 5.5em minmax(0, 1fr);
    align-items: center;
    min-height: 36px;
    height: auto;
    padding: 6px 10px;
    border: 0;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .draw-result__table td::before {
    color: #6b431f;
    font-weight: 700;
  }

  .draw-result__table td:nth-child(1)::before {
    content: "獎勵品項";
  }

  .draw-result__table td:nth-child(2)::before {
    content: "虛寶序號";
  }

  .draw-result__table td:nth-child(3)::before {
    content: "虛寶密碼";
  }

  .draw-result__table td:nth-child(4)::before {
    content: "獲得時間";
  }

  .draw-result__table td:nth-child(5)::before {
    content: "祝福文字";
  }

  .draw-result__word {
    width: 42px;
    height: 42px;
  }

  .notes li {
    padding-left: 28px;
    font-size: 16px;
    line-height: 1.7
  }

  .collect__row {
    width: 100%
  }

  .collect__item {
    font-size: 18px
  }

  .tabs {
    gap: 6px
  }

  .frame2 {
    padding-right: 16px;
    padding-left: 16px
  }

  .tabs[data-tabs="prize"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 6px
  }

  .tabs[data-tabs="prize"] .tab {
    width: 100%;
    min-width: 0;
    max-width: none
  }

  .tabs--sm {
    gap: 8px
  }

  .tab img {
    max-width: 100%;
    height: auto
  }

  .prize-table,
  .serial-table {
    font-size: 14px
  }

  .prize-table th,
  .prize-table td {
    padding: 5px
  }

  .tab-panel .table-wrap {
    overflow-x: hidden
  }

  .tab-panel .serial-table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed
  }

  .tab-panel .serial-table th,
  .tab-panel .serial-table td {
    width: 20%;
    overflow-wrap: anywhere
  }

  .frame2 .table-wrap {
    overflow-x: hidden
  }

  .frame2 .prize-table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed
  }

  .frame2 .prize-table th,
  .frame2 .prize-table td {
    width: auto !important;
    white-space: normal;
    overflow-wrap: anywhere
  }

  #prize-light .prize-table th:first-child,
  #prize-light .prize-table td:first-child {
    width: 30% !important
  }

  #prize-light .prize-table th:last-child,
  #prize-light .prize-table td:last-child {
    width: 70% !important
  }

  #prize-collect .prize-table th:nth-child(1),
  #prize-collect .prize-table td:nth-child(1) {
    width: 18% !important
  }

  #prize-collect .prize-table th:nth-child(2),
  #prize-collect .prize-table td:nth-child(2) {
    width: 27% !important
  }

  #prize-collect .prize-table th:nth-child(3),
  #prize-collect .prize-table td:nth-child(3) {
    width: 40% !important
  }

  #prize-collect .prize-table th:nth-child(4),
  #prize-collect .prize-table td:nth-child(4) {
    width: 15% !important
  }

  .serial-table th {
    font-size: 14px;
    padding: 5px 4px
  }

  .serial-table td {
    padding: 2px 4px
  }

  .notice {
    max-width: none
  }

  .notice li {
    padding-left: 28px;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: .04em
  }

  .footer {
    padding: 24px 14px 48px
  }

  .footer__logos {
    width: min(292px, 90vw)
  }

  .footer__text {
    font-size: 11px
  }
}

@media (max-width:450px) {
  #serial-collect .table-wrap {
    max-height: 240px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .gnav__list a {
    font-size: 20px;
    letter-spacing: .04em;
  }

  .frmbx .frmbx__desktop {
    display: none;
  }

  .frmbx .frmbx__mobile {
    display: block;
  }

  .contbx {
    background-image: url("../images/title/minbg_02.png");
  }

  .frame2 {
    background-image: url("../images/title/mbac2_02.png");
  }

  .stats .stat img {
    width: 70%;
    max-width: 70%;
    height: auto;
  }

  .tabs--sm {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px
  }

  .tabs--sm .tab {
    width: 100%;
    min-width: 0;
    max-width: none
  }

  .tabs--sm .tab:last-child {
    grid-column: 1 / -1;
    width: calc((100% - 8px) / 2);
    justify-self: center
  }

  .draw-btns {
    flex-wrap: nowrap;
    gap: 6px
  }

  .draw-btns .img-btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: none
  }

  .hero__links {
    left: 8px;
    right: 8px;

    top: auto;

    gap: 2px;
    padding: 0;
    line-height: 1;
  }

  .hero__slogan--3 {
    top: clamp(350px, 30.77vw, 236px);
    width: clamp(80%, 31.3vw, 240px);
  }

  .hero__slogan--1 {
    top: clamp(156px, 11.47vw, 88px);
    width: clamp(40%, 32.6vw, 250px);
  }

  .hero__slogan--2 {
    top: clamp(292px, 22.69vw, 182px);
    width: clamp(80%, 35.2vw, 270px);
  }
}

@media (max-width:420px) {


  .hero__logo {
    width: 150px;
    height: auto
  }



  .hero__links a:not(.hero__fb) {
    font-size: 11px;
    padding-right: 5px;
    padding-left: 5px
  }

  .hero__links a:not(.hero__fb)+a:not(.hero__fb) {
    padding-left: 7px
  }

  .gnav__list a {
    font-size: 15px
  }

  .gnav__list li+li::before {
    margin: 0 4px
  }

  .container {
    padding-right: 8px;
    padding-left: 8px
  }

  .frame {
    padding-right: 14px;
    padding-left: 14px
  }

  .remain {
    font-size: 18px
  }

  .draw-btns .img-btn {
    flex-basis: 0;
    min-width: 0;
    max-width: none
  }

  .remain b {
    font-size: 28px
  }
}

/* ---------- 抽獎結果表格：手機維持桌機五欄排列 ---------- */
@media (max-width:1100px) {
  .draw-result__table-wrap {
    overflow: visible;
  }

  .draw-result__table {
    display: table;
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    font-size: clamp(10px, 1.55vw, 15px);
  }

  .draw-result__table thead {
    display: table-header-group;
  }

  .draw-result__table tbody {
    display: table-row-group;
  }

  .draw-result__table tr {
    display: table-row;
    padding: 0;
    border-bottom: 0;
  }

  .draw-result__table th,
  .draw-result__table td {
    display: table-cell;
    width: auto !important;
    min-height: 0;
    height: auto;
    padding: clamp(4px, .8vw, 8px) clamp(2px, .5vw, 6px);
    text-align: center;
    overflow-wrap: anywhere;
  }

  .draw-result__table td::before {
    content: none !important;
  }

  .draw-result__word {
    width: clamp(28px, 4.2vw, 48px);
    height: clamp(28px, 4.2vw, 48px);
  }
}