:root {
  --wheel-size: 340px;
  --fk-blue: #2874f0; /* Flipkart blue */
  --fk-yellow: #ffeb3b; /* Flipkart yellow */
  --xmas-red: #c62828;
  --xmas-green: #2e7d32;
  --gold: #ffd700;
  --card-bg: rgba(255, 255, 255, 0.1);
  --footer-height: 72px; /* reserve area so animated bits don't go under footer */
  --light-size: 10px;
}
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  font-family: "Poppins", sans-serif;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(40, 116, 240, 0.18), transparent 10%),
    linear-gradient(135deg, var(--fk-blue) 0%, #163f90 50%, rgba(198, 40, 40, 0.06) 100%);
  color: #fff;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  overflow-x: hidden;
  padding-bottom: 26px;
}

/* NOTE: Top banner removed to avoid overlapping effect.
   Kept the wobble animation so small animated elements still work. */
.wobble {
  display: inline-block;
  animation: tilt 2s ease-in-out infinite;
}
@keyframes tilt {0%{transform:translateY(0)}50%{transform:translateY(-3px)}100%{transform:translateY(0)}}

header {
  margin-top: 0;
  max-width: 980px;
  width: 100%;
  padding: 0 16px;
  position: relative;
  z-index: 3100; /* ensure header sits above animated layers */
}

