:root{
  --bg1: #0f172a;
  --card: rgba(255,255,255,0.06);
  --glass: rgba(255,255,255,0.06);
  --accent: #ff8fb1;
  --accent2: #80e6ff;
  --muted: rgba(255,255,255,0.8);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(255,140,180,0.06), transparent),
              radial-gradient(900px 500px at 90% 90%, rgba(128,230,255,0.04), transparent),
              linear-gradient(180deg,var(--bg1),#071028 80%);
  color:var(--muted);
  -webkit-font-smoothing:antialiased;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}
.stage{width:100%;max-width:980px;padding:24px}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border-radius:20px;
  padding:28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  box-shadow: 0 10px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(6px) saturate(120%);
}
.mascot{width:220px;height:160px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.blob{width:160px;height:160px;transform-origin:center;transition:transform 260ms cubic-bezier(.2,.9,.2,1)}
.blob:hover{transform:scale(1.06) translateY(-4px)}
.title{font-size:clamp(1.4rem,3.6vw,2.4rem);margin:0;text-align:center;color:#fff}
.lead{margin:0;color:rgba(255,255,255,0.85);text-align:center}
.actions{display:flex;gap:12px;align-items:center}
.btn{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  border:0;padding:10px 16px;border-radius:12px;color:#071028;font-weight:600;cursor:pointer;box-shadow:0 6px 18px rgba(255,140,180,0.12);
}
.btn:active{transform:translateY(1px)}
.ghost{color:rgba(255,255,255,0.8);text-decoration:none;padding:8px 12px;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.04)}
.hint{color:rgba(255,255,255,0.6);font-size:0.9rem;margin-top:6px}

/* confetti */
#confetti{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.c{position:absolute;width:10px;height:14px;border-radius:2px;opacity:0.95}

/* floating stars */
.stage::before,.stage::after{content:"";position:fixed;pointer-events:none}
.stage::before{width:220px;height:220px;right:8%;top:6%;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.06), transparent 25%), radial-gradient(circle at 70% 70%, rgba(128,230,255,0.04), transparent 25%);border-radius:50%;filter:blur(24px)}
.stage::after{width:140px;height:140px;left:6%;bottom:6%;background:radial-gradient(circle at 50% 50%, rgba(255,140,180,0.04), transparent);border-radius:50%;filter:blur(28px)}

@media (max-width:520px){
  .card{padding:20px;border-radius:16px}
  .mascot{width:160px;height:120px}
  .blob{width:120px;height:120px}
}

/* small entrance animation */
.card{transform-origin:center;animation:pop 520ms cubic-bezier(.16,.84,.24,1)}
@keyframes pop{0%{transform:translateY(6px) scale(.996);opacity:0}100%{transform:none;opacity:1}}

/* confetti animation classes generated by JS */
@keyframes fall {
  0%{transform:translateY(-20vh) rotate(0deg);opacity:1}
  100%{transform:translateY(120vh) rotate(720deg);opacity:0}
}

/* sparkles */
.sparkle{position:absolute;width:8px;height:8px;border-radius:50%;background:linear-gradient(90deg,#fff,#ffd1dc);box-shadow:0 0 10px rgba(255,220,240,0.9);opacity:0.95}
@keyframes sparkle-fall{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(160px) scale(.2);opacity:0}}

/* large emoji rain */
.emoji-large{position:absolute;font-size:28px;pointer-events:none;will-change:transform,opacity}

/* toast */
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:28px;z-index:1200;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast-msg{background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));color:#fff;padding:10px 14px;border-radius:12px;box-shadow:0 8px 24px rgba(2,6,23,0.6);backdrop-filter:blur(6px);opacity:0;transform:translateY(10px);animation:toast-in 420ms cubic-bezier(.2,.95,.2,1) forwards}
@keyframes toast-in{0%{opacity:0;transform:translateY(12px) scale(.98)}60%{opacity:1;transform:translateY(0) scale(1.02)}100%{transform:translateY(0) scale(1)}}


/* emojis */
.emojis{display:flex;gap:10px;margin-top:6px;align-items:center;justify-content:center;flex-wrap:wrap}
.emoji{background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));border:0;padding:10px;border-radius:999px;font-size:1.4rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;transition:transform 180ms ease,box-shadow 180ms;box-shadow:0 6px 18px rgba(2,6,23,0.45)}
.emoji:active{transform:translateY(2px) scale(.98)}
.emoji:nth-child(1){animation:float 4s ease-in-out -0.2s infinite}
.emoji:nth-child(2){animation:float 4.2s ease-in-out -0.6s infinite}
.emoji:nth-child(3){animation:float 4.6s ease-in-out -0.9s infinite}
.emoji:nth-child(4){animation:float 3.8s ease-in-out -0.4s infinite}
.emoji:nth-child(5){animation:float 4.4s ease-in-out -0.1s infinite}

@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}

.emoji.bounce{animation:pop-bounce 640ms cubic-bezier(.2,.9,.2,1) both}
@keyframes pop-bounce{0%{transform:scale(1)}30%{transform:scale(1.34) rotate(-10deg)}55%{transform:scale(.92) rotate(8deg)}100%{transform:scale(1) rotate(0)}}

@media (max-width:420px){
  .emoji{width:44px;height:44px;font-size:1.25rem}
}