@charset "UTF-8";
:root { --yellow:#f5c34a; --green:#17664f; --green-dark:#0d493d; --blue:#234f9b; --blue-dark:#17366d; --orange:#d96e22; --white:#fff8e8; --shadow:0 8px 0 rgba(113,65,13,.22),0 15px 28px rgba(92,54,13,.2); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--white); font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif; background:var(--yellow); overflow-x:hidden; line-height:1.5; }
.page { max-width:900px; margin:0 auto; background:linear-gradient(#f9d86a,#e9ad32 72%,#f5c34a); }
.hero { position:relative; width:100vw; min-height:465px; margin-left:calc(50% - 50vw); overflow:hidden; isolation:isolate; background:radial-gradient(circle at 70% 22%,rgba(255,224,114,.5),transparent 12%),linear-gradient(160deg,#1b3f7b 0%,#1d6682 44%,#277052 100%); border-bottom:10px solid #d8ae4b; box-shadow:0 15px 30px rgba(36,22,82,.34); }
.hero-art { position:absolute; inset:0; z-index:0; display:block; }
.hero-art img { width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-art img[hidden] { display:none; }
.hero.has-image::before, .hero.has-image::after { display:none; }
.hero.has-image .hero-copy, .hero.has-image .moon, .hero.has-image .sparkles, .hero.has-image .hero-bag { display:none; }
.hero.has-image { min-height:0; aspect-ratio:1440 / 600; background:#1b1d59; border-bottom:10px solid transparent; border-image:linear-gradient(90deg,#5f458a,#f2cc68 50%,#5f458a) 1; }
.hero:before { content:""; position:absolute; z-index:-1; width:720px; height:320px; left:-70px; bottom:-110px; border-radius:50% 50% 0 0; background:linear-gradient(155deg,#0d4e42,#17664f 55%,#7d9b4c); transform:rotate(-7deg); box-shadow:0 -12px 0 rgba(255,245,190,.2); }
.hero:after { content:""; position:absolute; inset:0; z-index:-1; background-image:radial-gradient(circle,rgba(255,255,255,.7) 0 3px,transparent 4px); background-size:95px 83px; opacity:.14; transform:rotate(12deg); }
.sparkles { position:absolute; inset:0; pointer-events:none; } .sparkles span { position:absolute; color:#fff08b; font-size:28px; text-shadow:0 2px #e38b00; animation:float 3s ease-in-out infinite; } .sparkles span:nth-child(1){top:80px;left:9%}.sparkles span:nth-child(2){top:150px;right:11%;animation-delay:.8s}.sparkles span:nth-child(3){bottom:92px;left:15%;animation-delay:1.4s}.sparkles span:nth-child(4){top:42px;right:31%;font-size:18px;animation-delay:.3s}
@keyframes float { 50% { transform:translateY(-8px) rotate(12deg); } }
.moon { position:absolute; top:38px; right:8%; width:145px; height:145px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fffbd0,#ffd751 57%,#ef9300); box-shadow:0 0 0 8px rgba(255,236,114,.18),0 0 55px #ffe976; } .moon:before { content:""; position:absolute; width:28px; height:17px; border-radius:50%; background:rgba(207,143,25,.18); top:34px; left:45px; box-shadow:40px 42px 0 8px rgba(207,143,25,.14),-18px 55px 0 4px rgba(207,143,25,.14); }
.hero-copy { position:relative; z-index:1; padding:93px 9% 62px; text-align:center; } .event-kicker { display:inline-block; font-weight:900; font-size:clamp(16px,2.7vw,24px); text-shadow:0 3px #096630; transform:rotate(-3deg); } h1 { margin:8px 0 17px; font-size:clamp(36px,7.2vw,70px); line-height:1.02; letter-spacing:.05em; font-weight:1000; text-wrap:balance; text-shadow:0 5px #057344,0 9px #064e92,3px 7px 13px rgba(0,0,0,.28); } h1 em { display:block; color:#ffd129; font-style:normal; -webkit-text-stroke:2px #fff; text-shadow:0 5px #ef6f00,0 9px #0752a3,3px 7px 12px rgba(0,0,0,.26); } .hero-subtitle { margin:0 auto; max-width:570px; font-size:clamp(16px,2.2vw,20px); font-weight:800; line-height:1.7; text-wrap:balance; text-shadow:0 2px rgba(0,75,75,.45); }
.hero-bag { position:absolute; z-index:2; right:8%; bottom:29px; width:118px; height:126px; transform:rotate(7deg); filter:drop-shadow(0 9px 5px rgba(0,0,0,.24)); } .hero-bag:before { content:""; position:absolute; inset:19px 2px 0; border-radius:18px 18px 26px 26px; background:linear-gradient(135deg,#b9472f,#702437); border:5px solid #e8b83f; } .hero-bag:after { content:"滿月\A 禮包"; white-space:pre; position:absolute; inset:43px 18px auto; text-align:center; color:#ffe69a; font-weight:1000; font-size:21px; line-height:1.08; text-shadow:0 2px #6f2a2a; }
.content { padding:38px 28px 55px; } .section { position:relative; margin:28px auto 42px; padding:45px 28px 30px; max-width:760px; background:repeating-radial-gradient(ellipse at 10% 20%,rgba(255,242,188,.07) 0 3px,transparent 4px 52px),linear-gradient(145deg,#1d7458,var(--green)); border:4px solid #fff3c9; border-radius:18px; box-shadow:var(--shadow); } .section + .section { margin-top:70px; }
.section-title { position:absolute; top:0; left:50%; transform:translate(-50%,-100%); min-width:250px; padding:6px 32px 7px; text-align:center; font-size:clamp(18px,3.5vw,26px); line-height:1.25; font-weight:bold; letter-spacing:.08em; background:linear-gradient(#1476d3,var(--blue)); border:3px solid #fff; border-radius:99px; box-shadow:0 4px var(--blue-dark),0 5px #fff28c; white-space:nowrap; }
.date-box { padding:19px 16px; text-align:center; font-size:clamp(12px,2.8vw,27px); font-weight:1000; letter-spacing:-.02em; line-height:1.45; white-space:nowrap; text-shadow:0 3px var(--green-dark); } .date-box small { display:block; margin-top:8px; color:#ddffae; font-size:clamp(13px,1.7vw,16px); font-weight:700; line-height:1.5; white-space:normal; text-shadow:none; }
.intro { margin:0; font-size:clamp(16px,1.9vw,19px); line-height:1.9; font-weight:700; } .intro strong { color:#ffe19a; } .method-banner { margin:22px 0 38px; padding:9px 14px; text-align:center; font-size:clamp(16px,2.3vw,21px); line-height:1.4; font-weight:bold; background:linear-gradient(#d8892a,#b6531f); border:3px solid #fff3c9; border-radius:99px; box-shadow:0 3px #873c1d; }
.steps { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } .step { position:relative; padding:42px 17px 17px; background:rgba(0,93,53,.32); border-radius:14px; border:2px solid rgba(255,255,255,.24); } .step h3 { position:absolute; top:0; left:-2px; transform:translateY(-50%); display:inline-block; margin:0; padding:4px 24px; font-size:clamp(16px,2vw,19px); line-height:1.35; background:var(--orange); border:2px solid #fff; border-radius:99px; } .step p { margin:0; font-size:clamp(15px,1.7vw,17px); line-height:1.8; font-weight:700; }
.progress { margin:4px 0 25px; padding:13px 18px; background:rgba(0,73,42,.35); border-radius:12px; } .progress-line { height:15px; margin-top:9px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.26); } .progress-line span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ffe768,#ff8f00); } .progress-label { display:flex; justify-content:space-between; gap:12px; font-weight:900; }
.reward-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .reward { min-height:150px; padding:12px 10px 10px; color:var(--green-dark); text-align:center; background:#fffef5; border:3px solid #d7a800; border-radius:10px; box-shadow:0 4px rgba(126,79,0,.28); } .reward:first-child { grid-column:1 / -1; width:100%; display:grid; grid-template-columns:minmax(180px,280px) 1fr; grid-template-rows:auto auto; align-items:center; gap:4px 22px; padding:16px 22px; text-align:left; background:linear-gradient(110deg,#fffef5 0%,#fff8c8 48%,#ffe77e 100%); border-color:#f0bd19; } .reward:first-child .reward-art { grid-row:1 / span 2; height:122px; margin:0; } .reward-art { display:grid; place-items:center; height:88px; margin-bottom:8px; overflow:hidden; border:2px solid #cbb34d; border-radius:5px; background:radial-gradient(circle,#fff5a5,#f4ad00 64%,#d97700); color:white; font-size:40px; font-weight:1000; text-shadow:0 3px #b64800; } .reward-art img { width:100%; height:100%; object-fit:contain; background:#fff; } .reward:first-child .reward-art { background:linear-gradient(145deg,#d91d34,#ffd327 45%,#9a1228); font-size:32px; } .reward-name { font-weight:1000; line-height:1.4; font-size:clamp(14px,1.7vw,16px); } .reward:first-child .reward-name { color:#c92c14; font-size:clamp(19px,2.6vw,28px); line-height:1.3; } .reward-value { margin-top:3px; color:#e56b00; font-size:clamp(13px,1.5vw,15px); font-weight:900; } .reward:first-child .reward-value { font-size:clamp(16px,2.1vw,23px); }
.notice { display:grid; grid-template-columns:135px 1fr; max-width:760px; margin:0 auto; color:#3c2d0c; background:#fff4ba; box-shadow:0 6px rgba(166,100,0,.22); } .notice-title { display:grid; place-items:center; padding:17px; color:white; font-size:19px; font-weight:1000; background:linear-gradient(#145fd0,#07368f); } .notice p { margin:0; padding:17px 22px; font-weight:800; line-height:1.8; }
.site-footer { background:#161622; color:#fff; text-align:center; }
.footer-rating { display:flex; justify-content:center; align-items:center; gap:20px; padding:28px 20px; }
.rating-logo { width:64px; height:auto; }
.footer-rating p { margin:0; font-size:.95rem; line-height:1.65; text-align:left; }
.copyright { padding:24px 16px; background:#ff7a18; font-size:13px; font-weight:700; }
@media (max-width:620px) { .hero{min-height:420px}.hero.has-image{aspect-ratio:1}.hero-copy{padding:82px 18px 66px}.moon{width:88px;height:88px;top:28px;right:7%}.hero-bag{right:5%;bottom:19px;transform:scale(.75) rotate(7deg);transform-origin:bottom right}.content{padding:35px 13px 45px}.section{padding:39px 15px 22px;margin-bottom:37px}.section-title{min-width:210px;padding:5px 20px 6px;font-size:19px}.steps{grid-template-columns:1fr;gap:10px}.reward-grid{grid-template-columns:repeat(3,1fr);gap:8px}.step{padding:38px 12px 12px}.step h3{top:0;left:9px;font-size:15px;padding:3px 11px}.step p{font-size:16px;line-height:1.75}.reward{min-height:137px;padding:8px 6px}.reward:first-child{width:100%; grid-template-columns:110px 1fr; gap:3px 12px; padding:12px}.reward:first-child .reward-art{height:82px}.reward:first-child .reward-name{font-size:17px}.reward:first-child .reward-value{font-size:15px}.reward-art{height:72px;font-size:30px}.reward-name{font-size:14px}.notice{grid-template-columns:100px 1fr}.notice-title{padding:12px 6px;font-size:16px}.notice p{padding:12px;font-size:14px}.footer-rating{flex-direction:column;gap:12px}.footer-rating p{text-align:center;font-size:13px}.copyright{font-size:12px} }

@media (min-width:621px) {
  .intro { text-align:center; }
  .desktop-break { display:block; }
  .desktop-synthesis { white-space:nowrap; }
  .page { max-width:1000px; }
  .section, .notice { max-width:900px; }
  .hero-copy { padding-top:60px; }
  .content { padding-top:22px; }
  .section:first-child { margin-top:42px; }
}

@media (max-width:420px) {
  .hero-copy { padding-inline:14px; }
  h1 { font-size:clamp(34px,10.5vw,44px); letter-spacing:.03em; }
  .hero-subtitle { font-size:16px; }
  .date-box { padding-inline:4px; font-size:16px; transform:scaleX(.88); transform-origin:center; }
  .section-title { font-size:20px; }
  .progress-label { font-size:14px; }
  .reward-name { font-size:13px; }
}

@media (max-width:620px) {
  .reward-grid .reward:not(.iphone-feature) .reward-name { min-height:2.5em; white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
  .reward-grid .reward:not(.iphone-feature) { min-height:125px; }
}

.coin-reward .reward-name { font-size:clamp(16px, 2vw, 20px); }
.coin-label { display:inline-block; font-size:.84em; white-space:nowrap; }
.item-reward .reward-name { font-size:clamp(16px, 2vw, 20px); }
.intro-highlight, .intro-highlight-number, .intro-highlight-package, .cta-highlight { color:#ffe18a; font-weight:1000; text-shadow:0 2px #21153f; }
.intro-highlight-number, .cta-highlight { display:inline-block; font-size:1.18em; line-height:1; }
.desktop-break { display:none; }
.desktop-synthesis { white-space:normal; }
.cta-highlight { font-weight:bold; }
@media (max-width:620px) {
  .coin-reward .reward-name { font-size:15px; }
  .item-reward .reward-name { font-size:15px; }
}

@media (max-width:620px) {
  .content { padding-top:20px; }
  .section:first-child { margin-top:10px; }
  .section:first-child { padding-top:30px; padding-bottom:12px; }
  .section:first-child .date-box { padding-top:8px; padding-bottom:8px; }
}

/* Moonlit autumn palette, using the supplied festival illustration as the page backdrop. */
body { background: #171b4b url("../images/moonlit-background.png") center top / cover fixed no-repeat; }
.page { background: transparent; }
.content { background: linear-gradient(180deg, rgba(14,18,64,.18), rgba(18,14,55,.42)); }
.section { background: linear-gradient(145deg, rgba(26,57,111,.94), rgba(37,34,99,.94)); border-color: #f8d987; box-shadow: 0 8px 0 rgba(48,25,68,.28), 0 15px 28px rgba(14,13,54,.32); }
.section-title { background: linear-gradient(180deg, #d8a83e, #9a5428); border-color: #fff1bf; box-shadow: 0 4px #633a37, 0 5px #fff0ae; text-shadow: 0 2px #68402f; }
.date-box { text-shadow: 0 3px #3a2c71; }
.intro strong { color: #ffe4a2; }
.method-banner { background: linear-gradient(#dcae4a, #ae5b2d); border-color: #fff1bf; box-shadow: 0 3px #633a37; }
.step { background: rgba(9,31,78,.38); border-color: rgba(255,224,153,.38); }
.step h3 { background: linear-gradient(#d69a35, #9b4e2c); border-color: #fff1bf; }
.reward { background: #fff9e8; border-color: #e2b84c; }
.reward-name { color: #173b6b; }
.reward:first-child { background: linear-gradient(110deg, #fff9e8 0%, #fff0b1 48%, #e7b84d 100%); border-color: #f2cc62; }
.notice { background: rgba(255,244,198,.96); box-shadow: 0 6px rgba(37,23,72,.3); }
.notice-title { margin:0; height:100%; align-self:stretch; background: linear-gradient(#274c9d, #172c68); }
.notice-copy { padding:17px 22px; }
.notice-copy p { margin:0; padding:0; font-weight:700; line-height:1.8; }
.notice-copy p + p { margin-top:14px; }
.notice { display:block; }
.notice-title { width:100%; min-width:0; height:auto; margin:0; padding:10px 24px; }
.site-footer { background: #111435; }
.copyright { background: linear-gradient(180deg, #4b327c 0%, #24174f 100%); }

/* The supplied card artwork already contains its own border. */
.reward-art.image-art { height:auto; aspect-ratio:350 / 230; overflow:visible; border:0; padding:0; background:transparent; }
.reward-art.image-art img { display:block; width:100%; height:auto; max-height:none; aspect-ratio:350 / 230; object-fit:contain; border:0; background:transparent; }
.mobile-break { display:none; }
.reward:first-child .reward-art.image-art { height:auto; }
@media (max-width:620px) {
  .steps .step { display:flex; align-items:center; min-height:132px; padding-top:26px; }
  .steps .step p { width:100%; text-align:left; }
  .steps .step h3 { padding-left:18px; padding-right:18px; }
  .steps .step h3 { left:-2px; }
  .steps { row-gap:28px; }
  .notice p br { display:none; }
  .mobile-break { display:block; }
  .reward-art.image-art { height:auto; aspect-ratio:350 / 230; }
  .reward:first-child .reward-art.image-art { height:auto; }
}

.iphone-feature { grid-template-columns:minmax(180px,320px) 1fr; grid-template-rows:1fr; align-items:center; }
.reward.iphone-feature { background:#fff; border-color:#d2d2d7; box-shadow:0 4px 12px rgba(0,0,0,.12); }
.iphone-feature .reward-art.image-art { height:260px; aspect-ratio:auto; overflow:hidden; padding:16px; background:#f2f2f2; border-radius:8px; }
.iphone-feature .reward-art.image-art img { width:100%; height:100%; object-fit:contain; }
.iphone-feature .reward-art { grid-row:1; }
.iphone-copy { display:grid; align-content:center; align-self:stretch; gap:8px; padding-top:14px; }
.iphone-name-line { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.iphone-badge { width:max-content; padding:4px 14px; color:#fff; font-size:14px; font-weight:1000; background:#1d1d1f; border:2px solid #1d1d1f; border-radius:99px; }
.iphone-feature .reward-name { color:#1d1d1f; }
.reward.iphone-feature .reward-name { color:#1d1d1f; }
.iphone-color { margin:0; color:#1d1d1f; font-size:16px; font-weight:bold; letter-spacing:.04em; }
.iphone-color strong { font-weight:bold; }
.iphone-capacity { margin:0; color:#1d1d1f; font-size:17px; font-weight:700; letter-spacing:.02em; }
.iphone-capacity strong { font-weight:1000; }
.iphone-capacity-unit { font-size:.78em; font-weight:700; }
.iphone-swatches { display:flex; align-items:center; gap:12px; margin:8px 0 5px; }
.swatch { width:30px; height:30px; padding:0; cursor:pointer; border:1px solid rgba(67,67,67,.28); border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .2s ease, box-shadow .2s ease; }
.swatch:hover { transform:translateY(-2px); }
.swatch[aria-pressed="true"] { border:2px solid #1674d1; box-shadow:0 0 0 2px #fff, 0 0 0 4px #1674d1; }
.swatch:nth-child(1) { background:#d9c8e8; }
.swatch:nth-child(2) { background:#afc29a; }
.swatch:nth-child(3) { background:#8eb4dc; }
.swatch:nth-child(4) { background:#f5f5f3; }
.swatch:nth-child(5) { background:#3f4548; }
.iphone-link { width:max-content; margin-top:4px; color:#06c; font-size:14px; font-weight:900; text-decoration:underline; }
@media (max-width:620px) {
  .iphone-feature { grid-template-columns:110px 1fr; gap:3px 12px; padding:12px; }
  .iphone-feature .reward-art.image-art { height:190px; padding:10px; }
  .iphone-copy { gap:5px; padding-top:8px; }
  .iphone-badge { padding:3px 10px; font-size:12px; }
  .iphone-color { font-size:14px; }
  .iphone-capacity { font-size:15px; }
  .iphone-swatches { gap:8px; }
  .swatch { width:23px; height:23px; }
  .iphone-link { font-size:12px; }
}

@media (max-width:620px) {
  .reward.iphone-feature { grid-template-columns:1fr; grid-template-rows:auto auto; gap:12px; }
  .reward.iphone-feature .reward-art { grid-row:1; width:100%; height:270px; }
  .reward.iphone-feature .iphone-copy { grid-column:1; padding:0 8px 6px; }
}

/* Cleaner moon-gold accents for the text UI. */
.section-title { color:#fff5d2; background:linear-gradient(180deg,#68458e 0%,#2d1c5c 100%); border-color:#f4d98a; box-shadow:0 4px #21153f,0 5px #fff0b0; text-shadow:0 2px #21153f; }
.method-banner { color:#fff5d2; background:linear-gradient(180deg,#644184 0%,#301d5e 100%); border-color:#f4d98a; box-shadow:0 3px #21153f; text-shadow:0 2px #21153f; }
.step h3 { background:linear-gradient(180deg,#74509a 0%,#382265 100%); border-color:#f4d98a; color:#fff5d2; }

body { position:relative; isolation:isolate; background:#171b4b; }
body::before { content:""; position:fixed; z-index:-1; inset:-12px; background:url("../images/moonlit-background.png") center top / cover no-repeat; filter:blur(3px); transform:scale(1.03); }

.synthesis-flow { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:18px; align-items:center; margin:26px auto 4px; max-width:680px; }
.synthesis-card { min-width:0; }
.synthesis-card img { display:block; width:100%; aspect-ratio:350 / 230; object-fit:contain; border:2px solid #d5a947; border-radius:8px; background:#32166c; box-shadow:0 5px 12px rgba(21,8,54,.3); }
.synthesis-arrow { color:#f6d883; font-size:42px; font-weight:1000; text-shadow:0 3px #25164f; }
@media (max-width:620px) {
  .synthesis-flow { grid-template-columns:1fr; gap:8px; margin-top:22px; }
  .synthesis-card { width:min(100%,350px); margin:auto; }
  .synthesis-arrow { display:block; min-height:32px; color:#ffe18a; font-size:32px; line-height:1; text-align:center; visibility:visible; opacity:1; transform:rotate(90deg); }
}

@media (min-width:621px) {
  .desktop-break { display:block; }
  .desktop-synthesis { white-space:nowrap; }
}