@charset "UTF-8";
:root {
  --ink: #242424;
  --line: #bcbcbc;
  --light: #f4f4f4;
  --paper: #fff;
  --max: 1100px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #e5e5e5;
  color: var(--ink);
  font-family: Arial, "Noto Sans TC", sans-serif;
  line-height: 1.5;
}

button {
  font: inherit;
  cursor: pointer;
}

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

.site {
  max-width: 1440px;
  margin: auto;
  background: white;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.0666666667);
}

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

.section {
  --section-padding-block: 2.5rem;
  --section-padding-inline: 0.625rem;
  padding: var(--section-padding-block) var(--section-padding-inline);
  border-bottom: 1px solid #ddd;
}
@media (min-width: 351px) {
  .section {
    --section-padding-inline: 1rem;
  }
}
@media (min-width: 768px) {
  .section {
    --section-padding-block: 4rem;
    --section-padding-inline: 2rem;
  }
}
.section-title {
  position: relative;
  z-index: 4;
  margin: 0 0 1.5625rem;
}
.section-title img {
  width: 100%;
  max-width: 35rem;
  height: auto;
  margin-inline: auto;
}
.section-title-desktop {
  display: none;
}
@media (min-width: 768px) {
  .section-title-mobile {
    display: none;
  }
  .section-title-desktop {
    display: block;
  }
}

.container {
  max-width: var(--max);
  margin: auto;
}

.activity-rules-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: -moz-fit-content;
  width: fit-content;
  min-height: 2.75rem;
  margin: 1.25rem auto 0;
  padding: 0.5rem 0.75rem;
  color: #fff1d2;
  font-size: 0.875rem;
  text-decoration: underline;
  text-decoration-color: #dba33f;
  text-underline-offset: 0.25em;
}
.activity-rules-link::after {
  content: "›";
  color: #dba33f;
  font-size: 1.25rem;
  line-height: 1;
}
.activity-rules-link:hover {
  color: #dba33f;
}
.activity-rules-link:focus-visible {
  outline: 2px solid #dba33f;
  outline-offset: 3px;
  border-radius: 0.25rem;
}

.btn {
  display: block;
  border: 2px solid #555;
  border-radius: 100px;
  padding: 0.8125rem 1.5625rem;
  min-height: 48px;
  background: #333;
  color: white;
  text-align: center;
  max-width: 320px;
  width: 100%;
  margin: 0 auto;
}
.btn:focus-visible {
  outline: 3px solid #888;
  outline-offset: 3px;
}

summary:focus-visible {
  outline: 3px solid #888;
  outline-offset: 3px;
}

.curtain-intro {
  position: fixed;
  z-index: 2000;
  inset: 0;
  overflow: hidden;
  background: #100905;
  pointer-events: none;
  transition: background-color 0.5s ease;
}
.curtain-intro[hidden] {
  display: none;
}
.curtain-intro-left, .curtain-intro-right {
  position: absolute;
  top: 0;
  width: calc(50% + 1px);
  height: 100%;
  max-width: none;
  -o-object-fit: cover;
     object-fit: cover;
}
.curtain-intro-left {
  left: 0;
  -o-object-position: right center;
     object-position: right center;
}
.curtain-intro-right {
  right: 0;
  -o-object-position: left center;
     object-position: left center;
}
.curtain-intro-top {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  max-width: none;
  height: auto;
}
.curtain-intro.is-opening {
  background-color: transparent;
}
.curtain-intro.is-opening .curtain-intro-left {
  animation: curtain-open-left 1.7s cubic-bezier(0.45, 0, 0.2, 1) 0.25s both;
}
.curtain-intro.is-opening .curtain-intro-right {
  animation: curtain-open-right 1.7s cubic-bezier(0.45, 0, 0.2, 1) 0.25s both;
}
.curtain-intro.is-opening .curtain-intro-top {
  animation: curtain-open-top 1s ease-in-out 0.85s both;
}
@media (prefers-reduced-motion: reduce) {
  .curtain-intro {
    display: none;
  }
}

