@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap";:root{--pink: #FF69B4;--lavender: #B19CD9;--mint: #98D8C8;--peach: #FFDAB9;--sky: #87CEEB;--coral: #FF7F7F;--gold: #FFD700;--bg: #FFF5F9;--card-bg: #FFFFFF;--text: #4A3040;--text-light: #8A6F80;--shadow: rgba(255, 105, 180, .15)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text);font-family:Fredoka,sans-serif}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:1rem;background:linear-gradient(180deg,#fff5f9,#fff0f5 30%,#f0f4ff)}.music-btn{position:fixed;top:1rem;right:1rem;width:48px;height:48px;border-radius:50%;border:2px solid var(--pink);background:#fff;font-size:1.4rem;cursor:pointer;z-index:100;box-shadow:0 2px 12px var(--shadow);transition:transform .2s}.music-btn:hover{transform:scale(1.1)}.progress-steps{display:flex;gap:.5rem;margin:1rem 0 1.5rem;padding:.75rem 1.5rem;background:#fff;border-radius:50px;box-shadow:0 2px 16px var(--shadow)}.step{display:flex;align-items:center;gap:.4rem;opacity:.4;transition:all .3s}.step.active{opacity:1}.step.done{opacity:.7}.step-dot{width:28px;height:28px;border-radius:50%;background:#e8e0f0;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600;color:var(--text-light);transition:all .3s}.step.active .step-dot{background:linear-gradient(135deg,var(--pink),var(--lavender));color:#fff;transform:scale(1.15)}.step.done .step-dot{background:var(--mint);color:#fff}.step-label{font-size:.75rem;font-weight:500;display:none}@media(min-width:600px){.step-label{display:inline}}.screen{width:100%;max-width:900px;display:flex;flex-direction:column;align-items:center;animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}h2{font-size:1.8rem;font-weight:700;color:var(--text);margin-bottom:.5rem}.instruction{color:var(--text-light);font-size:1.1rem;margin-bottom:1.5rem;text-align:center}.pet-select{padding-top:2rem}.title{font-size:2.2rem;font-weight:700;background:linear-gradient(135deg,var(--pink),var(--lavender),var(--sky));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.subtitle{color:var(--text-light);font-size:1.15rem;margin-bottom:2rem}.pet-cards{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center}.pet-card{background:#fff;border:3px solid transparent;border-radius:20px;padding:2rem 1.5rem;width:220px;cursor:pointer;transition:all .3s;box-shadow:0 4px 20px var(--shadow);display:flex;flex-direction:column;align-items:center;gap:.5rem;font-family:inherit}.pet-card:hover{transform:translateY(-8px);border-color:var(--pink);box-shadow:0 8px 30px #ff69b440}.pet-card-emoji{font-size:4rem;margin-bottom:.5rem}.pet-card h2{font-size:1.3rem;margin:0}.pet-card p{font-size:.9rem;color:var(--text-light);text-align:center}.wash-area,.brush-area{position:relative;width:300px;height:300px;display:flex;align-items:center;justify-content:center;border-radius:24px;background:linear-gradient(135deg,#e8f4fd,#f0e8ff);margin-bottom:1.5rem;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none;box-shadow:inset 0 0 30px #87ceeb4d}.brush-area{cursor:none}.bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ffffffe6,#87ceeb4d);border:1px solid rgba(255,255,255,.6);animation:bubbleFloat 1.5s ease-out forwards;pointer-events:none}@keyframes bubbleFloat{0%{transform:scale(0) translateY(0);opacity:1}50%{transform:scale(1) translateY(-30px);opacity:.8}to{transform:scale(.5) translateY(-80px);opacity:0}}.brush-particle{position:absolute;font-size:1.2rem;pointer-events:none;animation:particleFade 1s ease-out forwards}@keyframes particleFade{0%{transform:scale(0) translateY(0);opacity:1}to{transform:scale(1.5) translateY(-40px);opacity:0}}.brush-cursor{position:absolute;font-size:2rem;pointer-events:none;transform:translate(60px,60px)}.progress-bar-container{width:100%;max-width:300px;height:28px;background:#f0e8f5;border-radius:14px;overflow:hidden;margin-bottom:1.5rem;box-shadow:inset 0 2px 4px #0000001a}.progress-bar{height:100%;background:linear-gradient(90deg,var(--pink),var(--lavender));border-radius:14px;transition:width .3s ease;display:flex;align-items:center;justify-content:center;min-width:60px}.progress-bar.brush-bar{background:linear-gradient(90deg,var(--mint),var(--sky))}.progress-label{font-size:.75rem;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}.btn{font-family:Fredoka,sans-serif;border:none;border-radius:50px;padding:.75rem 2rem;font-size:1.05rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-next{background:linear-gradient(135deg,var(--pink),var(--lavender));color:#fff;box-shadow:0 4px 15px #ff69b44d}.btn-next:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff69b466}.btn-big{padding:1rem 3rem;font-size:1.3rem}.station-nav{margin-top:1rem;text-align:center}.hint{color:var(--text-light);font-size:.95rem;font-style:italic}.style-layout{display:flex;gap:2rem;width:100%;flex-wrap:wrap;justify-content:center}.pet-preview{background:linear-gradient(135deg,#fff5f9,#f0f0ff);border-radius:20px;padding:1.5rem;display:flex;align-items:center;justify-content:center;min-width:240px;box-shadow:0 4px 20px var(--shadow)}.style-options{flex:1;min-width:280px;max-height:500px;overflow-y:auto;padding-right:.5rem}.option-section{margin-bottom:1.25rem}.option-section h3{font-size:1.1rem;color:var(--text);margin-bottom:.5rem;font-weight:600}.option-grid{display:flex;flex-wrap:wrap;gap:.5rem}.option-btn{font-family:Fredoka,sans-serif;background:#fff;border:2px solid #E8E0F0;border-radius:12px;padding:.5rem 1rem;font-size:.9rem;cursor:pointer;transition:all .2s;color:var(--text)}.option-btn:hover{border-color:var(--pink);background:#fff5f9}.option-btn.selected{border-color:var(--pink);background:linear-gradient(135deg,#ffe8f0,#fff0f5);color:var(--pink);font-weight:600}.accessory-opt{display:flex;align-items:center;gap:.4rem}.acc-emoji{font-size:1.2rem}.acc-name{font-size:.8rem}.color-palette{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}.color-swatch{width:52px;height:52px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000001a}.color-swatch:hover{transform:scale(1.15)}.color-swatch.selected{border-color:var(--text);transform:scale(1.1);box-shadow:0 4px 15px #0003}.check{color:#fff;font-weight:700;font-size:1.2rem;text-shadow:0 1px 3px rgba(0,0,0,.4)}.color-name{text-align:center;margin-top:.75rem;font-weight:600;color:var(--text)}.fashion-contest{padding-top:1rem}.contest-intro{text-align:center}.runway{background:linear-gradient(135deg,#ffe8f0,#f0e8ff,#e8f4fd);animation:runwayGlow 2s ease-in-out infinite alternate}@keyframes runwayGlow{0%{box-shadow:0 0 20px #ff69b433}to{box-shadow:0 0 40px #b19cd94d}}.judging-phase{text-align:center}.judges-row{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:1.5rem}.judge-card{background:#fff;border-radius:16px;padding:1.25rem;width:200px;box-shadow:0 4px 16px var(--shadow);opacity:.4;transform:scale(.95);transition:all .5s}.judge-card.revealed{opacity:1;transform:scale(1)}.judge-emoji{font-size:2.5rem;display:block;margin-bottom:.5rem}.judge-score{font-size:1.8rem;font-weight:700;color:var(--pink)}.judge-comment{font-size:.85rem;color:var(--text-light);margin-top:.5rem}.judge-thinking{color:var(--text-light);font-style:italic}.results-phase{text-align:center}.final-score{display:flex;flex-direction:column;align-items:center;gap:1rem;margin:1.5rem 0}.score-circle{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--lavender));display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 6px 25px #ff69b44d;animation:popIn .5s ease}@keyframes popIn{0%{transform:scale(0)}70%{transform:scale(1.15)}to{transform:scale(1)}}.score-number{font-size:2.5rem;font-weight:700;color:#fff;line-height:1}.score-label{font-size:.9rem;color:#fffc}.rank-badge{display:flex;align-items:center;gap:.5rem;background:#fff;padding:.5rem 1.5rem;border-radius:50px;box-shadow:0 2px 12px var(--shadow)}.rank-emoji{font-size:1.5rem}.rank-title{font-size:1.2rem;font-weight:700;color:var(--text)}.score-breakdown{background:#fff;border-radius:16px;padding:1.25rem;max-width:350px;width:100%;box-shadow:0 4px 16px var(--shadow);margin-bottom:1rem}.score-item{display:flex;align-items:center;gap:.75rem;padding:.4rem 0;font-size:.9rem}.score-item span:first-child{min-width:120px;text-align:left}.mini-bar{flex:1;height:8px;background:#f0e8f5;border-radius:4px;overflow:hidden}.mini-bar div{height:100%;background:linear-gradient(90deg,var(--pink),var(--lavender));border-radius:4px;transition:width .5s}.score-val{font-weight:600;color:var(--pink)}.judge-scores-final{margin-bottom:1.5rem}.judge-final{display:flex;justify-content:space-between;padding:.3rem 0;font-size:.9rem;color:var(--text-light)}.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:50;overflow:hidden}.confetti-piece{position:absolute;top:-20px;border-radius:4px;animation:confettiFall linear forwards}@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.pet-bounce{animation:petBounce 1.5s ease-in-out infinite}@keyframes petBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.accessory-bounce{animation:accBounce 1s ease-in-out infinite}@keyframes accBounce{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.05)}}.sparkle-group .sparkle{animation:sparkleAnim 1.5s ease-in-out infinite}@keyframes sparkleAnim{0%,to{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1.2)}}@media(max-width:600px){.title{font-size:1.6rem}.pet-cards{flex-direction:column;align-items:center}.pet-card{width:100%;max-width:280px}.wash-area,.brush-area{width:260px;height:260px}.style-layout{flex-direction:column}.judges-row{flex-direction:column;align-items:center}h2{font-size:1.4rem}}