:root {
  --bg-0: #12061f; --bg-1: #2a0c3f; --bg-2: #3f0f3a;
  --card: rgba(26, 9, 42, 0.72);
  --gold: #ffd21e; --gold-2: #f5a300; --gold-3: #ffe66b;
  --magenta: #ff2d95; --violet: #8f3cff;
  --text: #f6edff; --muted: #cdb8e3;
  --line: rgba(255, 210, 30, 0.22);
  --shadow-gold: 0 10px 40px rgba(255, 180, 0, 0.35);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; height: 100dvh; overflow: hidden;            /* no page scroll */
  font-family: "Plus Jakarta Sans", "Hind Siliguri", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: radial-gradient(120% 60% at 50% -10%, #5b1a7a 0%, transparent 60%),
              radial-gradient(90% 40% at 100% 100%, rgba(255, 45, 149, 0.35) 0%, transparent 60%),
              linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 48%, var(--bg-2) 100%);
}

/* floating sparkles */
.sparkles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.sparkles i {
  position: absolute; bottom: -10px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); opacity: 0; filter: blur(0.5px);
  box-shadow: 0 0 10px var(--gold), 0 0 20px rgba(255, 210, 30, 0.6);
  animation: rise linear infinite;
}
.sparkles i:nth-child(odd) { background: var(--magenta); box-shadow: 0 0 10px var(--magenta), 0 0 20px rgba(255, 45, 149, 0.5); }
@keyframes rise { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 15% { opacity: 0.9; } 100% { transform: translateY(-110vh) scale(1.2); opacity: 0; } }

/* ---------- page shell: fills the screen, children share the height ---------- */
.page {
  position: relative; z-index: 1;
  max-width: 460px; margin: 0 auto; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--card); backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 30px 80px rgba(0, 0, 0, 0.5);
}
@media (min-width: 480px) and (min-height: 700px) {
  .page { height: calc(100dvh - 40px); margin: 20px auto; border-radius: 28px; overflow: hidden; }
}
.top-glow { position: absolute; left: 50%; top: -120px; width: 420px; height: 260px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 210, 30, 0.28), transparent); pointer-events: none; }

.content {
  flex: 1; min-height: 0; position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: max(10px, env(safe-area-inset-top)) 16px 8px; text-align: center;
}

.logo { display: block; width: clamp(110px, 32vw, 150px); margin: 0 auto 6px; filter: drop-shadow(0 6px 18px rgba(255, 190, 0, 0.45)); animation: float 4s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 210, 30, 0.12), rgba(255, 210, 30, 0.04));
  color: var(--gold-3); font-weight: 700; font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pill svg { width: 14px; height: 14px; }

/* ---------- HERO: takes whatever height is left ---------- */
.hero {
  flex: 1 1 0; min-height: 0; width: 100%; margin: 10px 0;
  display: flex; justify-content: center;
}
.hero-frame {
  width: 100%; height: 100%;
  border-radius: 20px; padding: 3px; position: relative;
  background: linear-gradient(135deg, var(--gold), var(--magenta) 50%, var(--violet));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 16px 40px rgba(255, 45, 149, 0.25), var(--shadow-gold);
  animation: border-glow 3.5s ease-in-out infinite;
}
@keyframes border-glow { 50% { box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 16px 50px rgba(143, 60, 255, 0.35), 0 10px 40px rgba(255, 210, 30, 0.45); } }
.hero-inner { width: 100%; height: 100%; border-radius: 17px; overflow: hidden; background: #1b0a2e; position: relative; }
.hero-bg { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(18px) saturate(1.3); opacity: .8; }
.hero-img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }
.hero-empty { height: 100%; display: grid; place-items: center; color: var(--muted); padding: 20px; font-size: 14px; }

