*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #7c3aed;--primary-light: #a78bfa;--secondary: #ec4899;--accent: #fbbf24;--success: #10b981;--error: #ef4444;--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--card-bg: rgba(255, 255, 255, .95)}body{font-family:Nunito,sans-serif;background:var(--bg-gradient);min-height:100vh;overflow-x:hidden}.app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.screen{background:var(--card-bg);border-radius:24px;padding:40px;max-width:600px;width:100%;box-shadow:0 25px 50px -12px #00000040;position:relative;overflow:hidden}.start-screen{text-align:center}.floating-pis{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.floating-pi{position:absolute;font-size:2rem;color:var(--primary-light);opacity:.2;animation:float 6s ease-in-out infinite;animation-delay:var(--delay);left:var(--x);top:-50px}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(calc(100vh + 100px)) rotate(360deg)}}.title{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:30px;flex-wrap:wrap}.pi-symbol{font-size:4rem;color:var(--primary);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.title-text{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.instructions{margin-bottom:30px}.instructions p{font-size:1.2rem;color:#4b5563;margin-bottom:10px}.hint{font-size:1rem!important;color:#6b7280!important}.hint.small{font-size:.9rem!important}.hint strong{color:var(--primary)}.high-score-display{background:linear-gradient(135deg,#fef3c7,#fde68a);padding:16px 24px;border-radius:16px;margin-bottom:30px;display:inline-flex;align-items:center;gap:10px;font-size:1.1rem}.trophy{font-size:1.5rem}.start-button,.done-button,.play-again-button{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:#fff;border:none;padding:18px 48px;font-size:1.3rem;font-weight:700;border-radius:50px;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 10px 30px -10px #7c3aed80;font-family:inherit}.start-button:hover,.done-button:hover,.play-again-button:hover{transform:translateY(-2px);box-shadow:0 15px 40px -10px #7c3aed99}.bounce{animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.start-button:hover,.done-button:hover,.play-again-button:hover{animation:none;transform:translateY(-3px) scale(1.02)}.game-screen{text-align:center}.game-header h2{font-size:1.8rem;color:var(--primary);margin-bottom:10px}.digit-count{font-size:1.1rem;color:#6b7280;margin-bottom:20px}.digit-count strong{color:var(--primary);font-size:1.3rem}.display-container{background:#1e1b4b;border-radius:16px;padding:24px;margin-bottom:30px;min-height:80px;display:flex;align-items:center;justify-content:center;cursor:text;overflow-x:auto}.digit-display{font-family:Courier New,monospace;font-size:2rem;font-weight:700;display:flex;flex-wrap:wrap;gap:2px;justify-content:center}.prefix{color:#a78bfa}.digit{color:#fbbf24;position:relative}.digit.pop-in{animation:popIn .15s ease-out backwards;animation-delay:var(--delay)}@keyframes popIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.cursor{color:#fbbf24;animation:blink 1s step-end infinite}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.hidden-input{position:absolute;opacity:0;pointer-events:none}.tip{margin-top:20px;color:#9ca3af;font-size:.9rem}.results-screen{text-align:center}.results-header{margin-bottom:30px}.result-emoji{font-size:4rem;display:block;margin-bottom:10px}.results-header h2{font-size:1.5rem;color:#4b5563}.score-display{margin-bottom:30px}.score-number{display:flex;flex-direction:column;align-items:center;margin-bottom:15px}.score-value{font-size:5rem;font-weight:800;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}.score-label{font-size:1.3rem;color:#6b7280}.new-record{background:linear-gradient(135deg,#fef3c7,#fde68a);padding:12px 24px;border-radius:50px;font-size:1.2rem;font-weight:700;color:#92400e;display:inline-block}.high-score-info{color:#9ca3af;font-size:1rem}.digit-display.results .digit.correct{color:var(--success)}.digit-display.results .digit.incorrect{color:var(--error)}.digit-display.results .digit.first-error{position:relative}.error-marker{position:absolute;top:-20px;left:50%;transform:translate(-50%);font-size:1rem;color:var(--error)}.wiggle{animation:wiggle .5s ease-in-out}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}.results-breakdown{margin-bottom:30px}.results-breakdown h3{color:#4b5563;margin-bottom:15px;font-size:1.1rem}.legend{display:flex;justify-content:center;gap:30px;margin-top:15px}.legend-item{font-size:.9rem;display:flex;align-items:center;gap:5px}.legend-item.correct{color:var(--success)}.legend-item.incorrect{color:var(--error)}.no-digits{background:#fef3c7;padding:24px;border-radius:16px;margin-bottom:30px}.no-digits p{color:#92400e;margin-bottom:10px}.no-digits .hint{color:#a16207!important}.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000;overflow:hidden}.confetti{position:absolute;width:10px;height:10px;background:var(--color);left:var(--x);top:-20px;animation:confettiFall 3s ease-out forwards;animation-delay:var(--delay)}.confetti:nth-child(odd){border-radius:50%}.confetti:nth-child(3n){width:8px;height:14px}@keyframes confettiFall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}@media (max-width: 480px){.screen{padding:24px}.title-text{font-size:1.8rem}.pi-symbol{font-size:3rem}.digit-display{font-size:1.5rem}.score-value{font-size:4rem}.start-button,.done-button,.play-again-button{padding:14px 36px;font-size:1.1rem}}