/* GeneusDNA Lucky Wheel — all styling for the player wheel.
   Markup: partials/lucky-wheel-card.ejs (shared card, included by both the
   standalone page lucky-wheel.ejs and the modal partials/lucky-wheel-popup.ejs).
   Resets scoped to .gw-page / #gw-modal so the popup drops onto any page. */
:root {
  --font-thai: "Sukhumvit Set", "Thonburi", "Sarabun", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, sans-serif;
  --font-display: "Outfit", "Inter", system-ui, sans-serif;
}
.gw-page *, #gw-modal * { box-sizing: border-box; }
.gw-page { margin: 0; padding: 0; font-family: var(--font-thai); }
[hidden] { display: none !important; }

/* ============ shells ============ */
/* standalone page background + centering */
.gw-stage {
  min-height: 100vh; width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; background: #F7F9FB; font-family: var(--font-thai);
}
/* modal overlay (popup mode). margin:auto centers when it fits, scrolls when it doesn't. */
#gw-modal {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 20px 14px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: rgba(16,24,40,.66); font-family: var(--font-thai);
}
#gw-modal .gw-card { margin: auto; }
/* the card both shells wrap */
.gw-card {
  width: 100%; max-width: 440px; position: relative; overflow: hidden;
  border-radius: 24px; box-shadow: 0 24px 48px rgba(16,24,40,.28);
  background: linear-gradient(180deg,#FFFFFF 0%,#F1FAF9 55%,#E4F4F3 100%);
  font-family: var(--font-thai);
}
#gw-close {
  position: absolute; top: 10px; right: 12px; z-index: 30;
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); color: #667085; font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
#gw-close:hover { background: #fff; color: #101828; }

