@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap";:root{--pink: #ff6b9d;--purple: #c44dff;--blue: #4dc9ff;--mint: #4dffb8;--yellow: #ffd93d;--orange: #ff8c42;--coral: #ff6b6b;--bg-dark: #1a1025;--bg-card: #2a1f3d;--bg-card-light: #3d2d5c;--text: #fff;--text-dim: rgba(255,255,255,.65);--gold: #ffd700}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;font-family:Fredoka,sans-serif;background:var(--bg-dark);color:var(--text);overflow-x:hidden}body{background:linear-gradient(135deg,#1a1025,#2d1b4e,#1a1025)}button{font-family:Fredoka,sans-serif;cursor:pointer;border:none;outline:none;transition:all .2s ease}button:hover{transform:translateY(-2px)}button:active{transform:translateY(0)}.screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:1.5rem;animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes sparkle{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes bounceIn{0%{transform:scale(0)}60%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes pulse{0%,to{box-shadow:0 0 #ff6b9d66}50%{box-shadow:0 0 0 12px #ff6b9d00}}.welcome{justify-content:center;text-align:center;gap:2rem;background:radial-gradient(ellipse at top,#3d2d5c 0%,var(--bg-dark) 70%)}.welcome-logo{font-size:3.5rem;animation:float 3s ease-in-out infinite}.welcome h1{font-size:2.8rem;font-weight:700;background:linear-gradient(135deg,var(--pink),var(--purple),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2}.welcome p{color:var(--text-dim);font-size:1.1rem;max-width:26rem;line-height:1.6}.btn-primary{background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff;font-size:1.3rem;font-weight:600;padding:1rem 3rem;border-radius:50px;letter-spacing:.05em;box-shadow:0 4px 20px #c44dff4d;animation:pulse 2s infinite}.btn-primary:hover{box-shadow:0 6px 30px #c44dff80}.btn-secondary{background:var(--bg-card-light);color:#fff;font-size:1rem;font-weight:500;padding:.7rem 2rem;border-radius:50px;border:2px solid rgba(255,255,255,.1)}.btn-secondary:hover{background:#ffffff26}.btn-small{font-size:.85rem;padding:.5rem 1.2rem;border-radius:25px;font-weight:500}.char-select{gap:1.5rem;padding-top:2rem}.char-select h2{font-size:2rem;font-weight:600;color:var(--pink)}.char-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.2rem;max-width:700px;width:100%}.char-card{background:var(--bg-card);border-radius:1.2rem;padding:1.5rem 1rem;text-align:center;cursor:pointer;border:3px solid transparent;transition:all .3s ease}.char-card:hover{border-color:var(--purple);background:var(--bg-card-light);transform:translateY(-4px)}.char-avatar{font-size:4rem;margin-bottom:.5rem;display:block}.char-name{font-weight:600;font-size:1.1rem}.char-desc{font-size:.8rem;color:var(--text-dim);margin-top:.3rem}.salon{gap:1rem;padding:1rem;max-width:1200px;width:100%}.salon-header{display:flex;justify-content:space-between;align-items:center;width:100%;flex-wrap:wrap;gap:.5rem}.salon-title{font-size:1.6rem;font-weight:700;background:linear-gradient(135deg,var(--pink),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.coins-display{display:flex;align-items:center;gap:.5rem;background:var(--bg-card);padding:.5rem 1.2rem;border-radius:50px;font-weight:600;font-size:1.1rem}.level-display{background:linear-gradient(135deg,var(--purple),var(--blue));padding:.5rem 1.2rem;border-radius:50px;font-weight:600}.salon-body{display:flex;gap:1.2rem;width:100%;flex:1;min-height:0}.char-preview{flex:0 0 320px;background:var(--bg-card);border-radius:1.5rem;padding:1.5rem;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden}.char-preview:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--pink),var(--purple),var(--blue),var(--mint))}.preview-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;position:relative}.hair-display{position:relative;display:flex;flex-direction:column;align-items:center}.face-display{font-size:7rem;line-height:1;position:relative;z-index:2}.hair-style-display{position:relative;z-index:1;font-size:1.2rem;font-weight:600;margin-top:-1rem;padding:.3rem 1rem;border-radius:20px;background:#ffffff1a}.accessory-display{position:absolute;top:-10px;right:-20px;font-size:2.5rem;z-index:3;animation:float 2s ease-in-out infinite}.char-info-name{font-size:1.4rem;font-weight:700;margin-top:1rem}.char-style-label{color:var(--text-dim);font-size:.9rem;margin-top:.3rem}.tools-panel{flex:1;display:flex;flex-direction:column;gap:1rem;min-width:0}.tool-tabs{display:flex;gap:.5rem;flex-wrap:wrap}.tool-tab{padding:.6rem 1.2rem;border-radius:50px;font-weight:500;font-size:.95rem;background:var(--bg-card);color:var(--text-dim);border:2px solid transparent}.tool-tab.active{background:linear-gradient(135deg,#ff6b9d33,#c44dff33);color:#fff;border-color:var(--purple)}.tool-tab:hover:not(.active){background:var(--bg-card-light);color:#fff}.tool-content{background:var(--bg-card);border-radius:1.5rem;padding:1.5rem;flex:1;overflow-y:auto}.tool-section-title{font-size:1.1rem;font-weight:600;margin-bottom:1rem;color:var(--pink)}.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.8rem}.tool-item{background:var(--bg-card-light);border-radius:1rem;padding:1rem .5rem;text-align:center;cursor:pointer;border:2px solid transparent;transition:all .2s ease;position:relative}.tool-item:hover{border-color:var(--purple);background:#c44dff26}.tool-item.selected{border-color:var(--pink);background:#ff6b9d26}.tool-item.locked{opacity:.5;cursor:not-allowed}.tool-item.locked:hover{border-color:transparent;background:var(--bg-card-light)}.tool-icon{font-size:2rem;display:block;margin-bottom:.4rem}.tool-label{font-size:.8rem;font-weight:500}.tool-price{font-size:.7rem;color:var(--yellow);margin-top:.2rem}.lock-icon{position:absolute;top:4px;right:4px;font-size:.9rem}.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:.6rem}.color-swatch{width:50px;height:50px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:all .2s ease;position:relative}.color-swatch:hover{transform:scale(1.15)}.color-swatch.selected{border-color:#fff;box-shadow:0 0 12px #ffffff4d}.color-swatch.locked{opacity:.4;cursor:not-allowed}.color-swatch.locked:hover{transform:none}.challenge-banner{width:100%;background:linear-gradient(135deg,#ff8c4233,#ff6b6b33);border:2px solid var(--orange);border-radius:1rem;padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;animation:slideUp .5s ease}.challenge-info h3{font-size:1.1rem;color:var(--orange)}.challenge-info p{font-size:.85rem;color:var(--text-dim);margin-top:.2rem}.challenge-reward{display:flex;align-items:center;gap:.3rem;font-weight:600;color:var(--yellow)}.result-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease}.result-card{background:var(--bg-card);border-radius:2rem;padding:2.5rem;text-align:center;max-width:400px;width:90%;animation:bounceIn .5s ease;border:2px solid var(--purple)}.result-stars{font-size:3rem;margin-bottom:1rem}.result-card h2{font-size:1.8rem;margin-bottom:.5rem}.result-card p{color:var(--text-dim);margin-bottom:1.5rem}.result-reward{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:1.3rem;font-weight:700;color:var(--yellow);margin-bottom:1.5rem}.result-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.inventory-badge{position:absolute;top:-5px;right:-5px;background:var(--coral);color:#fff;font-size:.65rem;font-weight:700;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center}.theme-bar{display:flex;gap:.5rem;flex-wrap:wrap;width:100%;justify-content:center}.theme-pill{padding:.4rem 1rem;border-radius:50px;font-size:.85rem;font-weight:500;background:var(--bg-card);color:var(--text-dim);border:2px solid transparent}.theme-pill.active{border-color:var(--mint);color:var(--mint);background:#4dffb81a}.theme-pill:hover:not(.active){background:var(--bg-card-light);color:#fff}@media(max-width:768px){.salon-body{flex-direction:column}.char-preview{flex:none}.welcome h1{font-size:2rem}.face-display{font-size:5rem}.char-grid{grid-template-columns:repeat(2,1fr)}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-card-light);border-radius:3px}