@import"https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@700;900&display=swap";:root{color-scheme:light;font-family:Nunito,ui-sans-serif,system-ui,sans-serif;line-height:1.4}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:linear-gradient(135deg,#ffecd2,#fcb69f,#ff9a9e);overflow-x:hidden}.page{min-height:100vh;padding:1.5rem;display:flex;flex-direction:column;align-items:center}.title{font-family:Fredoka One,cursive;font-size:2.8rem;color:#ff6b6b;text-shadow:3px 3px 0 #ffd93d,6px 6px 0 rgba(0,0,0,.08);text-align:center;margin-bottom:.3rem;animation:titleBounce 2s ease-in-out infinite}.subtitle{font-family:Nunito,sans-serif;font-weight:700;font-size:1.1rem;color:#e85d75;margin-bottom:1.5rem;text-align:center}@keyframes titleBounce{0%,to{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;max-width:800px;width:100%}.number-card{position:relative;border-radius:1.2rem;padding:1.2rem .8rem;text-align:center;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 6px #00000026,0 8px 20px #0000001a;user-select:none;-webkit-user-select:none}.number-card:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 10px #00000026,0 14px 28px #0000001f}.number-card:active,.number-card.popped{transform:translateY(4px) scale(.96);box-shadow:0 2px #00000026,0 4px 10px #00000014}.number-card.popped{animation:pop .5s ease}@keyframes pop{0%{transform:scale(.9)}40%{transform:scale(1.15) rotate(5deg)}70%{transform:scale(.95) rotate(-3deg)}to{transform:scale(1) rotate(0)}}.big-number{font-family:Fredoka One,cursive;font-size:3.2rem;line-height:1;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.15);margin-bottom:.2rem}.emoji{font-size:1.8rem;margin-bottom:.2rem;display:block}.funny-text{font-size:.7rem;font-weight:900;color:#ffffffe6;text-transform:uppercase;letter-spacing:.05em;line-height:1.3}.confetti{position:fixed;pointer-events:none;font-size:1.5rem;z-index:100;animation:confettiFall 1s ease-out forwards}@keyframes confettiFall{0%{opacity:1;transform:translateY(0) rotate(0) scale(1)}to{opacity:0;transform:translateY(120px) rotate(720deg) scale(.3)}}.score-bar{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;background:#fff9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:.5rem 1.2rem;border-radius:2rem;font-weight:900;font-size:1rem;color:#e85d75;box-shadow:0 2px 10px #00000014}.score-bar span{font-family:Fredoka One,cursive;font-size:1.4rem;color:#ff6b6b}.streak{margin-left:auto;font-size:.85rem;color:#f08a5d}.footer-note{margin-top:1.5rem;font-size:.85rem;color:#c06070;text-align:center;font-weight:700}.card-red{background:linear-gradient(135deg,#ff6b6b,#ee5a24)}.card-orange{background:linear-gradient(135deg,#ffa502,#ff6348)}.card-yellow{background:linear-gradient(135deg,#ffd32a,#f9ca24)}.card-green{background:linear-gradient(135deg,#2ed573,#26de81)}.card-teal{background:linear-gradient(135deg,#1abc9c,#0abde3)}.card-blue{background:linear-gradient(135deg,#54a0ff,#3742fa)}.card-purple{background:linear-gradient(135deg,#a55eea,#8854d0)}.card-pink{background:linear-gradient(135deg,#ff6b81,#e056a0)}.card-coral{background:linear-gradient(135deg,#ff7979,#eb4d4b)}.card-indigo{background:linear-gradient(135deg,#686de0,#4834d4)}.bg-shapes{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden}.shape{position:absolute;border-radius:50%;opacity:.15;animation:float 8s ease-in-out infinite}.shape:nth-child(1){width:120px;height:120px;background:#ffd93d;top:10%;left:5%;animation-delay:0s}.shape:nth-child(2){width:80px;height:80px;background:#ff6b6b;top:60%;left:85%;animation-delay:2s}.shape:nth-child(3){width:150px;height:150px;background:#6c5ce7;top:80%;left:10%;animation-delay:4s;border-radius:30%}.shape:nth-child(4){width:60px;height:60px;background:#00b894;top:20%;left:75%;animation-delay:1s}.shape:nth-child(5){width:100px;height:100px;background:#fd79a8;top:45%;left:50%;animation-delay:3s;border-radius:40%}@keyframes float{0%,to{transform:translateY(0) rotate(0)}33%{transform:translateY(-20px) rotate(10deg)}66%{transform:translateY(15px) rotate(-5deg)}}.content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%}