/* ============ brand bar + banner ============ */
.gw-accent { height: 8px; width: 100%; background: linear-gradient(90deg,#29BCB2,#F6851F); }
.gw-brand { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px 8px; }
.gw-brand-logo { height: 26px; width: auto; }
.gw-brand-tag {
  font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .12em;
  color: #F6851F; background: #FEF3E9; padding: 5px 10px; border-radius: 6px;
}
.gw-banner {
  margin: 0 20px; background: #FEF3F2; border: 1px solid #FDA29B; color: #B42318;
  font-size: 13px; padding: 10px 14px; border-radius: 10px;
}

/* ============ wheel section ============ */
.gw-wheel-sec { position: relative; overflow: hidden; padding: 8px 20px 34px; text-align: center; }
.gw-blob-a {
  position: absolute; top: -30px; right: -24px; width: 170px; height: 170px; border-radius: 50%;
  background: radial-gradient(circle,rgba(250,163,27,.28),rgba(250,163,27,0));
  filter: blur(4px); animation: gwFloat 6s ease-in-out infinite; pointer-events: none;
}
.gw-blob-b {
  position: absolute; bottom: -50px; left: -40px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle,rgba(93,197,196,.32),rgba(93,197,196,0));
  filter: blur(4px); animation: gwFloat 7s ease-in-out infinite reverse; pointer-events: none;
}
.gw-title { position: relative; font-size: 22px; margin: 10px 0 2px; color: #101828; font-weight: 700; }
.gw-limit {
  position: relative; display: inline-flex; align-items: center; gap: 7px; margin: 8px 0 4px;
  background: #FEF3E9; border: 1px solid #FAD9B8; border-radius: 9999px; padding: 8px 16px;
}
.gw-limit-text { font-size: 12.5px; font-weight: 700; color: #C56A19; }
.gw-subtitle { position: relative; font-size: 13px; color: #667085; margin: 0 0 18px; }

.gw-wheel-wrap { position: relative; width: min(72vw,300px); height: min(72vw,300px); margin: 50px auto; }
.gw-filigree-outer { position: absolute; left: -42.5%; top: -37%; width: 185%; height: 185%; pointer-events: none; opacity: .4; }
.gw-filigree-main { position: absolute; left: -16.7%; top: -20.1%; width: 132.9%; height: 145%; pointer-events: none; }
.gw-bezel {
  position: absolute; inset: 0.5%; border-radius: 50%;
  background: linear-gradient(135deg,#8C6A16,#E3BE62 50%,#8C6A16); box-shadow: 0 8px 18px rgba(0,0,0,.2);
}
.gw-disc { position: absolute; inset: 1.5%; border-radius: 50%; background: #2B2B2E; }
.gw-wheel { position: absolute; inset: 2.5%; border-radius: 50%; will-change: transform; background: #FBF6E6; }
.gw-dividers { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.gw-pointer {
  position: absolute; top: -6%; left: 50%; transform: translateX(-50%); z-index: 7; width: 46px; height: auto;
  filter: drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff);
}
.gw-spin-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 6;
  width: 78px; height: 78px; border-radius: 50%; border: 3px solid #F1D77E; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 42% 32%, #FFFDF5, #FAF3DC 62%, #E8C878);
  box-shadow: 0 4px 10px rgba(0,0,0,.4), inset 0 -3px 6px rgba(140,106,22,.25);
  transition: transform .1s;
}
.gw-spin-btn:active { transform: translate(-50%,-50%) scale(.94) !important; }
.gw-spin-inner { display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none; }
.gw-hub-logo { height: 22px; width: auto; }
.gw-spin-text { color: #3B2314; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .1em; }

.gw-hint { position: absolute; inset: 0; z-index: 7; pointer-events: none; animation: gwHintFade .4s ease both; }
.gw-hint-ring {
  position: absolute; top: 50%; left: 50%; width: 78px; height: 78px; border-radius: 50%;
  border: 3px solid #F6851F; transform: translate(-50%,-50%); animation: gwTapPulse 1.6s ease-out infinite;
}
.gw-hint-ring.d2 { animation-delay: .8s; }
.gw-hint-hand {
  position: absolute; top: calc(50% + 40px); left: 50%; transform: translate(-50%,-50%);
  width: 40px; height: 40px; animation: gwTapPress 1.3s ease-in-out infinite; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3));
}
.gw-hint-tip {
  position: absolute; top: calc(50% + 84px); left: 50%; transform: translate(-50%,-50%);
  background: #263238; color: #fff; font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 9999px;
  white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,.25);
}

/* ============ grand-prize showcase ============ */
.gw-showcase {
  position: relative; margin-top: 14px; border-radius: 18px; padding: 12px 14px;
  background: #FFFFFF; box-shadow: 0 0 0 1.5px #EDD292 inset; overflow: hidden;
}
.gw-showcase-glow {
  position: absolute; top: -46px; right: -36px; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle,rgba(227,190,98,.4),transparent 70%); pointer-events: none;
}
.gw-showcase-row { position: relative; display: flex; align-items: center; gap: 14px; text-align: left; }
.gw-showcase-imgbox {
  width: 92px; height: 92px; flex: none; border-radius: 12px; overflow: hidden; background: #FBF6E6;
  display: flex; align-items: center; justify-content: center;
}
.gw-showcase-text { min-width: 0; }
.gw-showcase-kicker { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #A87C14; }
.gw-showcase-name { font-size: 15px; font-weight: 700; color: #5C430B; margin: 3px 0 7px; }
.gw-showcase-pill {
  display: inline-flex; align-items: center; gap: 7px; background: #FFFFFF;
  border: 1.5px solid #EDD292; border-radius: 9999px; padding: 4px 12px;
}
.gw-showcase-cta { font-size: 12px; font-weight: 700; color: #A87C14; }

/* ============ shared bits ============ */
.gw-fit-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gw-overlay {
  position: absolute; inset: 0; z-index: 20; padding: 22px;
  background: rgba(38,50,56,.55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
}
.gw-sheet {
  width: 100%; position: relative; overflow: hidden; background: #fff; border-radius: 20px;
  box-shadow: 0 24px 48px rgba(16,24,40,.3), 0 0 0 1.5px #F1D77E inset;
  animation: gwPop .45s cubic-bezier(.2,.9,.3,1.3) both;
}
.gw-cta {
  display: block; width: 100%; box-sizing: border-box; text-align: center; text-decoration: none;
  border: none; cursor: pointer; padding: 14px; border-radius: 9999px;
  background: linear-gradient(90deg,#F6851F,#FAA31B); color: #fff;
  font-family: var(--font-thai); font-size: 16px; font-weight: 700;
  box-shadow: 0 8px 18px rgba(246,133,31,.35); transition: filter .15s;
}
.gw-cta:hover { filter: brightness(1.05); }
.gw-textbtn {
  width: 100%; margin-top: 10px; border: none; background: transparent; cursor: pointer;
  color: #667085; font-family: var(--font-thai); font-size: 14px; font-weight: 600; padding: 8px;
}
.gw-goldtext {
  background: linear-gradient(120deg,#8C6A16,#C9A227 45%,#E0760F);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.gw-input {
  width: 100%; padding: 13px 14px; font-size: 16px; font-family: var(--font-thai);
  border: 1.5px solid #D0D5DD; border-radius: 8px; outline: none; color: #101828;
}
.gw-input:focus { border-color: #29BCB2 !important; box-shadow: 0 0 0 4px rgba(41,188,178,.15); }

/* ============ result overlay ============ */
.gw-sheet-result { max-width: 300px; padding: 22px 20px 20px; text-align: center; background: linear-gradient(180deg,#FFFDF6 0%,#FFFFFF 45%); }
.gw-r-glow {
  position: absolute; top: -70px; left: 50%; transform: translateX(-50%); width: 260px; height: 170px;
  pointer-events: none; background: radial-gradient(ellipse at center, rgba(250,163,27,.22), transparent 68%);
}
.gw-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.gw-confetti span { position: absolute; top: -14px; }
.gw-confetti span:nth-child(1) { left: 8%;  width: 7px; height: 11px; background: #F6851F; animation: gwConfetti 1.6s ease-in 0s  infinite; }
.gw-confetti span:nth-child(2) { left: 20%; width: 6px; height: 10px; background: #29BCB2; animation: gwConfetti 1.9s ease-in .5s infinite; }
.gw-confetti span:nth-child(3) { left: 33%; width: 8px; height: 8px;  border-radius: 50%; background: #FAA31B; animation: gwConfetti 1.7s ease-in .2s infinite; }
.gw-confetti span:nth-child(4) { left: 47%; width: 6px; height: 12px; background: #006F61; animation: gwConfetti 2.1s ease-in .8s infinite; }
.gw-confetti span:nth-child(5) { left: 58%; width: 7px; height: 7px;  border-radius: 50%; background: #F6851F; animation: gwConfetti 1.8s ease-in .3s infinite; }
.gw-confetti span:nth-child(6) { left: 70%; width: 6px; height: 11px; background: #29BCB2; animation: gwConfetti 2.0s ease-in .9s infinite; }
.gw-confetti span:nth-child(7) { left: 82%; width: 8px; height: 10px; background: #FAA31B; animation: gwConfetti 1.6s ease-in .1s infinite; }
.gw-r-kickrow { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.gw-r-line   { height: 1.5px; width: 26px; background: linear-gradient(90deg,transparent,#E3BE62); }
.gw-r-line-r { height: 1.5px; width: 26px; background: linear-gradient(90deg,#E3BE62,transparent); }
.gw-r-kicker { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .2em; color: #009081; }
.gw-r-grandimg-wrap {
  width: 118px; height: 88px; border-radius: 12px; overflow: hidden; margin: 0 auto 12px;
  border: 2px solid #FAB679; animation: gwFloat 2.6s ease-in-out infinite; background: #FBF6E6;
  display: flex; align-items: center; justify-content: center;
}
.gw-r-label { position: relative; font-size: 27px; font-weight: 700; line-height: 1.2; margin-bottom: 5px; }
.gw-r-desc  { position: relative; font-size: 13px; color: #475467; margin: 0 0 18px; }

/* ============ form overlay ============ */
.gw-sheet-form { max-width: 320px; padding: 24px 22px; }
.gw-f-head { text-align: center; margin-bottom: 18px; position: relative; }
.gw-f-label { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: #009081; margin-bottom: 2px; }
.gw-f-prize { font-size: 34px; font-weight: 800; line-height: 1.5; margin-bottom: 14px; }
.gw-f-title { font-size: 20px; margin: 0 0 4px; color: #101828; font-weight: 700; }
.gw-f-sub { font-size: 13px; color: #667085; margin: 0; }
.gw-f-steps { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.gw-f-step  { width: 46px; height: 5px; border-radius: 3px; background: #29BCB2; }
.gw-f-step2 { width: 20px; height: 5px; border-radius: 3px; background: #D0D5DD; transition: all .2s; }
.gw-f-fieldlabel { display: block; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: #344054; margin-bottom: 6px; }
.gw-f-error { min-height: 18px; font-size: 12px; color: #EA4335; margin-top: 6px; }
#gw-f-submit { margin-top: 6px; }
.gw-consent { font-size: 11px; color: #98A2B3; text-align: center; margin: 14px 0 0; line-height: 1.5; }

/* ============ sent overlay ============ */
.gw-sheet-sent { max-width: 320px; padding: 26px 22px; text-align: center; }
.gw-sent-icon {
  width: 64px; height: 64px; border-radius: 50%; background: #DEF3F2;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.gw-sent-title { font-size: 23px; margin: 0 0 6px; color: #101828; font-weight: 700; }
.gw-sent-body { font-size: 14px; color: #475467; margin: 0 0 16px; line-height: 1.6; }
.gw-s-prize { color: #C56A19; }
.gw-contact {
  background: #F7F9FB; border: 1px solid #E4E7EC; border-radius: 12px; padding: 12px 14px;
  font-size: 14px; font-weight: 700; color: #344054; word-break: break-all; margin-bottom: 20px;
}
.gw-note { font-size: 11px; color: #98A2B3; margin: 14px 0 0; line-height: 1.5; }

/* ============ code overlay ============ */
.gw-sheet-code { max-width: 320px; padding: 24px 22px; text-align: center; }
.gw-c-iconbg {
  width: 52px; height: 52px; border-radius: 50%; background: #DEF3F2; position: relative;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 10px;
}
.gw-c-title { font-size: 21px; margin: 0 0 4px; color: #101828; font-weight: 700; }
.gw-c-sub { font-size: 13px; color: #475467; margin: 0 0 14px; line-height: 1.5; }
.gw-ticket { position: relative; overflow: hidden; border: 2px dashed #29BCB2; background: #F7F9FB; border-radius: 14px; padding: 18px 16px; margin-bottom: 8px; }
.gw-ticket-label { font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em; color: #667085; font-weight: 600; margin-bottom: 6px; }
.gw-ticket-code { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: .08em; color: #006F61; }
.gw-sheen { position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); animation: gwSheen 2.6s ease-in-out infinite; }
.gw-copy {
  border: 1.5px solid #29BCB2; background: #fff; border-radius: 9999px; cursor: pointer; color: #009081;
  font-family: var(--font-thai); font-size: 14px; font-weight: 700; padding: 8px 22px; margin-bottom: 16px;
  transition: background .15s;
}
.gw-copy:hover { background: #DEF3F2; }
.gw-coupon-note { font-size: 11.5px; color: #667085; margin: 14px 0 0; line-height: 1.5; }
.gw-prod { display: flex; align-items: center; gap: 12px; border-radius: 14px; background: #FFFDF6; box-shadow: 0 0 0 1.5px #EDD292 inset; padding: 10px 12px; margin-bottom: 10px; text-align: left; }
.gw-prod-imgbox { width: 66px; height: 66px; flex: none; border-radius: 10px; overflow: hidden; background: #FBF6E6; display: flex; align-items: center; justify-content: center; }
.gw-prod-name { font-size: 14.5px; font-weight: 700; color: #5C430B; line-height: 1.35; }
.gw-prod-note { background: #DEF3F2; border-radius: 12px; padding: 10px 14px; text-align: left; margin-bottom: 12px; }
.gw-prod-note-text { font-size: 12.5px; color: #20463F; line-height: 1.55; }
.gw-call { display: block; text-decoration: none; margin-top: 8px; font-size: 13px; color: #009081; font-weight: 700; padding: 6px; }

/* ============ keyframes ============ */
@keyframes gwFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes gwPop { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }
@keyframes gwGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(246,133,31,.5); } 50% { box-shadow: 0 0 0 14px rgba(246,133,31,0); } }
@keyframes gwSheen { 0% { transform: translateX(-120%); } 100% { transform: translateX(220%); } }
@keyframes gwConfetti { 0% { transform: translateY(-16px) rotate(0deg); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(300px) rotate(620deg); opacity: .15; } }
@keyframes gwTapPulse { 0% { transform: translate(-50%,-50%) scale(.85); opacity: .9; } 100% { transform: translate(-50%,-50%) scale(1.9); opacity: 0; } }
@keyframes gwTapPress { 0%,100% { transform: translate(-50%,-50%) scale(1); } 45% { transform: translate(-50%,-38%) scale(.86); } }
@keyframes gwHintFade { 0% { opacity: 0; } 100% { opacity: 1; } }