/* Lucky wheel: the server still supplies the eight prizes and their colors. */
* { box-sizing: border-box; }
html { min-height: 100%; background: #0c1420; }
body.lucky-page { min-height: 100vh; min-height: 100dvh; margin: 0; color: #f7f3e9; font-family: Lato, "Segoe UI", Arial, sans-serif; background: radial-gradient(ellipse at 50% 55%, #35467850, transparent 48%), radial-gradient(ellipse at 15% 90%, #bc90351a, transparent 36%), #0c1420; }
.lucky-page #form1 { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.lucky-header { border-bottom: 1px solid #d6b87525; background: #101824e8; }
.lucky-header-inner { display: flex; align-items: center; gap: 16px; width: min(100%, 1120px); min-height: 76px; margin: auto; padding: 12px 28px; }
.lucky-back { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border: 1px solid #d6b87545; border-radius: 12px; background: #d6b8750c; color: #e7ce99; font-size: 23px; text-decoration: none; }
.lucky-brand { display: flex; align-items: center; flex: 0 0 44px; width: 44px; height: 44px; }
.lucky-brand img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.lucky-header-title { margin-left: auto; color: #e6d4ae; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.lucky-main { display: flex; flex: 1 0 auto; justify-content: center; align-items: center; padding: 38px 20px 52px; }
.lucky-stage { position: relative; width: min(100%, 920px); overflow: hidden; padding: 32px 30px 38px; border: 1px solid #d6b87535; border-radius: 26px; background: radial-gradient(ellipse at 50% 85%, #263e7950, transparent 45%), linear-gradient(155deg, #1d2a3b, #121b29 74%); box-shadow: 0 24px 70px #0006, inset 0 1px #ffffff0c; text-align: center; }
.lucky-stage::before, .lucky-stage::after { position: absolute; color: #e6ca85; opacity: .55; font-size: 23px; content: '\2726'; pointer-events: none; }
.lucky-stage::before { top: 28%; left: 12%; }
.lucky-stage::after { top: 49%; right: 12%; font-size: 15px; }
.lucky-stage-heading { position: relative; z-index: 1; }
.lucky-kicker { display: inline-block; color: #e0c388; font-size: 11px; font-weight: 800; letter-spacing: .18em; line-height: 1.4; }
.lucky-stage h1 { margin: 8px 0 0; color: #faf6ed; font-size: clamp(29px, 4vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; }
.lucky-stage-heading p { margin: 9px 0 0; color: #b8c4d5; font-size: 14px; line-height: 1.5; }
.lucky-count { display: inline-flex; align-items: center; gap: 10px; margin-top: 17px; padding: 7px 10px 7px 8px; border: 1px solid #d6b87543; border-radius: 999px; background: #0d1521a8; color: #c6d0dc; font-size: 13px; }
.lucky-count-icon { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #d6b87520; color: #e9cb8a; font-size: 18px; }
.lucky-count strong { min-width: 25px; padding: 3px 7px; border-radius: 7px; background: #d6b8751c; color: #f4d99e; font-size: 14px; }
.wheel-area { position: relative; width: min(100%, 428px); aspect-ratio: 1; margin: 30px auto 0; filter: drop-shadow(0 18px 24px #0006); }
.wheel-rim { position: absolute; inset: 0; border: 3px solid #f3dda6; border-radius: 50%; background: linear-gradient(130deg, #fff0c7, #bb8a3c 36%, #f4d99b 65%, #9d6a29); box-shadow: 0 0 0 6px #805823, 0 0 0 9px #f0d28d80, inset 0 0 18px #624018; }
.wheel-bulbs { position: absolute; inset: 6px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #fff4cb 0deg 2deg, transparent 2deg 15deg); -webkit-mask: radial-gradient(transparent 0 94%, #000 94.5%); mask: radial-gradient(transparent 0 94%, #000 94.5%); }
.wheel-face { position: absolute; inset: 6%; overflow: hidden; border: 2px solid #f2d397; border-radius: 50%; background: #bd9145; transition: transform 5s cubic-bezier(.12,.64,.12,1); }
.wheel-face > div { position: absolute; top: 0; left: 29.289%; display: flex; justify-content: center; align-items: flex-start; width: 41.422%; height: 50%; padding: 11px 12px 0; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 100%; color: #151719; font-family: Lato, "Segoe UI", Arial, sans-serif; font-size: clamp(11px, 3vw, 16px); font-weight: 800; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.wheel-face ._1 { transform: rotate(0deg); }
.wheel-face ._2 { transform: rotate(45deg); }
.wheel-face ._3 { transform: rotate(90deg); }
.wheel-face ._4 { transform: rotate(135deg); }
.wheel-face ._5 { transform: rotate(180deg); }
.wheel-face ._6 { transform: rotate(225deg); }
.wheel-face ._7 { transform: rotate(270deg); }
.wheel-face ._8 { transform: rotate(315deg); }
.wheel-pointer { position: absolute; z-index: 4; top: -8px; left: 50%; width: 34px; height: 43px; background: linear-gradient(135deg, #fff1c8, #cb9b4b 68%, #8e5e21); clip-path: polygon(0 0, 100% 0, 50% 100%); transform: translateX(-50%); filter: drop-shadow(0 3px 3px #0008); }
.wheel-spin { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; place-items: center; width: 23%; aspect-ratio: 1; padding: 4px; border: 5px solid #f0d89a; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #f6e2b1, #c79c4f 74%, #8f632b); box-shadow: 0 4px 14px #0009, inset 0 1px #fff8; color: #23202a; font: 800 clamp(12px, 3vw, 18px)/1 Lato, "Segoe UI", Arial, sans-serif; text-transform: uppercase; cursor: pointer; transform: translate(-50%, -50%); }
.wheel-spin:hover:not(:disabled) { filter: brightness(1.12); }
.wheel-spin:disabled { cursor: wait; filter: saturate(.6); }
.wheel-spin:focus-visible, .lucky-back:focus-visible, .lucky-result-action:focus-visible { outline: 3px solid #ffdf8d; outline-offset: 4px; }
.lucky-result { position: fixed; z-index: 1000; inset: 0; overflow-y: auto; padding: 20px; background: #050a13db; }
.lucky-result-card { position: relative; width: min(100%, 420px); margin: max(12vh, 40px) auto 30px; padding: 34px 28px 28px; border: 1px solid #d6b87560; border-radius: 22px; background: radial-gradient(ellipse at 50% 0%, #785a2e3b, transparent 55%), linear-gradient(145deg, #1d2b3e, #121b28); box-shadow: 0 26px 70px #0009; text-align: center; }
.lucky-result-icon { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 16px; border: 1px solid #d6b87555; border-radius: 18px; background: #d6b87518; color: #e9cc8c; font-size: 28px; }
.lucky-result-card h2 { margin: 10px 0 0; color: #f9f5eb; font-size: 24px; line-height: 1.25; }
.lucky-result-card p { margin: 14px 0 24px; color: #d7dfeb; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.lucky-result-action { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 12px 18px; border: 1px solid #e1c183; border-radius: 11px; background: linear-gradient(135deg, #efdaa8, #caa45f); color: #191b22; font-size: 14px; font-weight: 700; text-decoration: none; }
.lucky-result-action span { font-size: 19px; }
@media (max-width: 540px) {
    .lucky-header-inner { min-height: 66px; gap: 12px; padding: 10px 16px; }
    .lucky-brand { flex-basis: 40px; width: 40px; height: 40px; }
    .lucky-main { padding: 22px 16px calc(34px + env(safe-area-inset-bottom, 0px)); }
    .lucky-stage { padding: 25px 16px 28px; border-radius: 21px; }
    .wheel-area { width: min(100%, 360px); margin-top: 25px; }
    .wheel-face > div { padding-top: 7px; }
    .wheel-pointer { width: 28px; height: 35px; }
}

/* Layered marquee rim and illuminated center, without changing prize positions. */
.wheel-rim { border: 3px solid #ffe9b5; background: linear-gradient(140deg, #fff2cb 0%, #c49a50 22%, #7d4f1b 36%, #f1cf87 57%, #a67731 80%, #ffe1a1 100%); box-shadow: 0 0 0 3px #56391c, 0 0 0 7px #bc914d, 0 0 0 9px #f4d89a80, 0 16px 35px #0008, inset 0 0 0 2px #6f4a21, inset 0 0 20px #52320c99; }
.wheel-bulbs { position: absolute; inset: 0; background: none; -webkit-mask: none; mask: none; }
.wheel-bulbs > span { position: absolute; inset: 0; border-radius: 50%; transform: rotate(calc(var(--bulb-index) * 15deg)); }
.wheel-bulbs > span::before { content: ''; position: absolute; top: 1.8%; left: 50%; width: clamp(4px, 1.6vw, 7px); aspect-ratio: 1; border-radius: 50%; background: #fff4cf; box-shadow: 0 0 2px 1px #fff4c9, 0 0 9px 3px #f7bd50aa; transform: translateX(-50%); }
.wheel-face { border: 2px solid #ffe3a3; box-shadow: 0 0 0 2px #7b501d, inset 0 0 15px #0004; }
.wheel-face > div { background-image: linear-gradient(145deg, #ffffff45 0%, #ffffff08 44%, #0000001c 100%); text-shadow: 0 1px 0 #ffffff55; }
.wheel-spin { width: 25%; border: 4px solid #f9df9e; background: radial-gradient(circle at 38% 27%, #e26b59 0%, #b52c34 46%, #711d29 100%); box-shadow: 0 0 0 4px #9e7339, 0 0 0 6px #f2d397, 0 9px 20px #0009, inset 0 2px 4px #ffcfb37a; color: #fff3d3; text-shadow: 0 2px 3px #4c1017; letter-spacing: .05em; }
.wheel-spin::before { content: ''; position: absolute; inset: 6px; border: 1px solid #ffdb9870; border-radius: 50%; pointer-events: none; }
.wheel-spin span { position: relative; z-index: 1; }
.wheel-pointer { top: -11px; width: 38px; height: 48px; background: linear-gradient(100deg, #8a5523, #ffe7a2 42%, #c18c3e 78%, #6f451a); filter: drop-shadow(0 4px 3px #000b); }
@media (max-width: 540px) { .wheel-pointer { width: 30px; height: 39px; } }

/* Empty-chance and already-claimed states use the same presentation as Angpau. */
.lucky-unavailable { position: relative; width: min(100%, 500px); overflow: hidden; padding: 48px 40px 36px; border: 1px solid #d4aa614a; border-radius: 25px; background: radial-gradient(ellipse at 50% 0%, #8d2b2840, transparent 53%), linear-gradient(160deg, #202a39, #141d2b 70%); box-shadow: 0 24px 70px #0006, inset 0 1px #ffffff0b; text-align: center; }
.lucky-unavailable::before { content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 1px; background: linear-gradient(90deg, transparent, #f0d39b, transparent); }
.lucky-unavailable-icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 24px; border: 1px solid #d6b87555; border-radius: 19px; background: #d6b87515; color: #e1c483; font-size: 28px; }
.lucky-unavailable-kicker { display: block; margin-bottom: 10px; color: #d8b773; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.lucky-unavailable h1 { margin: 0; color: #faf5ea; font-size: clamp(24px, 4vw, 30px); font-weight: 700; line-height: 1.25; }
.lucky-unavailable-message { margin: 16px 0 28px; color: #bec8d7; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
@media (max-width: 540px) { .lucky-unavailable { padding: 30px 24px 25px; border-radius: 21px; } }