@keyframes curtain-open-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-102%);
  }
}
@keyframes curtain-open-right {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(102%);
  }
}
@keyframes curtain-open-top {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-105%);
  }
}
.page-content .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 0;
  aspect-ratio: 500/855;
  background: #090503;
  color: #fff;
}
.page-content .hero-stage {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/content/BG-hero.png") center top/100% 100% no-repeat;
}
.page-content .hero-container {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1200px;
  min-height: 0;
  margin: auto;
  padding: 23% 5% 15%;
}
.page-content .hero-assembly {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  width: 100%;
  max-width: 500px;
}
.page-content .hero-trophy {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1/-1;
  grid-row: 1;
  justify-self: center;
  width: 75%;
  text-align: center;
}
.page-content .hero-trophy img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
}
.page-content .hero-particles {
  position: absolute;
  z-index: 0;
  top: -25%;
  left: -50%;
  display: block;
  width: 200%;
  height: 140%;
  max-width: none;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .page-content .hero-particles {
    display: none;
  }
}
.page-content .hero-foreground-particles {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .page-content .hero-foreground-particles {
    display: none;
  }
}
.page-content .hero-offer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
}
.page-content .hero-offer img {
  display: block;
  width: 100%;
  height: auto;
  animation: hero-offer-float 4.8s ease-in-out infinite, hero-offer-glow 3.6s ease-in-out infinite;
}
.page-content .hero-offer--right img {
  animation-delay: -2.4s, -1.8s;
}
@media (prefers-reduced-motion: reduce) {
  .page-content .hero-offer img {
    animation: none;
    filter: drop-shadow(0 0 0.375rem rgba(219, 163, 63, 0.25));
  }
}
.page-content .hero-scroll {
  position: absolute;
  z-index: 2;
  bottom: 0.75rem;
  left: 50%;
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  transform: translateX(-50%);
  border-radius: 50%;
}
.page-content .hero-scroll::before, .page-content .hero-scroll::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 50%;
  width: 0.875rem;
  height: 0.875rem;
  margin-left: -0.4375rem;
  border-right: 2px solid #dba33f;
  border-bottom: 2px solid #dba33f;
  -o-border-image: linear-gradient(135deg, #8e4b06 0%, #d49124 18%, #fff2bb 37%, #f2c361 48%, #ad650c 62%, #ffe5a1 80%, #a7640b 100%) 1;
     border-image: linear-gradient(135deg, #8e4b06 0%, #d49124 18%, #fff2bb 37%, #f2c361 48%, #ad650c 62%, #ffe5a1 80%, #a7640b 100%) 1;
  filter: drop-shadow(0 0 0.25rem rgba(219, 163, 63, 0.6));
  transform: rotate(45deg);
  animation: hero-scroll-cue 1.8s ease-in-out infinite;
}
.page-content .hero-scroll::after {
  top: 1rem;
  animation-delay: 0.15s;
}
.page-content .hero-scroll:focus-visible {
  outline: 2px solid #fff1d2;
  outline-offset: 0.25rem;
}
@media (prefers-reduced-motion: reduce) {
  .page-content .hero-scroll::before, .page-content .hero-scroll::after {
    animation: none;
  }
}
@media (min-width: 768px) {
  .page-content .hero {
    --hero-height: calc(var(--viewport-height, 100vh) * 4 / 5);
    height: var(--hero-height);
    aspect-ratio: auto;
  }
  .page-content .hero-stage {
    background-image: url("../images/content/BG-hero-pc.png");
    background-size: cover;
    background-position: center top;
  }
  .page-content .hero-scroll {
    bottom: 1.5rem;
  }
  .page-content .hero-container {
    inset: 16% 5% 5rem;
    max-width: none;
    padding: 0;
    justify-content: center;
  }
  .page-content .hero-assembly {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr) minmax(0, 1fr);
    width: min(100%, max(0px, (var(--hero-height) * 0.84 - 5rem) * 1.8));
    max-width: 1060px;
    gap: clamp(0.625rem, 2vh, 1.5625rem);
  }
  .page-content .hero-trophy {
    grid-column: 2;
    width: 100%;
    max-width: 410px;
  }
  .page-content .hero-offer {
    margin-bottom: -5rem;
  }
  .page-content .hero-offer--left {
    grid-column: 1;
    grid-row: 1;
  }
  .page-content .hero-offer--right {
    grid-column: 3;
    grid-row: 1;
  }
}

