/* Give the main highlight the same warm stage as the opening hero. */
#lucky-draw {
  position: relative;
  isolation: isolate;
  color: #fff9ef;
  background:
    radial-gradient(ellipse 80% 58% at 51% -8%, rgba(231, 119, 46, .58), transparent 74%),
    radial-gradient(ellipse 54% 47% at 84% 35%, rgba(133, 60, 34, .30), transparent 75%),
    radial-gradient(ellipse 58% 48% at 10% 76%, rgba(101, 39, 29, .22), transparent 77%),
    linear-gradient(180deg, #4a251d 0%, #321d1a 45%, #211516 100%);
}

#lucky-draw::before,
#lucky-draw::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#lucky-draw::before {
  background: url('/assets/families-shopping.jpg') center 43% / cover no-repeat;
  filter: blur(24px) sepia(.9) saturate(1.35);
  opacity: .11;
  transform: scale(1.04);
}

#lucky-draw::after {
  background: url('/assets/fair-atmosphere.svg') center top / cover no-repeat;
  opacity: .82;
}

#lucky-draw > .wrap,
#lucky-draw > .marquee { position: relative; z-index: 1; }

#lucky-draw .section-head { max-width: 780px; }
#lucky-draw .section-head .eyebrow { color: #f3bf7a; }
#lucky-draw #draw-title {
  max-width: 18ch;
  color: #fffaf3;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.04;
  letter-spacing: -.045em;
}
#lucky-draw #draw-title .gold {
  background: linear-gradient(105deg, #ffe1a0 0%, #f2b75d 43%, #e18d43 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
#lucky-draw .section-head .lede { color: #f4e8dc; opacity: 1; }

#lucky-draw .prize {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 268px;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(#fffaf1, #fffaf1) padding-box,
    linear-gradient(145deg, #ffe0a1 0%, #f1af5f 34%, #dd824a 72%, #ad583c 100%) border-box;
  color: #321e13;
  border: 3px solid transparent;
  box-shadow: 0 0 0 1px rgba(255, 230, 185, .22),
    0 16px 36px rgba(13, 7, 6, .28);
}
#lucky-draw .prize-photo {
  width: 100%;
  height: 216px;
  aspect-ratio: auto;
  object-fit: contain;
  padding: 10px 12px;
  border-radius: 0;
  border-bottom: 1px solid #f1e0c9;
  background: #fff;
}
#lucky-draw .prize-rank {
  position: absolute;
  top: 16px;
  right: 14px;
  z-index: 1;
  width: fit-content;
  margin: 0;
  padding: 5px 9px 4px;
  border-radius: 6px;
  background: #f7e7cc;
  color: #82411e;
  box-shadow: 0 2px 8px rgba(40, 20, 10, .12);
  font-family: inherit;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .09em;
}
#lucky-draw .prize-name {
  min-height: 82px;
  padding: 16px 16px 17px;
  color: #321e13;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.22;
}

#lucky-draw .prize-details summary {
  color: #fff9ef;
  border-color: rgba(255, 225, 180, .52);
  background: rgba(255, 255, 255, .07);
}
#lucky-draw .prize-details summary:hover { background: rgba(255, 255, 255, .12); }
#lucky-draw .prize-details summary:focus-visible { outline: 3px solid #f2b75d; outline-offset: 3px; }
#lucky-draw .steps li {
  background: #fffaf1;
  color: #321e13;
  border: 1px solid #f1d8b5;
}
#lucky-draw .steps li::before { background: #efaa50; color: #321e13; }
#lucky-draw .steps b { color: #7e3f22; }
#lucky-draw .mini-faq h3 { color: #f3bf7a; }
#lucky-draw .mini-faq p { color: #f4e8dc; opacity: 1; }

#lucky-draw .draw-foot .btn-primary {
  background: linear-gradient(110deg, #f3ab39 0%, #ed8d2f 52%, #df6b35 100%);
  color: #321e13;
  box-shadow: 0 11px 25px rgba(14, 6, 5, .28);
}
#lucky-draw .draw-foot .btn-primary:hover {
  background: linear-gradient(110deg, #f7bf59, #f0a543, #e98547);
  color: #321e13;
}
#lucky-draw .draw-foot .tnc { color: #f4dfc7; }

@media (max-width: 700px) {
  #lucky-draw::before { opacity: .08; filter: blur(20px) sepia(.9) saturate(1.25); }
  #lucky-draw::after {
    background-image: url('/assets/fair-atmosphere-mobile.svg');
    background-size: 100% 100%;
    opacity: .85;
  }
  #lucky-draw #draw-title { font-size: clamp(36px, 10vw, 48px); }
}

@media (max-width: 900px) {
  #lucky-draw .marquee {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  #lucky-draw .marquee::-webkit-scrollbar { display: none; }
  #lucky-draw .marquee-track { animation: none; }
  #lucky-draw .marquee-track [aria-hidden='true'] { display: none; }
  #lucky-draw .prize { scroll-snap-align: start; }
}