@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap";:root{--bg-primary: #0f1729;--bg-secondary: #1a2340;--bg-card: #1e2a4a;--accent-orange: #ff6b35;--accent-yellow: #ffc107;--accent-blue: #4fc3f7;--accent-green: #66bb6a;--accent-red: #ef5350;--accent-purple: #ab47bc;--text-primary: #ffffff;--text-secondary: #b0bec5;--gold: #ffd700;--shadow-glow: 0 0 20px rgba(255, 107, 53, .3);font-family:Fredoka,sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg-primary);color:var(--text-primary);overflow-x:hidden}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--accent-orange);border-radius:4px}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.95)}to{transform:scale(1);opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes dash{to{stroke-dashoffset:0}}@keyframes roadMove{0%{transform:translateY(0)}to{transform:translateY(60px)}}.app{min-height:100vh;display:flex;flex-direction:column}.top-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:linear-gradient(135deg,var(--bg-secondary),#0d1b3e);border-bottom:2px solid rgba(255,107,53,.2);position:sticky;top:0;z-index:100}.top-bar .logo{display:flex;align-items:center;gap:10px;font-size:1.4rem;font-weight:700;cursor:pointer}.top-bar .logo-icon{font-size:1.8rem}.top-bar .logo span{background:linear-gradient(90deg,var(--accent-orange),var(--accent-yellow));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.stats-bar{display:flex;gap:20px;align-items:center}.stat-item{display:flex;align-items:center;gap:6px;font-weight:600;font-size:.95rem}.stat-item .icon{font-size:1.2rem}.stat-item.coins{color:var(--gold)}.stat-item.level{color:var(--accent-blue)}.stat-item.vehicles{color:var(--accent-green)}.nav-tabs{display:flex;justify-content:center;gap:8px;padding:12px 24px;background:#1a234099;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.nav-tab{display:flex;align-items:center;gap:8px;padding:10px 22px;border:2px solid transparent;border-radius:50px;background:var(--bg-card);color:var(--text-secondary);font-family:Fredoka,sans-serif;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s ease}.nav-tab:hover{border-color:#ff6b354d;color:var(--text-primary);transform:translateY(-2px)}.nav-tab.active{background:linear-gradient(135deg,var(--accent-orange),#ff8f5e);color:#fff;border-color:transparent;box-shadow:var(--shadow-glow)}.home-screen{flex:1;display:flex;flex-direction:column;align-items:center;padding:30px 24px;animation:slideUp .6s ease}.hero{text-align:center;margin-bottom:40px}.hero h1{font-size:2.8rem;font-weight:700;margin-bottom:12px;background:linear-gradient(90deg,var(--accent-orange),var(--accent-yellow),var(--accent-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;animation:shimmer 3s linear infinite}.hero p{color:var(--text-secondary);font-size:1.15rem;max-width:500px;margin:0 auto}.vehicle-showcase{display:flex;gap:20px;margin:30px 0;flex-wrap:wrap;justify-content:center}.showcase-vehicle{width:120px;height:120px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:3.5rem;background:var(--bg-card);border:2px solid rgba(255,255,255,.08);cursor:pointer;transition:all .3s ease;animation:float 3s ease-in-out infinite}.showcase-vehicle:nth-child(2){animation-delay:.5s}.showcase-vehicle:nth-child(3){animation-delay:1s}.showcase-vehicle:nth-child(4){animation-delay:1.5s}.showcase-vehicle:nth-child(5){animation-delay:2s}.showcase-vehicle:hover{transform:translateY(-8px) scale(1.08);border-color:var(--accent-orange);box-shadow:var(--shadow-glow)}.quick-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;width:100%;max-width:700px;margin-top:20px}.quick-action{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 16px;border-radius:16px;background:var(--bg-card);border:2px solid rgba(255,255,255,.06);cursor:pointer;transition:all .3s ease;font-family:Fredoka,sans-serif;color:var(--text-primary);font-weight:600;font-size:1rem}.quick-action:hover{border-color:var(--accent-orange);transform:translateY(-4px);box-shadow:var(--shadow-glow)}.quick-action .qa-icon{font-size:2.2rem}.quick-action.race{border-left:4px solid var(--accent-red)}.quick-action.missions{border-left:4px solid var(--accent-blue)}.quick-action.garage{border-left:4px solid var(--accent-green)}.quick-action.mini{border-left:4px solid var(--accent-purple)}.garage{flex:1;padding:24px;animation:slideUp .5s ease}.garage-header{text-align:center;margin-bottom:30px}.garage-header h2{font-size:2rem;margin-bottom:8px}.garage-header p{color:var(--text-secondary)}.vehicle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;max-width:1000px;margin:0 auto}.vehicle-card{background:var(--bg-card);border-radius:16px;border:2px solid rgba(255,255,255,.06);overflow:hidden;transition:all .3s ease;animation:slideUp .5s ease backwards}.vehicle-card:nth-child(1){animation-delay:.1s}.vehicle-card:nth-child(2){animation-delay:.2s}.vehicle-card:nth-child(3){animation-delay:.3s}.vehicle-card:nth-child(4){animation-delay:.4s}.vehicle-card:nth-child(5){animation-delay:.5s}.vehicle-card:hover{border-color:var(--accent-orange);transform:translateY(-4px);box-shadow:0 8px 30px #0000004d}.vehicle-card.locked{opacity:.6;filter:grayscale(.5)}.vehicle-card.locked:hover{opacity:.8;filter:grayscale(.2)}.vc-display{height:120px;display:flex;align-items:center;justify-content:center;font-size:4rem;position:relative}.vc-display .lock-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;font-size:2rem;border-radius:0}.vc-info{padding:16px}.vc-name{font-size:1.2rem;font-weight:700;margin-bottom:4px}.vc-type{color:var(--text-secondary);font-size:.85rem;margin-bottom:10px;text-transform:uppercase;letter-spacing:.08em}.vc-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}.vc-stat{display:flex;flex-direction:column;gap:4px}.vc-stat-label{font-size:.7rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em}.vc-stat-bar{height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}.vc-stat-fill{height:100%;border-radius:3px;transition:width .6s ease}.vc-actions{display:flex;gap:8px}.btn{flex:1;padding:10px 16px;border:none;border-radius:10px;font-family:Fredoka,sans-serif;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s ease}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn-primary{background:linear-gradient(135deg,var(--accent-orange),#ff8f5e);color:#fff}.btn-secondary{background:#ffffff14;color:var(--text-primary);border:1px solid rgba(255,255,255,.12)}.btn-unlock{background:linear-gradient(135deg,var(--gold),#ffab00);color:#1a1a2e}.btn-full{width:100%}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:200;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:var(--bg-secondary);border-radius:20px;padding:30px;max-width:500px;width:90%;max-height:85vh;overflow-y:auto;animation:bounceIn .4s ease;border:2px solid rgba(255,107,53,.2)}.modal h2{font-size:1.6rem;margin-bottom:20px;text-align:center}.modal-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--text-secondary);font-size:1.5rem;cursor:pointer}.color-picker{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0;justify-content:center}.color-swatch{width:44px;height:44px;border-radius:12px;border:3px solid transparent;cursor:pointer;transition:all .2s ease}.color-swatch:hover{transform:scale(1.15)}.color-swatch.selected{border-color:#fff;box-shadow:0 0 12px #ffffff4d}.customize-section{margin:20px 0}.customize-section h3{font-size:1rem;color:var(--text-secondary);margin-bottom:10px}.upgrade-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.upgrade-item{background:var(--bg-card);padding:12px;border-radius:12px;text-align:center;cursor:pointer;border:2px solid transparent;transition:all .2s ease}.upgrade-item:hover{border-color:var(--accent-orange)}.upgrade-item .up-icon{font-size:1.5rem;margin-bottom:6px}.upgrade-item .up-name{font-weight:600;font-size:.85rem}.upgrade-item .up-cost{color:var(--gold);font-size:.8rem}.race-screen{flex:1;display:flex;flex-direction:column;align-items:center;padding:24px;animation:slideUp .5s ease}.race-select{text-align:center;max-width:600px;width:100%}.race-select h2{font-size:2rem;margin-bottom:8px}.race-select p{color:var(--text-secondary);margin-bottom:24px}.track-options{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.track-card{background:var(--bg-card);border-radius:16px;padding:24px;border:2px solid rgba(255,255,255,.06);cursor:pointer;transition:all .3s ease;text-align:center}.track-card:hover{border-color:var(--accent-orange);transform:translateY(-4px)}.track-card .track-icon{font-size:3rem;margin-bottom:10px}.track-card .track-name{font-size:1.2rem;font-weight:700;margin-bottom:4px}.track-card .track-diff{font-size:.85rem;color:var(--text-secondary)}.game-area{width:100%;max-width:800px;position:relative}.game-canvas-wrapper{width:100%;aspect-ratio:16/10;background:#1a3a1a;border-radius:16px;overflow:hidden;border:3px solid rgba(255,107,53,.3);position:relative}.game-canvas-wrapper canvas{width:100%;height:100%;display:block}.game-hud{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;pointer-events:none;z-index:10}.hud-item{background:#0009;padding:6px 14px;border-radius:20px;font-weight:600;font-size:.9rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.game-controls{display:flex;justify-content:center;gap:12px;margin-top:16px}.control-btn{width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,.15);background:var(--bg-card);color:#fff;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;user-select:none;-webkit-user-select:none}.control-btn:active{background:var(--accent-orange);transform:scale(.9)}.control-btn.go{width:80px;height:80px;font-size:1.2rem;font-weight:700;background:linear-gradient(135deg,var(--accent-green),#43a047);border-color:transparent}.missions-screen{flex:1;padding:24px;animation:slideUp .5s ease}.missions-header{text-align:center;margin-bottom:30px}.missions-header h2{font-size:2rem;margin-bottom:8px}.missions-header p{color:var(--text-secondary)}.missions-list{display:flex;flex-direction:column;gap:14px;max-width:700px;margin:0 auto}.mission-card{display:flex;align-items:center;gap:16px;background:var(--bg-card);border-radius:16px;padding:20px;border:2px solid rgba(255,255,255,.06);cursor:pointer;transition:all .3s ease;animation:slideIn .5s ease backwards}.mission-card:nth-child(1){animation-delay:.1s}.mission-card:nth-child(2){animation-delay:.2s}.mission-card:nth-child(3){animation-delay:.3s}.mission-card:nth-child(4){animation-delay:.4s}.mission-card:nth-child(5){animation-delay:.5s}.mission-card:hover{border-color:var(--accent-blue);transform:translate(6px)}.mission-card.completed{border-color:var(--accent-green);opacity:.8}.mission-card.locked{opacity:.5;cursor:default}.mission-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;flex-shrink:0}.mission-info{flex:1}.mission-name{font-weight:700;font-size:1.1rem;margin-bottom:2px}.mission-desc{color:var(--text-secondary);font-size:.85rem;margin-bottom:8px}.mission-reward{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--gold);font-weight:600}.mission-status{padding:6px 14px;border-radius:20px;font-size:.8rem;font-weight:600}.mission-status.go{background:linear-gradient(135deg,var(--accent-orange),#ff8f5e);color:#fff}.mission-status.done{background:#66bb6a33;color:var(--accent-green)}.mission-status.locked-status{background:#ffffff0f;color:var(--text-secondary)}.mini-games{flex:1;padding:24px;animation:slideUp .5s ease}.mini-games-header{text-align:center;margin-bottom:30px}.mini-games-header h2{font-size:2rem;margin-bottom:8px}.mini-games-header p{color:var(--text-secondary)}.minigame-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;max-width:800px;margin:0 auto}.minigame-card{background:var(--bg-card);border-radius:16px;padding:28px 20px;border:2px solid rgba(255,255,255,.06);text-align:center;cursor:pointer;transition:all .3s ease}.minigame-card:hover{border-color:var(--accent-purple);transform:translateY(-6px);box-shadow:0 8px 30px #ab47bc33}.minigame-icon{font-size:3rem;margin-bottom:14px}.minigame-name{font-weight:700;font-size:1.15rem;margin-bottom:6px}.minigame-desc{color:var(--text-secondary);font-size:.85rem;margin-bottom:14px}.high-score{font-size:.85rem;color:var(--gold);font-weight:600}.results-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;animation:bounceIn .5s ease}.results-trophy{font-size:5rem;margin-bottom:20px}.results-title{font-size:2.2rem;font-weight:700;margin-bottom:8px}.results-subtitle{color:var(--text-secondary);font-size:1.1rem;margin-bottom:30px}.results-stats{display:flex;gap:30px;margin-bottom:30px}.result-stat{text-align:center}.result-stat .rs-value{font-size:2rem;font-weight:700;color:var(--accent-orange)}.result-stat .rs-label{font-size:.8rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em}.results-actions{display:flex;gap:12px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:var(--bg-card);border:2px solid var(--accent-green);padding:14px 28px;border-radius:14px;font-weight:600;z-index:300;animation:slideUp .3s ease,fadeOut .3s ease 2.2s forwards;box-shadow:0 8px 30px #0006}@keyframes fadeOut{to{opacity:0;transform:translate(-50%) translateY(20px)}}@media(max-width:600px){.hero h1{font-size:2rem}.track-options,.vehicle-grid{grid-template-columns:1fr}.nav-tabs{flex-wrap:wrap}.nav-tab{padding:8px 16px;font-size:.85rem}.stats-bar{gap:12px}.stat-item{font-size:.8rem}.results-stats{gap:16px}}