@keyframes hero-offer-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.5rem);
  }
}
@keyframes hero-offer-glow {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 0.125rem rgba(255, 241, 210, 0.2)) drop-shadow(0 0 0.375rem rgba(219, 163, 63, 0.25));
  }
  50% {
    filter: brightness(1.04) drop-shadow(0 0 0.1875rem rgba(255, 241, 210, 0.5)) drop-shadow(0 0 0.75rem rgba(219, 163, 63, 0.5));
  }
}
@keyframes hero-scroll-cue {
  0%, 100% {
    opacity: 0.5;
    transform: translateY(0) rotate(45deg);
  }
  50% {
    opacity: 1;
    transform: translateY(0.375rem) rotate(45deg);
  }
}
.coupon {
  background: #f3f3f3;
  border: 2px dashed #999;
  outline: 1px solid #ddd;
  outline-offset: -9px;
  padding: 1.75rem 0.875rem;
  text-align: center;
}
.coupon-layout {
  display: grid;
  gap: 22px;
  align-items: center;
  max-width: 720px;
  margin: auto;
}
.coupon small {
  display: block;
}
.coupon strong {
  display: block;
  font-size: clamp(38px, 9vw, 68px);
  line-height: 1.2;
}
.coupon-code {
  display: inline-block;
  border: 1px solid #aaa;
  padding: 0.4375rem 0.875rem;
  margin-top: 14px;
  background: white;
  font-weight: 700;
}

@media (min-width: 768px) {
  .coupon-layout {
    grid-template-columns: 1fr;
    max-width: 570px;
  }
}
.page-content .coupon-layout {
  width: 100%;
  max-width: 800px;
  gap: 0;
}
.page-content .coupon-image {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
}
.page-content .coupon-image img {
  width: 100%;
  height: auto;
}
.page-content .coupon-image:focus-visible {
  outline: 3px solid #ad772a;
  outline-offset: 4px;
}