/* ---------- SPIN & WIN ---------- */
.spin-box {
  height: 100%; display: flex; flex-direction: column; align-items: center; padding: 8px 8px 6px;
  background: radial-gradient(70% 60% at 50% 45%, #4a1263 0%, #1b0a2e 100%);
  position: relative; overflow: hidden;
}
.spin-box::before { /* soft light rays */
  content: ""; position: absolute; inset: -40%;
  background: conic-gradient(from 0deg, transparent 0 20deg, rgba(255,210,30,.07) 20deg 40deg, transparent 40deg 60deg, rgba(255,45,149,.07) 60deg 80deg, transparent 80deg 100deg, rgba(255,210,30,.07) 100deg 120deg, transparent 120deg 140deg, rgba(255,45,149,.07) 140deg 160deg, transparent 160deg 180deg, rgba(255,210,30,.07) 180deg 200deg, transparent 200deg 220deg, rgba(255,45,149,.07) 220deg 240deg, transparent 240deg 260deg, rgba(255,210,30,.07) 260deg 280deg, transparent 280deg 300deg, rgba(255,45,149,.07) 300deg 320deg, transparent 320deg 340deg, rgba(255,210,30,.07) 340deg 360deg);
  animation: rays 24s linear infinite; pointer-events: none;
}
@keyframes rays { to { transform: rotate(360deg); } }
.spin-title {
  margin: 0; font-weight: 900; font-size: clamp(15px, 4.2vw, 19px); letter-spacing: 1.5px; text-transform: uppercase; position: relative;
  background: linear-gradient(90deg, var(--gold-2), var(--gold-3) 40%, #fff 50%, var(--gold-3) 60%, var(--gold-2)); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2.4s linear infinite;
  filter: drop-shadow(0 2px 8px rgba(255, 210, 30, .5));
}
@keyframes shimmer { to { background-position: -200% 0; } }
.spin-sub { margin: 0 0 4px; color: var(--muted); font-size: 11.5px; position: relative; }
.wheel-wrap { position: relative; flex: 1 1 0; min-height: 0; aspect-ratio: 1; max-width: 100%; margin: 0 auto; }
.wheel-halo { /* spinning gradient halo behind the wheel */
  position: absolute; inset: -6%; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--gold), var(--magenta), var(--violet), var(--gold));
  filter: blur(12px); opacity: .75; animation: rays 6s linear infinite;
}
.wheel-rim {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, #ffe066, #c9971a, #fff1a8, #b8860b, #ffe066, #c9971a, #fff1a8, #b8860b, #ffe066);
  box-shadow: 0 0 0 3px #2a0c3f, 0 0 30px rgba(255, 210, 30, 0.55), inset 0 0 18px rgba(0, 0, 0, 0.6);
}
.wheel-rim::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.45), transparent 45%); }
.wheel-lights { position: absolute; inset: 0; border-radius: 50%; }
.wheel-lights b {
  position: absolute; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%;
  background: #fff7cc; box-shadow: 0 0 6px #fff, 0 0 12px var(--gold);
  animation: blink 1s steps(2) infinite;
}
.wheel-lights b:nth-child(even) { animation-delay: 0.5s; background: #ffd1e8; box-shadow: 0 0 6px #fff, 0 0 12px var(--magenta); }
@keyframes blink { 50% { opacity: 0.2; } }
.wheel-wrap.spinning .wheel-lights b { animation-duration: .25s; }
.wheel-canvas-wrap { position: absolute; inset: 7.5%; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 26px rgba(0,0,0,.65), 0 0 0 2px rgba(255, 210, 30, .6); }
#wheel { width: 100%; height: 100%; display: block; transition: transform 5.2s cubic-bezier(0.12, 0.82, 0.08, 1); will-change: transform; }
.wheel-gloss { position: absolute; inset: 7.5%; border-radius: 50%; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.22) 0%, transparent 40%, transparent 65%, rgba(0,0,0,.25) 100%); }
.wheel-pointer {
  position: absolute; left: 50%; top: -3%; transform: translateX(-50%); z-index: 3; width: 11%; aspect-ratio: 34 / 44;
  background: linear-gradient(180deg, #fff1a8, var(--gold) 50%, #c9871a);
  clip-path: polygon(50% 100%, 0 28%, 15% 0, 85% 0, 100% 28%);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.6));
}
.wheel-pointer::after { content: ""; position: absolute; left: 50%; top: 22%; width: 36%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff8fc0, var(--magenta) 60%, #a1004f); box-shadow: 0 0 8px var(--magenta); }
.spin-btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4;
  width: 25%; aspect-ratio: 1; border-radius: 50%; border: 3px solid #fff3b0;
  background: radial-gradient(circle at 35% 30%, #fff1a8, var(--gold) 45%, #d98a00);
  color: #2a0c3f; font-weight: 900; font-size: clamp(11px, 3.4vw, 15px); letter-spacing: 1px;
  cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.5), 0 0 26px rgba(255, 210, 30, 0.7), inset 0 -4px 8px rgba(0,0,0,.2);
  animation: pulse 1.6s ease-in-out infinite; font-family: inherit; padding: 0;
}
.spin-btn::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgba(255, 230, 107, .6); animation: ring 1.6s ease-out infinite; }
@keyframes ring { 0% { transform: scale(.8); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.spin-btn:disabled { animation: none; cursor: default; opacity: .9; }
.spin-btn:disabled::before { display: none; }
@keyframes pulse { 50% { box-shadow: 0 6px 16px rgba(0,0,0,.5), 0 0 44px rgba(255, 210, 30, 1), inset 0 -4px 8px rgba(0,0,0,.2); transform: translate(-50%, -50%) scale(1.06); } }
.spin-hint { margin: 4px 0 0; font-size: 11.5px; color: var(--gold-3); font-weight: 700; position: relative; }
.spin-hint span { display: inline-block; animation: bounce 1.2s infinite; }
@keyframes bounce { 50% { transform: translateY(-3px); } }

/* result modal */
.result { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; padding: 20px;
  background: rgba(10, 3, 20, 0.82); backdrop-filter: blur(6px); }
.result.show { display: grid; }
.result-card { width: 100%; max-width: 340px; text-align: center; padding: 26px 20px 22px; border-radius: 24px;
  background: linear-gradient(180deg, #3c1059, #1d0a30); border: 1px solid var(--line);
  box-shadow: var(--shadow-gold); animation: pop .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.result-card .trophy { font-size: 52px; line-height: 1; }
.result-card h2 { margin: 8px 0 2px; font-size: 20px; }
.result-card .prize { font-size: 28px; font-weight: 900; color: var(--gold); text-shadow: 0 0 20px rgba(255,210,30,.6); margin: 4px 0 10px; }
.result-card p { color: var(--muted); margin: 0 0 16px; font-size: 13px; }

/* ---------- TEXT + CTA ---------- */
.hero-text { font-size: clamp(13px, 3.6vw, 15px); line-height: 1.45; color: #ece0f7; margin: 0 0 10px; font-weight: 500; }

.cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 300px; margin: 0 auto; padding: 13px 20px; border-radius: 999px;
  text-decoration: none; color: #2a0c3f; font-weight: 800; font-size: 16px;
  background: linear-gradient(90deg, var(--gold-3), var(--gold) 45%, var(--gold-2));
  box-shadow: 0 10px 26px rgba(255, 170, 0, 0.45), inset 0 1px 0 rgba(255,255,255,.6);
  position: relative; overflow: hidden; transition: transform .15s;
}
.cta:active { transform: scale(.97); }
.cta::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: shine 2.6s infinite; }
@keyframes shine { 0% { left: -60%; } 60%, 100% { left: 130%; } }
.cta svg { width: 20px; height: 20px; }
.cta-note { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); display: flex; justify-content: center; align-items: center; gap: 5px; }
.cta-note svg { width: 13px; height: 13px; color: var(--gold); }

.trust { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 0; font-size: 11.5px; font-weight: 700; color: #f1e6ff; }
.trust span { display: inline-flex; align-items: center; gap: 4px; }
.trust svg { width: 13px; height: 13px; color: var(--gold); }

.divider { width: 100%; height: 1px; margin: 8px 0; background: linear-gradient(90deg, transparent, var(--line), transparent); }

.pay-title { font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; margin: 0 0 7px; display: flex; justify-content: center; align-items: center; gap: 6px; }
.pay-title svg { width: 12px; height: 12px; color: var(--gold); }
.pay { display: flex; justify-content: center; gap: 10px; width: 100%; }
.pay-badge {
  flex: 1; max-width: 112px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; padding: 5px 10px;
  background: #fff; border: 2px solid var(--c); overflow: hidden;
  box-shadow: 0 0 16px color-mix(in srgb, var(--c) 60%, transparent), inset 0 0 0 1px rgba(0,0,0,.04);
  animation: badge 3s ease-in-out infinite;
}
.pay-badge img { display: block; width: auto; height: 32px; max-width: 100%; object-fit: contain; }
.pay-badge:nth-child(2) { animation-delay: 1s; } .pay-badge:nth-child(3) { animation-delay: 2s; }
@keyframes badge { 50% { transform: translateY(-2px); box-shadow: 0 0 26px color-mix(in srgb, var(--c) 85%, transparent), inset 0 0 0 1px rgba(0,0,0,.04); } }
.pay-badge.bkash { --c: #e2136e; } .pay-badge.nagad { --c: #f6921e; } .pay-badge.rocket { --c: #8b3392; }

footer {
  flex: none; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); text-align: center; border-top: 2px solid var(--gold);
  background: rgba(10, 3, 20, 0.55); font-size: 11px; color: var(--muted);
  display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap;
}
footer .age { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--gold-3); font-weight: 700; font-size: 10.5px; }
footer .age svg { width: 12px; height: 12px; }

/* countdown (only when enabled in the admin panel) */
.countdown {
  position: relative; margin: 0 0 6px; z-index: 40;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: rgba(20, 6, 36, 0.9); border: 1px solid var(--line); color: var(--gold-3);
  font-size: 11px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.5); white-space: nowrap;
}
.countdown b { font-variant-numeric: tabular-nums; color: #fff; font-size: 13px; }
.countdown .dot { width: 7px; height: 7px; border-radius: 50%; background: #3cff8f; box-shadow: 0 0 10px #3cff8f; animation: blink 1s infinite; }

#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; }

/* very short screens: drop the least important bits so nothing scrolls */
@media (max-height: 640px) {
  .cta-note, .divider { display: none; }
  .trust { margin-top: 6px; }
}
@media (max-height: 560px) {
  .trust, .pill { display: none; }
}

/* short phones: give the wheel the room instead of the helper lines */
@media (max-height: 720px) {
  .spin-sub, .spin-hint { display: none; }
  .spin-title { font-size: 14px; margin-bottom: 2px; }
  .hero { margin: 6px 0; }
  .hero-text { margin-bottom: 8px; }
  footer { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
}

/* Hero box (image or spin): capped height; leftover space spreads between the sections */
.hero { max-height: min(38dvh, 330px); }
.hero--spin .hero-frame { width: auto; aspect-ratio: 1 / 1; max-width: 100%; }
.content { justify-content: space-evenly; }
.content .hero-text { margin: 0; }
.content .trust { margin-top: 0; }
.content .divider { margin: 0; }
.wheel-wrap { width: auto; }
@media (max-height: 720px) { .hero { max-height: min(40dvh, 330px); } }