h1 {margin:0;font-size:2.6rem;text-shadow:0 4px 18px rgba(0,0,0,.45);display:flex;align-items:center;gap:10px;justify-content:center}
h1 .star{font-size:1.3rem;color:var(--gold);filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
h2{font-size:1.02rem;color:var(--fk-yellow);margin:8px 0 18px;text-shadow:0 1px 6px rgba(0,0,0,.25)}

.countdown{
  margin-top:10px;
  font-weight:700;
  color:#fff;
  background:rgba(0,0,0,0.18);
  padding:6px 12px;border-radius:20px;display:inline-block;font-size:0.95rem;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
}

.prizes-section{margin-top:12px;width:100%;max-width:980px;padding:0 18px;}
.prizes-grid{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-bottom:18px;}
.prize{
  background:var(--card-bg);
  border-radius:12px;width:200px;height:220px;
  box-shadow:0 8px 26px rgba(0,0,0,0.34);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;
  border:1px solid rgba(255,255,255,0.05);
  position:relative;overflow:hidden;
}
.prize .tip{
  position:absolute;left:8px;top:8px;background:rgba(0,0,0,0.45);padding:6px 8px;border-radius:8px;font-size:0.78rem;
  display:none;color:var(--fk-yellow)
}
.prize:hover .tip, .prize:focus-within .tip { display:block; }
.prize::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,var(--fk-yellow),var(--xmas-red),var(--xmas-green));opacity:0.06;}
.prize img{width:84%;height:120px;object-fit:contain;border-radius:10px;background:#fff;padding:8px;}
.prize p{margin-top:8px;font-weight:700;color:#fff;font-size:0.98rem;text-align:center}

/* wheel area */
.wheel-section{margin-top:14px;margin-bottom:24px;position:relative;}
.wheel-container{position:relative;width:var(--wheel-size);height:var(--wheel-size);display:inline-block;}
canvas#wheel{
  width:100%;height:100%;border-radius:50%;border:12px solid var(--fk-yellow);
  box-shadow: inset 0 0 30px rgba(255,255,255,0.18), 0 14px 50px rgba(0,0,0,.45);
  display:block;transform-origin:center center;background: radial-gradient(circle at 40% 30%, rgba(255,255,255,0.04), transparent 20%);
}

/* lights around wheel (positioned above canvas but below header) */
.lights{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(var(--wheel-size) + 36px);height:calc(var(--wheel-size) + 36px);border-radius:50%;pointer-events:none;z-index:3050}
.lights .bulb{position:absolute;width:var(--light-size);height:var(--light-size);border-radius:50%;box-shadow:0 0 8px rgba(0,0,0,0.4);transform-origin:center center;opacity:0.95;animation:blink 1.6s linear infinite;}
@keyframes blink{0%{opacity:0.15;transform:scale(0.6)}50%{opacity:1;transform:scale(1.1)}100%{opacity:0.15;transform:scale(0.6)}}

/* ornament button (smaller size) */
.center-btn{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:62px;
  height:62px;
  border-radius:50%;
  z-index:3200;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  border:3px solid rgba(255,255,255,0.9);
  background: radial-gradient(circle at 30% 25%, rgba(255,230,0,0.9), rgba(255,215,0,0.95)), linear-gradient(180deg,#b30000,#7a0019);
  color:var(--fk-yellow);
  font-weight:800;
  font-size:0.78rem;
  box-shadow:0 8px 22px rgba(0,0,0,0.6);
}
.center-btn .bow{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:17px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.center-btn:active{transform:translate(-50%,-50%) scale(0.98)}

/* Santa & tree decorations */
.decor { position:fixed; pointer-events:none; }
.decor.santa{ right:14px; top:12px; width:82px; height:auto; opacity:0.98; z-index:2900; }
.decor.tree{ left:12px; bottom:12px; width:86px; height:auto; opacity:0.98; transform-origin:center; animation:floatTree 4s ease-in-out infinite; z-index:2900;}
@keyframes floatTree{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}

/* giveaway result */
#result{margin-top:18px;font-weight:700;max-width:420px}
#result img{display:block;width:120px;margin:12px auto;border-radius:12px;background:#fff;padding:6px}
.pay-note{color:var(--fk-yellow);margin-top:8px;font-weight:600}
.small-note{font-size:0.92rem;color:rgba(255,255,255,0.85);margin-top:6px}

/* popup */
.popup{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);background:rgba(255,255,255,0.10);backdrop-filter:blur(8px);padding:22px;border-radius:14px;z-index:4000;transition:all .22s ease;width:340px;text-align:center;border:1px solid rgba(255,255,255,0.06)}
.popup.active{transform:translate(-50%,-50%) scale(1)}
.wallets{display:flex;gap:16px;justify-content:center;margin-top:12px}
.wallets img{width:68px;height:68px;border-radius:12px;background:#fff;padding:6px;object-fit:contain;cursor:pointer}

/* global snow layer - stops above footer because bottom uses --footer-height */
.snow-layer{position:fixed;left:0;top:0;right:0;bottom:var(--footer-height);pointer-events:none;z-index:1200;overflow:hidden}
.snowflake{position:absolute;color:white;font-size:14px;opacity:0.9;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4));animation:fall linear infinite;}
@keyframes fall{0%{transform:translateY(-10vh) rotate(0deg); opacity:1}100%{transform:translateY(calc(100vh - var(--footer-height))) rotate(720deg); opacity:0}}

/* confetti pieces - limited z-index so footer covers them visually */
.confetti-piece{position:fixed;width:10px;height:14px;pointer-events:none; opacity:0.95; transform-origin:center; animation:confetti-fall linear forwards; z-index:1200;}
@keyframes confetti-fall{0%{transform:translateY(-10vh) rotate(0deg); opacity:1}100%{transform:translateY(calc(100vh - var(--footer-height))) rotate(720deg); opacity:0}}

.snow, .orn{position:fixed;font-size:14px;pointer-events:none;animation:drift linear forwards;z-index:1200;}
@keyframes drift{0%{transform:translateY(-10vh) translateX(0) rotate(0deg);opacity:1}100%{transform:translateY(calc(100vh - var(--footer-height))) translateX(40px) rotate(720deg);opacity:0}}

footer{
  width:100%;text-align:center;padding:14px 0;background:linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.08));color:rgba(255,255,255,0.92);position:relative;margin-top:18px;border-top:1px solid rgba(255,255,255,0.03);
  z-index:2500; /* above animations like confetti/snow so nothing "shows" under footer */
  height:var(--footer-height);
  box-sizing:border-box;
}

@media (max-width:540px){
  :root{--wheel-size:300px}
  .prize{width:46%}
}

/* inline win result: text + image side-by-side */
.result-win {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.result-win .win-text { font-weight:700; font-size:1.05rem; color:inherit; }
.result-win img { width:84px; height:auto; border-radius:10px; background:#fff; padding:6px; display:block; }