.page-content .coupon-section {
  position: relative;
  isolation: isolate;
  border-bottom: 0;
  background: #360303 url("../images/content/BG-coupon.png") center/cover no-repeat;
  overflow: hidden;
}
.page-content .coupon-section::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  height: clamp(4rem, 20vw, 7rem);
  background: linear-gradient(to bottom, #100905 0%, rgba(16, 9, 5, 0.85) 25%, rgba(16, 9, 5, 0) 100%);
  opacity: var(--coupon-mask-opacity, 1);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .page-content .coupon-section::before {
    opacity: 0;
  }
}
.page-content .coupon-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url("../images/content/coupon-mask.png") center/cover no-repeat;
  opacity: var(--coupon-mask-opacity, 1);
  transform: scale(var(--coupon-mask-scale, 1));
  transform-origin: center;
  will-change: transform, opacity;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .page-content .coupon-section::after {
    opacity: 0;
    transform: none;
    will-change: auto;
  }
}
.page-content .coupon-section .coupon-layout {
  position: relative;
  z-index: 1;
  padding-top: 4rem;
}
.page-content .coupon-section .coupon-image {
  --coupon-image-bleed: var(--section-padding-inline);
  width: calc(100% + var(--coupon-image-bleed) * 2);
  max-width: none;
  margin-inline: calc(-1 * var(--coupon-image-bleed));
}
.page-content .coupon-section .coupon-image picture {
  display: block;
}
.page-content .coupon-section .coupon-image img {
  aspect-ratio: 1786/1835;
  animation: coupon-float 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .page-content .coupon-section .coupon-image img {
    animation: none;
  }
}
.page-content .coupon-section .coupon-copy {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 64%;
  min-height: 44px;
  margin: -10rem auto 0;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(#3d2b0e, #130b02) padding-box, linear-gradient(135deg, #8e4b06 0%, #d49124 18%, #fff2bb 37%, #f2c361 48%, #ad650c 62%, #ffe5a1 80%, #a7640b 100%) border-box;
  box-shadow: inset 0 0 0 3px #241704, 0 0 8px rgba(219, 163, 63, 0.4);
  color: #fff1d2;
  font-family: "Cactus Classical Serif", "Noto Sans TC", serif;
  font-size: clamp(16px, 4.6vw, 22px);
  letter-spacing: 0.08em;
}
.page-content .coupon-section .coupon-copy:focus-visible {
  outline: 3px solid #fff1d2;
  outline-offset: 4px;
}
@media (min-width: 768px) {
  .page-content .coupon-section {
    background-color: #100905;
    background-image: url("../images/content/BG-coupon-pc.png");
    overflow: visible;
  }
  .page-content .coupon-section::before, .page-content .coupon-section::after {
    content: none;
  }
  .page-content .coupon-section .coupon-layout {
    padding-top: 0;
  }
  .page-content .coupon-section .coupon-image {
    --coupon-image-bleed: 0px;
    width: 100%;
    margin-inline: 0;
  }
  .page-content .coupon-section .coupon-image picture {
    display: inline;
  }
  .page-content .coupon-section .coupon-image img {
    aspect-ratio: auto;
  }
  .page-content .coupon-section .coupon-copy {
    width: 20rem;
    max-width: 100%;
    margin-top: 1.5rem;
  }
}

@keyframes coupon-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.375rem);
  }
}
/* Campaign copy confirmation toast. */
.coupon-toast {
  position: fixed;
  z-index: 1100;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 10px;
  width: -moz-max-content;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 0.875rem 1.375rem;
  border-radius: 12px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, #392411, #100905) padding-box, linear-gradient(135deg, #8e4b06 0%, #d49124 18%, #fff2bb 37%, #f2c361 48%, #ad650c 62%, #ffe5a1 80%, #a7640b 100%) border-box;
  box-shadow: inset 0 0 0 3px rgba(219, 163, 63, 0.1), 0 8px 28px rgba(0, 0, 0, 0.5333333333);
  color: #fff1d2;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.coupon-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.coupon-toast-icon {
  flex-shrink: 0;
  color: #dba33f;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) {
  .coupon-toast-icon {
    background: linear-gradient(135deg, #8e4b06 0%, #d49124 18%, #fff2bb 37%, #f2c361 48%, #ad650c 62%, #ffe5a1 80%, #a7640b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.coupon-toast-icon {
  font-size: 22px;
}
.coupon-toast-message {
  overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: reduce) {
  .coupon-toast {
    transition: none;
  }
}

.products-section {
  border-bottom: 0;
  background: #100905 url("../images/content/BG-products.png") center/cover no-repeat;
}
.products-section .container {
  max-width: 78rem;
}

.products-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.875rem 0.5rem;
}

.products-status {
  margin: 1rem 0;
  color: #fff1d2;
  font-size: 0.875rem;
  text-align: center;
}

.product {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - 0.5rem) / 2);
  min-width: 0;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  background: linear-gradient(150deg, rgb(255, 250.1, 239.25) 0%, #fff1d2 60%, rgb(248.52, 226.96, 183.54) 100%) padding-box, linear-gradient(135deg, #8e4b06 0%, #d49124 18%, #fff2bb 37%, #f2c361 48%, #ad650c 62%, #ffe5a1 80%, #a7640b 100%) border-box;
  box-shadow: 0 0.375rem 1.25rem rgba(16, 9, 5, 0.35);
  color: #392411;
  text-decoration: none;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.product:nth-child(3n+2) {
  --price-animation-delay: -0.25s;
}
.product:nth-child(3n) {
  --price-animation-delay: -0.5s;
}
.product:link, .product:visited, .product:hover, .product:focus, .product:active {
  text-decoration: none;
}
.product:focus-visible {
  outline: 2px solid #fff1d2;
  outline-offset: 4px;
}
.product:focus-visible, .product:active {
  --product-image-scale: 1.04;
  box-shadow: 0 0 1rem rgba(219, 163, 63, 0.35);
}
@media (hover: hover) and (pointer: fine) {
  .product:hover {
    --product-image-scale: 1.04;
    transform: translateY(-0.25rem);
    box-shadow: 0 0.75rem 1.5rem rgba(16, 9, 5, 0.5), 0 0 1rem rgba(219, 163, 63, 0.3);
  }
}
.product-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3/2;
  flex-shrink: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(219, 163, 63, 0.4);
}
.product-media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(var(--product-image-scale, 1));
  transition: transform 0.4s ease;
}
.product .region {
  align-self: flex-start;
  max-width: 100%;
  padding: 0.1875rem 0.5rem;
  border: 1px solid rgba(219, 163, 63, 0.65);
  border-radius: 999px;
  background: rgba(16, 9, 5, 0.88);
  color: #fff1d2;
  font-size: 0.6875rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.product-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5rem;
  padding: 0.75rem 0.625rem;
}
.product-content h3 {
  margin: 0;
  color: #392411;
  font-family: "Cactus Classical Serif", "Noto Sans TC", serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.product-description {
  margin: 0;
  color: rgba(57, 36, 17, 0.82);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.product-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(151, 70, 19, 0.25);
}
.product-footer .price {
  color: #974613;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: lining-nums tabular-nums;
  animation: product-price-bounce 2.8s ease-in-out infinite;
  animation-delay: var(--price-animation-delay, 0s);
}
.product-action {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #392411;
  font-size: 0.6875rem;
  white-space: nowrap;
}
.product-action::after {
  content: "›";
  color: #974613;
  font-size: 1.125rem;
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  .product .price {
    animation: none;
  }
  .product,
  .product img {
    transition: none;
    transform: none;
  }
}

@keyframes product-price-bounce {
  0%, 12%, 24%, 100% {
    transform: translateY(0);
  }
  6% {
    transform: translateY(-0.25rem);
  }
  18% {
    transform: translateY(-0.125rem);
  }
}
@media (min-width: 351px) {
  .products-grid {
    gap: 1rem 0.625rem;
  }
  .product {
    flex-basis: calc((100% - 0.625rem) / 2);
  }
}
@media (min-width: 768px) {
  .products-grid {
    gap: 1.5rem;
  }
  .product {
    flex-basis: calc((100% - 4.5rem) / 4);
  }
  .product .region {
    font-size: 0.75rem;
  }
  .product-content {
    gap: 0.625rem;
    padding: 1rem;
  }
  .product-content h3 {
    font-size: clamp(1rem, 1.4vw, 1.25rem);
  }
  .product-description {
    font-size: 0.875rem;
  }
  .product-footer {
    padding-top: 1rem;
  }
  .product-footer .price {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
  }
  .product-action {
    font-size: 0.75rem;
  }
}
.prizes-categories {
  position: relative;
  isolation: isolate;
  clip-path: inset(0);
  background: #100905;
}
.prizes-categories::before {
  content: "";
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: 100vh;
  height: 100lvh;
  background: #100905 url("../images/content/BG-category.png") center/cover no-repeat;
  pointer-events: none;
}
.prizes-categories > .section {
  border-bottom: 0;
  background: transparent;
}
@media (min-width: 768px) {
  .prizes-categories::before {
    background-image: url("../images/content/BG-gategory-pc.png");
  }
}

.prize {
  flex: 1;
  min-width: 0;
}
.prize-grid {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
  max-width: 51.25rem;
  margin: auto;
}
.prize img {
  display: block;
  width: 100%;
  height: auto;
}
.prize-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12.5rem;
  border: 1px dashed #aaa;
  background: #f3f3f3;
  color: #777;
  text-align: center;
}

