*{box-sizing:border-box}html,body{height:100%;margin:0}
:root{--ink:#120811;--pink:#ff2e91;--border:#ffd1ec}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);overflow:hidden}

/* Rainbow animated background */
#bg{position:fixed;inset:0;z-index:-2;
  background:linear-gradient(270deg,#ff0040,#ff7a00,#ffee00,#33ff00,#00ffee,#0066ff,#a000ff,#ff0040);
  background-size:1600% 1600%;animation:rb 28s ease infinite}
@keyframes rb{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Nav */
.nav{position:sticky;top:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:10px 14px;
  background:#ffffffbf;backdrop-filter:blur(10px);border-bottom:1px solid var(--border);box-shadow:0 6px 24px rgba(255,0,120,.25);z-index:5}
.left{display:flex;align-items:center;gap:8px;font-weight:900}
.center{display:flex;justify-content:center}
.right{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.counter-pill{display:flex;align-items:center;gap:10px;background:#fff;padding:8px 14px;border-radius:999px;border:2px solid var(--border);
  box-shadow:0 4px 18px rgba(255,0,120,.25)}
.counter-pill .label{color:#c2187a;font-weight:900;letter-spacing:.2px}
.counter-pill .count{font-size:1.8rem;font-weight:900;color:#c2187a}
.ca-chip{display:flex;align-items:center;gap:8px;background:#ffffffa0;padding:6px 10px;border-radius:999px;border:1px solid var(--border)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:#fff;color:#c2187a;cursor:pointer}

/* Main */
.wrap{max-width:1100px;margin:0 auto;padding:20px 14px;text-align:center}
.title{font-size:5rem;line-height:1;margin:8px 0 10px 0;color:#c2187a;text-shadow:0 8px 40px rgba(255,0,120,.35),0 0 10px #fff}
.hero-btn{border:none;background:transparent;cursor:pointer;display:inline-block;transform:translateZ(0);position:relative}
.hero-btn img{width:min(620px,88vw);height:auto;border:none;border-radius:0;background:transparent;
  filter:drop-shadow(0 22px 70px rgba(0,0,0,.35));transition:transform .06s ease, filter .2s ease}
.hero-btn:hover img{filter:drop-shadow(0 26px 84px rgba(255,255,255,.35)) drop-shadow(0 22px 70px rgba(0,0,0,.35))}
.hero-btn:active img{transform:scale(.985)}

/* Click cue */
.click-sticker{position:absolute;right:8%;top:6%;display:flex;align-items:center;gap:8px;
  background:#fff;color:#c2187a;border:2px solid var(--border);border-radius:999px;padding:6px 10px;
  font-weight:900;box-shadow:0 6px 24px rgba(255,0,120,.25);animation:bop 1.2s ease-in-out infinite}
.click-sticker .arrow{margin-top:2px}
@keyframes bop{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.05)}}

/* Floating cats — JS physics (no keyframes) */
#float-stage{position:fixed;inset:0;pointer-events:none;z-index:0}
.floating{position:absolute;pointer-events:auto;cursor:grab;user-select:none;will-change:transform;
  filter:drop-shadow(0 10px 35px rgba(255,0,120,.35))}
.floating:active{cursor:grabbing}

/* Foot */
.foot{padding:18px;text-align:center;color:#5c0e3a;text-shadow:0 1px #fff}

/* +MEOW effects */
.plus1{position:absolute;pointer-events:none;font-weight:900;font-size:44px;color:#fff;
  text-shadow:0 4px 24px rgba(0,0,0,.55),0 0 14px #ff3ca0;animation:pop 950ms ease forwards}
.plus1 span{display:inline-block;padding:8px 16px;background:linear-gradient(180deg,#fff,#ffd6ef);border-radius:14px;border:3px solid var(--border);color:#c2187a}
@keyframes pop{0%{opacity:0;transform:translateY(10px) scale(.9) rotate(-6deg)}20%{opacity:1}
  100%{opacity:0;transform:translateY(-64px) scale(1.28) rotate(8deg)}}
.spark{position:absolute;pointer-events:none;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 16px 6px rgba(255,255,255,.7);
  animation:spark 800ms ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx), var(--dy)) scale(0.2);opacity:0}}
.confetti{position:absolute;pointer-events:none;font-size:26px;animation:conf 950ms ease forwards}
@keyframes conf{to{transform:translateY(-90px) translateX(var(--dx,0px)) rotate(360deg);opacity:0}}