@import"https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&display=swap";:root{--pink: #FF6B9D;--purple: #C44DFF;--blue: #4DC9F6;--green: #4DDB6A;--yellow: #FFD93D;--orange: #FF8C42;--red: #FF4757;--bg-start: #667eea;--bg-end: #764ba2;--card-bg: rgba(255, 255, 255, .95);--shadow: 0 8px 32px rgba(0,0,0,.15);--shadow-lg: 0 12px 48px rgba(0,0,0,.2);--radius: 20px;--radius-sm: 12px}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}html,body,#root{min-height:100vh;min-height:100dvh;overflow-x:hidden}body{font-family:"Baloo 2",cursive,system-ui,sans-serif;background:linear-gradient(135deg,var(--bg-start),var(--bg-end));color:#2d3436}.home-screen{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:1.5rem 1rem 2rem;overflow-y:auto}.home-title{text-align:center;margin-bottom:.5rem;animation:titleBounce 2s ease-in-out infinite}.home-title h1{font-size:clamp(2rem,7vw,3.2rem);font-weight:800;color:#fff;text-shadow:3px 3px 0 rgba(0,0,0,.15),0 0 30px rgba(255,255,255,.3);line-height:1.2}.home-title .subtitle{font-size:clamp(1rem,3.5vw,1.4rem);color:#ffffffe6;font-weight:600;margin-top:.25rem}.home-mascot{font-size:clamp(4rem,15vw,7rem);margin:.5rem 0;animation:mascotFloat 3s ease-in-out infinite;filter:drop-shadow(0 8px 16px rgba(0,0,0,.2))}.game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;max-width:700px;width:100%;margin-top:1rem}.game-card{background:var(--card-bg);border-radius:var(--radius);padding:1.25rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:var(--shadow);border:3px solid transparent;position:relative;overflow:hidden}.game-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--card-color, var(--pink))}.game-card:hover,.game-card:active{transform:scale(1.05);box-shadow:var(--shadow-lg)}.game-card:active{transform:scale(.97)}.game-card .icon{font-size:2.8rem;line-height:1}.game-card .label{font-size:1rem;font-weight:700;color:#2d3436;text-align:center;line-height:1.2}.game-shell{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}.game-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.back-btn{background:#ffffff40;border:none;border-radius:50%;width:48px;height:48px;display:grid;place-items:center;font-size:1.5rem;cursor:pointer;transition:transform .15s,background .15s;color:#fff}.back-btn:hover{background:#fff6}.back-btn:active{transform:scale(.9)}.game-title{font-size:1.3rem;font-weight:700;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.stars-display{display:flex;gap:.25rem;font-size:1.5rem}.star{transition:transform .3s}.star.filled{animation:starPop .4s ease-out}.game-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem 1rem;gap:1.5rem;overflow-y:auto}.game-prompt{font-size:clamp(1.2rem,4vw,1.6rem);font-weight:700;color:#fff;text-align:center;text-shadow:1px 1px 3px rgba(0,0,0,.2);padding:0 1rem}.option-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;max-width:400px;width:100%}.option-grid.three{grid-template-columns:repeat(3,1fr)}.option-grid.four{grid-template-columns:repeat(4,1fr)}.option-btn{background:var(--card-bg);border:4px solid transparent;border-radius:var(--radius);padding:1rem;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;min-height:80px;font-size:2rem}.option-btn:hover{transform:scale(1.05)}.option-btn:active{transform:scale(.95)}.option-btn.correct{border-color:var(--green);background:#e8ffe8;animation:correctPulse .5s ease}.option-btn.wrong{border-color:var(--red);animation:wrongShake .4s ease}.option-btn.selected{border-color:var(--blue);background:#e8f4ff}.color-swatch{width:60px;height:60px;border-radius:50%;box-shadow:inset 0 -4px 8px #00000026,0 4px 12px #0000001a}.shape-option{width:70px;height:70px}.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;max-width:380px;width:100%}.memory-card{aspect-ratio:1;border-radius:var(--radius-sm);cursor:pointer;perspective:600px;min-height:70px}.memory-card-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .4s}.memory-card.flipped .memory-card-inner{transform:rotateY(180deg)}.memory-card-front,.memory-card-back{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius-sm);display:grid;place-items:center;backface-visibility:hidden;font-size:2rem;box-shadow:var(--shadow)}.memory-card-front{background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;font-size:1.8rem}.memory-card-back{background:var(--card-bg);transform:rotateY(180deg)}.memory-card.matched .memory-card-inner{transform:rotateY(180deg)}.memory-card.matched .memory-card-back{border:3px solid var(--green);background:#e8ffe8}.connect-dots-canvas{position:relative;background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);max-width:400px;width:100%;aspect-ratio:1;overflow:hidden}.connect-dots-canvas svg{width:100%;height:100%}.dot-number{position:absolute;width:40px;height:40px;border-radius:50%;background:var(--card-bg);border:3px solid var(--purple);display:grid;place-items:center;font-weight:700;font-size:1rem;color:var(--purple);cursor:pointer;transition:transform .15s,background .15s;z-index:2;box-shadow:0 2px 8px #00000026}.dot-number:hover,.dot-number:active{transform:scale(1.2)}.dot-number.connected{background:var(--green);border-color:var(--green);color:#fff}.pattern-row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;justify-content:center}.pattern-item{width:70px;height:70px;background:var(--card-bg);border-radius:var(--radius-sm);display:grid;place-items:center;font-size:2rem;box-shadow:var(--shadow)}.pattern-item.mystery{border:4px dashed var(--yellow);background:#ffd93d26;font-size:1.5rem;animation:mysteryPulse 1.5s ease-in-out infinite}.celebration-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease}.celebration-card{background:var(--card-bg);border-radius:var(--radius);padding:2.5rem 3rem;text-align:center;box-shadow:var(--shadow-lg);animation:celebrationPop .5s cubic-bezier(.175,.885,.32,1.275);max-width:90vw}.celebration-card .big-emoji{font-size:4rem;display:block;margin-bottom:.5rem;animation:celebrationSpin 1s ease-in-out}.celebration-card h2{font-size:1.8rem;font-weight:800;color:var(--purple);margin-bottom:.25rem}.celebration-card p{font-size:1.1rem;color:#636e72;margin-bottom:1.25rem}.celebration-card .stars-earned{font-size:2.5rem;margin-bottom:1rem;display:flex;gap:.25rem;justify-content:center}.celebration-card .continue-btn{background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;border:none;border-radius:50px;padding:.85rem 2.5rem;font-size:1.2rem;font-weight:700;font-family:inherit;cursor:pointer;transition:transform .15s;box-shadow:0 4px 16px #c44dff66}.celebration-card .continue-btn:hover{transform:scale(1.05)}.celebration-card .continue-btn:active{transform:scale(.95)}.confetti-container{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:101;overflow:hidden}.confetti-piece{position:absolute;width:10px;height:10px;top:-10px;animation:confettiFall var(--duration, 3s) linear forwards}.counting-objects{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;max-width:350px;padding:1.5rem;background:#ffffff26;border-radius:var(--radius);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.counting-object{font-size:2.5rem;animation:objectPop .3s ease-out backwards}@keyframes titleBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes mascotFloat{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}@keyframes starPop{0%{transform:scale(.5)}50%{transform:scale(1.4)}to{transform:scale(1)}}@keyframes correctPulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes wrongShake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes celebrationPop{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes celebrationSpin{0%{transform:rotate(0) scale(.5)}50%{transform:rotate(180deg) scale(1.2)}to{transform:rotate(360deg) scale(1)}}@keyframes confettiFall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}@keyframes mysteryPulse{0%,to{transform:scale(1);opacity:.7}50%{transform:scale(1.05);opacity:1}}@keyframes objectPop{0%{transform:scale(0) rotate(-20deg)}to{transform:scale(1) rotate(0)}}@keyframes bubbleFloat{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.05)}to{transform:translateY(0) scale(1)}}@media(max-width:480px){.game-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}.option-grid{gap:.75rem}.memory-grid{gap:.5rem}.pattern-item{width:55px;height:55px;font-size:1.5rem}.counting-object{font-size:2rem}}