@media (min-width: 768px) {
  .prize-grid {
    flex-direction: row;
    gap: 1.5rem;
  }
}
.category {
  color: inherit;
  text-decoration: none;
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid transparent;
  background: linear-gradient(#100905, #100905) padding-box, linear-gradient(135deg, #8e4b06 0%, #d49124 18%, #fff2bb 37%, #f2c361 48%, #ad650c 62%, #ffe5a1 80%, #a7640b 100%) border-box;
  display: block;
  min-width: 0;
  min-height: 0;
  padding: 0;
  box-shadow: 0 0 1.125rem rgba(219, 163, 63, 0);
  transition: box-shadow 0.25s ease;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-areas: "featured featured featured featured spa spa" "chinese chinese foot foot spa spa" "hair hair hair thai thai thai";
  gap: 0.375rem;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 6/7;
  margin: auto;
}
.category:focus-visible {
  outline: 0.1875rem solid #fff1d2;
  outline-offset: 0.1875rem;
}
.category:focus-visible, .category:active {
  --category-image-scale: 1.05;
  --category-glow: 1;
  box-shadow: 0 0 1.125rem rgba(219, 163, 63, 0.55);
}
@media (hover: hover) and (pointer: fine) {
  .category:hover {
    --category-image-scale: 1.05;
    --category-glow: 1;
    box-shadow: 0 0 1.125rem rgba(219, 163, 63, 0.55);
  }
}
.category img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transform: scale(var(--category-image-scale, 1));
  transition: transform 0.4s ease;
}
.category::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 241, 210, 0.8), inset 0 0 0.75rem rgba(219, 163, 63, 0.5);
  opacity: var(--category-glow, 0);
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.category::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(16, 9, 5, 0.85) 0%, rgba(16, 9, 5, 0.4) 45%, rgba(16, 9, 5, 0) 100%);
  pointer-events: none;
}
.category span {
  position: absolute;
  z-index: 2;
  left: 0.1875rem;
  bottom: 0.1875rem;
  max-width: calc(100% - 0.375rem);
  padding: 0;
  background: none;
  color: #dba33f;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) {
  .category span {
    background: linear-gradient(135deg, #8e4b06 0%, #d49124 18%, #fff2bb 37%, #f2c361 48%, #ad650c 62%, #ffe5a1 80%, #a7640b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.category span {
  font-family: "Cactus Classical Serif", "Noto Sans TC", serif;
  font-size: clamp(1rem, 4.6vw, 1.25rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  paint-order: stroke fill;
  filter: drop-shadow(0 0.0625rem 0.0625rem #100905);
}
.category--featured {
  grid-area: featured;
}
.category--chinese {
  grid-area: chinese;
}
.category--foot {
  grid-area: foot;
}
.category--spa {
  grid-area: spa;
}
.category--hair {
  grid-area: hair;
}
.category--thai {
  grid-area: thai;
}
@media (prefers-reduced-motion: reduce) {
  .category, .category::before,
  .category img {
    transition: none;
  }
  .category img {
    transform: none;
  }
}

@media (min-width: 768px) {
  .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, 200px);
    grid-template-areas: "featured featured spa" "thai chinese spa" "thai hair foot";
    aspect-ratio: auto;
    gap: 10px;
  }
  .category--thai img {
    -o-object-position: 30% center;
       object-position: 30% center;
  }
  .category span {
    font-size: clamp(1.125rem, 1.25vw, 1.5rem);
  }
}
.rules-section {
  border-bottom: 0;
  background: radial-gradient(ellipse at top, #39220d, #100905 65%);
  color: #fff1d2;
}

.rules {
  --rule-animation-duration: 320ms;
  max-width: 55rem;
  margin: auto;
}
.rules details {
  scroll-margin-top: 1.25rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  background: linear-gradient(#100905, #100905) padding-box, linear-gradient(135deg, #8e4b06 0%, #d49124 18%, #fff2bb 37%, #f2c361 48%, #ad650c 62%, #ffe5a1 80%, #a7640b 100%) border-box;
}
.rules details[open] {
  border: 1px solid transparent;
  background: linear-gradient(135deg, #271b10, #100905) padding-box, linear-gradient(135deg, #8e4b06 0%, #d49124 18%, #fff2bb 37%, #f2c361 48%, #ad650c 62%, #ffe5a1 80%, #a7640b 100%) border-box;
}
.rules details[open] summary::after {
  transform: rotate(45deg);
}
@media (min-width: 861px) {
  .rules details {
    scroll-margin-top: 5.625rem;
  }
}
.rules summary {
  position: relative;
  display: block;
  padding: 1rem 3rem 1rem 1rem;
  color: #fff1d2;
  font-family: "Cactus Classical Serif", "Noto Sans TC", serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.rules summary::-webkit-details-marker {
  display: none;
}
.rules summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 1rem;
  margin-top: -0.75rem;
  color: #dba33f;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) {
  .rules summary::after {
    background: linear-gradient(135deg, #8e4b06 0%, #d49124 18%, #fff2bb 37%, #f2c361 48%, #ad650c 62%, #ffe5a1 80%, #a7640b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.rules summary::after {
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  transition: transform var(--rule-animation-duration) ease;
}
.rules summary:hover {
  background: rgba(219, 163, 63, 0.06);
}
.rules summary:focus-visible {
  outline: 2px solid #dba33f;
  outline-offset: -4px;
}
.rules .rule-body {
  padding: 1rem;
  border-top: 1px solid #dba33f;
  -o-border-image: linear-gradient(135deg, #8e4b06 0%, #d49124 18%, #fff2bb 37%, #f2c361 48%, #ad650c 62%, #ffe5a1 80%, #a7640b 100%) 1;
     border-image: linear-gradient(135deg, #8e4b06 0%, #d49124 18%, #fff2bb 37%, #f2c361 48%, #ad650c 62%, #ffe5a1 80%, #a7640b 100%) 1;
  color: #fff1d2;
  font-size: 0.9375rem;
  line-height: 1.9;
  overflow-wrap: anywhere;
}
.rules .rule-body p,
.rules .rule-body ul {
  margin: 0;
}
.rules .rule-body p + p,
.rules .rule-body p + ul,
.rules .rule-body ul + p,
.rules .rule-body ul + ul {
  margin-top: 1.25rem;
}
.rules .rule-body ul {
  padding-inline-start: 1.375rem;
}
.rules .rule-body li {
  padding-inline-start: 0.25rem;
}
.rules .rule-body li + li {
  margin-top: 1rem;
}
.rules .rule-body li::marker {
  color: #dba33f;
}
.rules .rule-body strong {
  color: #dba33f;
  font-weight: 700;
}
.rules .rule-body a {
  color: rgb(240.6, 209.8, 151.2);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.rules .rule-body a[target=_blank]::after {
  content: " ↗";
  display: inline;
}
.rules .rule-body a:hover {
  color: #fff1d2;
  text-decoration-thickness: 2px;
}
.rules .rule-body a:focus-visible {
  outline: 2px solid #dba33f;
  outline-offset: 3px;
}
.rules .rule-body .rule-period {
  display: grid;
  gap: 0.375rem;
  padding: 0.875rem 1rem;
  border-radius: 0.375rem;
  background: rgba(219, 163, 63, 0.08);
}
.rules .notice {
  margin: 1.5rem 0 0;
  padding: 1rem;
  border-left: 2px solid #dba33f;
  -o-border-image: linear-gradient(135deg, #8e4b06 0%, #d49124 18%, #fff2bb 37%, #f2c361 48%, #ad650c 62%, #ffe5a1 80%, #a7640b 100%) 1;
     border-image: linear-gradient(135deg, #8e4b06 0%, #d49124 18%, #fff2bb 37%, #f2c361 48%, #ad650c 62%, #ffe5a1 80%, #a7640b 100%) 1;
  background: rgba(219, 163, 63, 0.06);
  color: #fff1d2;
  font-size: 0.8125rem;
  line-height: 1.8;
}
@media (prefers-reduced-motion: reduce) {
  .rules {
    --rule-animation-duration: 0ms;
  }
}

@media (min-width: 768px) {
  .rules details {
    margin-bottom: 1rem;
  }
  .rules summary {
    padding: 1.25rem 4rem 1.25rem 1.5rem;
    font-size: 1.25rem;
  }
  .rules .rule-body {
    padding: 1.5rem;
    font-size: 1rem;
  }
}
.section-fade {
  display: block;
}
@media (min-width: 768px) {
  .section-fade {
    display: none;
  }
}

.page-content {
  --rules-fade-height: clamp(4rem, 14vw, 8rem);
  background: #100905;
}
.page-content > .hero,
.page-content > .coupon-section,
.page-content > .products-section,
.page-content > .prizes-categories,
.page-content > .rules-section {
  position: relative;
  isolation: isolate;
  border-bottom: 0;
}
.page-content > .hero > .section-fade,
.page-content > .coupon-section > .section-fade,
.page-content > .products-section > .section-fade,
.page-content > .prizes-categories > .section-fade,
.page-content > .rules-section > .section-fade {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(to bottom, #100905, rgba(16, 9, 5, 0)) center top/100% clamp(40px, 12vw, 72px) no-repeat, linear-gradient(to top, #100905, rgba(16, 9, 5, 0)) center bottom/100% clamp(40px, 12vw, 72px) no-repeat;
  pointer-events: none;
}
.page-content > .hero > .container,
.page-content > .hero > .hero-container,
.page-content > .hero > .section,
.page-content > .coupon-section > .container,
.page-content > .coupon-section > .hero-container,
.page-content > .coupon-section > .section,
.page-content > .products-section > .container,
.page-content > .products-section > .hero-container,
.page-content > .products-section > .section,
.page-content > .prizes-categories > .container,
.page-content > .prizes-categories > .hero-container,
.page-content > .prizes-categories > .section,
.page-content > .rules-section > .container,
.page-content > .rules-section > .hero-container,
.page-content > .rules-section > .section {
  z-index: 1;
}
.page-content > .hero > .container,
.page-content > .hero > .section,
.page-content > .coupon-section > .container,
.page-content > .coupon-section > .section,
.page-content > .products-section > .container,
.page-content > .products-section > .section,
.page-content > .prizes-categories > .container,
.page-content > .prizes-categories > .section,
.page-content > .rules-section > .container,
.page-content > .rules-section > .section {
  position: relative;
}
.page-content > .coupon-section > .container {
  z-index: auto;
}
.page-content > .hero > .section-fade {
  background-size: 100% clamp(40px, 12vw, 72px), 100% clamp(4rem, 20vw, 7rem);
}
.page-content > .prizes-categories > .section-fade {
  background-size: 100% clamp(40px, 12vw, 72px), 100% var(--rules-fade-height);
}
.page-content > .rules-section > .section-fade {
  display: block;
  background-size: 100% var(--rules-fade-height), 100% clamp(40px, 12vw, 72px);
}
@media (min-width: 768px) {
  .page-content {
    --products-fade-height: clamp(5rem, 8vw, 10rem);
  }
  .page-content > .hero > .container,
  .page-content > .hero > .section,
  .page-content > .coupon-section > .container,
  .page-content > .coupon-section > .section,
  .page-content > .products-section > .container,
  .page-content > .products-section > .section,
  .page-content > .prizes-categories > .container,
  .page-content > .prizes-categories > .section {
    position: static;
    z-index: auto;
  }
  .page-content > .hero > .hero-container,
  .page-content > .coupon-section > .hero-container,
  .page-content > .products-section > .hero-container,
  .page-content > .prizes-categories > .hero-container {
    z-index: auto;
  }
  .page-content > .hero > .section-fade {
    display: block;
    background: linear-gradient(to top, #100905, rgba(16, 9, 5, 0)) center bottom/100% var(--products-fade-height) no-repeat;
  }
  .page-content > .hero > .hero-container {
    z-index: 1;
  }
  .page-content > .coupon-section,
  .page-content > .products-section {
    position: relative;
    isolation: isolate;
  }
  .page-content > .coupon-section > .section-fade,
  .page-content > .products-section > .section-fade {
    display: block;
    background-size: 100% var(--products-fade-height), 100% var(--products-fade-height);
  }
  .page-content > .coupon-section > .container,
  .page-content > .products-section > .container {
    position: relative;
    z-index: 1;
  }
  .page-content > .prizes-categories > .section-fade {
    display: block;
    background-size: 100% var(--products-fade-height), 100% var(--rules-fade-height);
  }
  .page-content > .prizes-categories > .section {
    position: relative;
    z-index: 1;
  }
}/*# sourceMappingURL=main.css.map */