:root { --pink:#ff5c8a; --yellow:#ffd23f; --mint:#5ce1b9; --ink:#4a1d2f; }
body { margin:0; font-family:'Fredoka',sans-serif; color:var(--ink); min-height:100vh;
  background: linear-gradient(160deg,#ffd9b8 0%,#ffc2d4 45%,#e6d4ff 100%); background-attachment:fixed; overflow-x:hidden; }
#confetti { position:fixed; inset:0; pointer-events:none; z-index:50; }
.title { font-family:'Fredoka',sans-serif; animation: wobble 4s ease-in-out infinite; display:inline-block; }
.hand { font-family:'Caveat',cursive; }
@keyframes wobble { 0%,100%{transform:rotate(-1deg)} 50%{transform:rotate(1.2deg) scale(1.02)} }
.blob { position:fixed; border-radius:50%; filter:blur(60px); opacity:.55; z-index:0; animation: drift 18s ease-in-out infinite alternate; }
.b1 { width:340px;height:340px;background:var(--yellow);top:-80px;left:-80px; }
.b2 { width:420px;height:420px;background:var(--mint);bottom:-120px;right:-100px;animation-delay:-6s; }
.b3 { width:280px;height:280px;background:var(--pink);top:40%;left:55%;animation-delay:-12s; }
@keyframes drift { to { transform: translate(60px,-40px) scale(1.15); } }
.card { background:rgba(255,255,255,.75); backdrop-filter:blur(8px); border-radius:24px; box-shadow:0 10px 30px rgba(180,60,100,.15); border:2px solid #fff; }
.pill { background:#fff; border-radius:999px; padding:.45rem .9rem; font-weight:500; box-shadow:0 3px 0 #f3b4c8; border:2px solid #ffd6e2; }
.pill:active { transform:translateY(2px); box-shadow:0 1px 0 #f3b4c8; }
.pill:disabled { opacity:.5; }
.big-btn { width:230px; height:230px; border-radius:50%; font-weight:700; font-size:2rem; line-height:1.05; color:#fff;
  background: radial-gradient(circle at 32% 28%, #fff7 0 14%, transparent 15%), radial-gradient(circle at 50% 40%, #ff8fb0, var(--pink) 60%, #e0336a);
  box-shadow: 0 14px 0 #c22659, 0 24px 40px rgba(200,40,90,.4), inset 0 -10px 20px rgba(0,0,0,.12);
  text-shadow:0 2px 0 #c22659; animation: idle 2.6s ease-in-out infinite; transition: transform .1s; }
.big-btn:hover { filter:brightness(1.07); }
.big-btn:active { transform: translateY(10px) scale(1.05,.92); box-shadow:0 4px 0 #c22659, 0 10px 20px rgba(200,40,90,.4); animation:none; }
@keyframes idle { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg) translateY(-4px)} }
.meter { height:22px; background:#fff; border-radius:999px; overflow:hidden; border:2px solid #ffd6e2; }
.meter-fill { height:100%; background:linear-gradient(90deg,var(--yellow),var(--pink),var(--mint)); border-radius:999px; transition: width .7s cubic-bezier(.34,1.56,.64,1); }
.mascot { animation: bob 2s ease-in-out infinite; }
.mascot:hover { animation: wave .5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes wave { 50% { transform: rotate(18deg); } }
.bubble { background:#fff; padding:.6rem 1rem; border-radius:18px 18px 18px 4px; font-weight:500; max-width:300px; box-shadow:0 4px 12px rgba(0,0,0,.08); }
.flip { animation: flipIn .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes flipIn { from { transform: perspective(800px) rotateX(-70deg) scale(.9); opacity:0; } }
.pop { animation: popIn .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes popIn { from { transform:scale(.5); opacity:0; } }
.dots span { display:inline-block; width:14px;height:14px;margin:0 4px;border-radius:50%;background:var(--pink);animation:bub 1s infinite; }
.dots span:nth-child(2){animation-delay:.15s;background:var(--yellow)} .dots span:nth-child(3){animation-delay:.3s;background:var(--mint)}
@keyframes bub { 50% { transform: translateY(-12px); } }
.jar { width:150px; }
.jar-lid { height:16px; width:110px; margin:0 auto; background:#f6a6bd; border-radius:6px 6px 2px 2px; }
.jar-body { height:170px; border:4px solid rgba(255,255,255,.95); border-top:none; border-radius:10px 10px 40px 40px; background:rgba(255,255,255,.35);
  display:flex; flex-wrap:wrap-reverse; align-content:flex-start; gap:3px; padding:8px; overflow:hidden; }
.marble { width:20px; height:20px; border-radius:50%; box-shadow: inset -3px -3px 0 rgba(0,0,0,.15), inset 3px 3px 0 rgba(255,255,255,.5); animation: popIn .4s; }
.note { background:#fff8d6; padding:.6rem .8rem; border-radius:12px; font-size:.95rem; box-shadow:0 2px 0 #f0dc8a; }
.rainbow { animation: rb 1s linear infinite; }
@keyframes rb { from { filter: hue-rotate(0deg) saturate(1.6); } to { filter: hue-rotate(360deg) saturate(1.6); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }
@media (max-width:480px) { .big-btn { width:190px; height:190px; font-size:1.7rem; } }