:root{--primary: #0ea5e9;--primary-light: #38bdf8;--secondary: #f59e0b;--success: #22c55e;--danger: #ef4444;--bg-dark: #0c1929;--bg-card: rgba(255, 255, 255, .06);--text: #f0f9ff;--text-dim: rgba(240, 249, 255, .55);font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.4}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;min-height:100dvh;background:var(--bg-dark);color:var(--text);overflow-x:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}.screen{flex:1;display:flex;flex-direction:column;align-items:center;padding:1.5rem;animation:fadeIn .3s ease-out}.screen-header{display:flex;align-items:center;gap:1.5rem;margin-bottom:.5rem}.screen-title{font-size:1.8rem;font-weight:800;margin-bottom:1rem;background:linear-gradient(135deg,var(--secondary),#ff6b6b,var(--primary-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center}.coins-display{font-size:1.1rem;font-weight:700;color:var(--secondary);background:#f59e0b1f;padding:.4rem .9rem;border-radius:2rem;border:1px solid rgba(245,158,11,.25)}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 2rem;border:none;border-radius:1rem;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.05em;position:relative;overflow:hidden}.btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,transparent 50%);pointer-events:none}.btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 8px 25px #0000004d}.btn:active{transform:translateY(0) scale(.98)}.btn-play{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;font-size:1.3rem;padding:1rem 2.5rem;animation:pulse 2s ease-in-out infinite}.btn-garage{background:linear-gradient(135deg,var(--primary),#0369a1);color:#fff}.btn-next,.btn-start{background:linear-gradient(135deg,var(--secondary),#ea580c);color:#fff;font-size:1.2rem;padding:1rem 2.5rem}.btn-start:disabled,.btn-next:disabled{background:#334155;color:#64748b;cursor:not-allowed;transform:none;box-shadow:none;animation:none}.btn-icon{font-size:1.3em}.btn-back{position:absolute;top:1rem;left:1rem;background:var(--bg-card);border:1px solid rgba(255,255,255,.1);color:var(--text);padding:.5rem 1rem;border-radius:.75rem;font-size:.95rem;font-weight:600;cursor:pointer;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .2s}.btn-back:hover{background:#ffffff1f}.home-screen{background:radial-gradient(ellipse at 50% 30%,#0c4a6e 0%,var(--bg-dark) 70%);justify-content:center;text-align:center;position:relative;overflow:hidden}.water-bg{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;z-index:1;pointer-events:none}.wave-line{position:absolute;width:200%;height:3px;left:-50%;background:linear-gradient(90deg,transparent 0%,rgba(56,189,248,.15) 25%,rgba(56,189,248,.25) 50%,rgba(56,189,248,.15) 75%,transparent 100%);animation:waveScroll 6s linear infinite}.home-content{position:relative;z-index:2;max-width:600px}.title-emoji{font-size:4rem;animation:bounce 2s ease-in-out infinite;margin-bottom:.5rem}.game-title{display:flex;flex-direction:column;line-height:1;margin-bottom:1rem}.title-line1{font-size:3.2rem;font-weight:900;background:linear-gradient(135deg,#38bdf8,#0ea5e9,#0284c7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.1em}.title-line2{font-size:3.2rem;font-weight:900;background:linear-gradient(135deg,#fbbf24,#f59e0b,#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.1em}.home-subtitle{color:var(--text-dim);font-size:1rem;margin-bottom:1.5rem;max-width:420px;margin-left:auto;margin-right:auto}.home-stats{display:flex;gap:1.5rem;justify-content:center;margin-bottom:2rem}.home-stat{font-size:.95rem;color:var(--secondary);font-weight:600;background:#f59e0b14;padding:.35rem .8rem;border-radius:1rem}.home-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.select-screen,.track-screen{background:linear-gradient(180deg,#0c3552 0%,var(--bg-dark) 100%);padding-top:4rem;position:relative}.boat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.8rem;max-width:700px;width:100%;margin-bottom:1.2rem}.boat-card{background:var(--bg-card);border:2px solid rgba(255,255,255,.08);border-radius:1rem;padding:.8rem;text-align:center;cursor:pointer;transition:all .25s ease;position:relative;overflow:hidden}.boat-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--boat-color, var(--primary));opacity:.5}.boat-card:hover:not(.locked){transform:translateY(-3px);border-color:var(--boat-color, var(--primary));box-shadow:0 8px 30px #0000004d}.boat-card.selected{border-color:var(--boat-color, var(--primary));box-shadow:0 0 20px color-mix(in srgb,var(--boat-color, var(--primary)) 30%,transparent)}.boat-card.selected:before{opacity:1;height:4px}.boat-card.locked{opacity:.5;cursor:default}.boat-card-emoji{font-size:2.2rem;margin-bottom:.2rem}.boat-card-name{font-weight:700;font-size:.8rem;margin-bottom:.3rem}.boat-cost{color:var(--secondary);font-size:.75rem;font-weight:600}.boat-stats{display:flex;flex-direction:column;gap:.2rem;margin-top:.3rem}.stat-bar{display:flex;align-items:center;gap:.3rem}.stat-label-sm{font-size:.6rem;font-weight:700;color:var(--text-dim);width:24px;text-align:right}.stat-track{flex:1;height:5px;background:#ffffff14;border-radius:3px;overflow:hidden}.stat-fill{height:100%;border-radius:3px;transition:width .3s}.track-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;max-width:500px;width:100%;margin-bottom:1.2rem}.track-card{background:var(--bg-card);border:2px solid rgba(255,255,255,.08);border-radius:1rem;padding:1rem;text-align:center;cursor:pointer;transition:all .25s ease}.track-card:hover:not(.locked){transform:translateY(-3px);border-color:var(--primary);box-shadow:0 8px 30px #0000004d}.track-card.selected{border-color:var(--primary);box-shadow:0 0 20px #0ea5e940}.track-card.locked{opacity:.5;cursor:default}.track-card-emoji{font-size:2rem;margin-bottom:.2rem}.track-card-name{font-weight:700;font-size:.9rem;margin-bottom:.2rem}.track-difficulty{font-size:.75rem;font-weight:700;text-transform:uppercase}.track-req{color:var(--secondary);font-size:.7rem;font-weight:600}.selected-info{display:flex;align-items:center;gap:1rem;background:var(--bg-card);border:1px solid rgba(255,255,255,.1);border-radius:1rem;padding:1rem 1.5rem;max-width:500px;width:100%;margin-bottom:1.5rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.selected-emoji{font-size:2.8rem}.selected-details h3{font-size:1.1rem;font-weight:700;margin-bottom:.15rem}.selected-desc{color:var(--text-dim);font-size:.85rem}.track-laps{color:var(--primary-light);font-size:.85rem;font-weight:600;margin-top:.2rem}.game-screen{padding:0;background:#0a1628;position:relative;overflow:hidden}.game-hud{display:flex;align-items:center;gap:.8rem;padding:.5rem .8rem;background:#000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08);z-index:10;flex-shrink:0}.hud-item{display:flex;flex-direction:column;align-items:center;min-width:60px}.hud-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);font-weight:600}.hud-value{font-size:1rem;font-weight:800;font-variant-numeric:tabular-nums}.hud-position-value{color:var(--secondary);font-size:1.2rem}.hud-coins-value{color:var(--secondary)}.hud-boost{flex:1;max-width:160px}.boost-bar{width:100%;height:12px;background:#ffffff14;border-radius:6px;overflow:hidden;margin-top:2px;border:1px solid rgba(255,255,255,.08)}.boost-fill{height:100%;border-radius:6px;transition:width .1s linear,background-color .3s;position:relative}.boost-fill:after{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.3),transparent);border-radius:6px 6px 0 0}.game-area-wrapper{flex:1;display:flex;justify-content:center;align-items:flex-start;overflow:hidden;position:relative}.game-area{position:relative;overflow:hidden;border:2px solid rgba(255,255,255,.06)}.game-area.hit-flash{animation:hitFlash .15s ease-out}.water-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1;overflow:hidden}.wave-line-game{position:absolute;width:200%;height:2px;left:-50%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.08) 25%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.08) 75%,transparent 100%);animation:waveScroll 5s linear infinite}.boundary-buoy{position:absolute;width:8px;height:8px;border-radius:50%;background:#f97316;box-shadow:0 0 6px #f9731699;z-index:3}.danger-zone-top,.danger-zone-bottom{position:absolute;background:#0f172a59;pointer-events:none;z-index:2}.player-boat{position:absolute;display:flex;align-items:center;justify-content:center;font-size:2rem;z-index:5;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));transition:top .05s linear}.player-boat:before{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);width:24px;height:6px;background:linear-gradient(to left,rgba(255,255,255,.25),transparent);border-radius:50%}.player-boat.boosted{filter:drop-shadow(0 0 14px rgba(245,158,11,.8)) brightness(1.1)}.player-boat.boosted:before{background:linear-gradient(to left,rgba(245,158,11,.5),transparent);width:32px}.player-boat.shielded{filter:drop-shadow(0 0 14px rgba(59,130,246,.7))}.player-boat.hit{animation:shake .2s ease-out;filter:drop-shadow(0 0 10px rgba(239,68,68,.7))}.shield-ring{position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;border:2px solid rgba(59,130,246,.5);border-radius:50%;animation:shieldPulse 1.5s ease-in-out infinite;pointer-events:none}.ai-boat{position:absolute;display:flex;align-items:center;justify-content:center;font-size:1.6rem;z-index:4;opacity:.85;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));pointer-events:none}.ai-boat.boosted{filter:drop-shadow(0 0 10px rgba(245,158,11,.6))}.ai-boat.hit{opacity:.5}.game-object{position:absolute;display:flex;align-items:center;justify-content:center;font-size:1.3rem;z-index:3;pointer-events:none}.object-star,.object-coin{animation:wobble .8s ease-in-out infinite;filter:drop-shadow(0 0 5px rgba(245,158,11,.5))}.object-boost{animation:wobble .6s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(34,197,94,.6))}.object-shield{animation:wobble 1s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(59,130,246,.6))}.object-obstacle{filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}.speed-lines{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1;overflow:hidden}.speed-line{position:absolute;width:60px;height:2px;left:0;background:linear-gradient(to right,rgba(245,158,11,.4),transparent);animation:speedLineMove .3s linear infinite}.countdown-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#00000080;z-index:20}.countdown-number{font-size:6rem;font-weight:900;color:#fff;text-shadow:0 0 40px rgba(14,165,233,.6);animation:countdownPop .5s ease-out}.lap-flash{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0ea5e926;z-index:15;pointer-events:none}.lap-text{font-size:2.5rem;font-weight:900;color:#fff;text-shadow:0 0 20px rgba(14,165,233,.5);animation:lapPop .4s ease-out}.lap-bonus{font-size:1.2rem;font-weight:700;color:var(--secondary);margin-top:.5rem;animation:lapPop .4s ease-out .2s backwards}.minimap{position:absolute;bottom:8px;right:8px;width:120px;height:10px;background:#00000080;border-radius:5px;border:1px solid rgba(255,255,255,.15);z-index:10;overflow:hidden}.minimap-track{position:relative;width:100%;height:100%}.minimap-player{position:absolute;top:0;width:6px;height:100%;background:var(--secondary);border-radius:2px;box-shadow:0 0 4px var(--secondary);z-index:2}.minimap-ai{position:absolute;top:1px;width:4px;height:calc(100% - 2px);background:#fff6;border-radius:2px;z-index:1}.controls-hint{position:absolute;bottom:8px;left:50%;transform:translate(-50%);color:#fff3;font-size:.65rem;pointer-events:none;z-index:2;white-space:nowrap}.boost-btn{position:fixed;bottom:2rem;right:2rem;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#ea580c);border:3px solid rgba(255,255,255,.25);font-size:1.8rem;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:20;box-shadow:0 4px 20px #f59e0b66;transition:transform .1s;-webkit-user-select:none;user-select:none}.boost-btn:active{transform:scale(.9);box-shadow:0 2px 10px #f59e0b99}.results-screen{background:radial-gradient(ellipse at 50% 30%,#0c4a6e 0%,var(--bg-dark) 70%);justify-content:center;text-align:center}.results-position{display:flex;flex-direction:column;align-items:center;gap:.3rem;margin-bottom:2rem}.position-emoji{font-size:5rem;animation:bounce 1.5s ease-in-out infinite}.position-text{font-size:2rem;font-weight:900}.results-stats{display:flex;gap:1.5rem;margin-bottom:2rem;flex-wrap:wrap;justify-content:center}.result-stat{display:flex;flex-direction:column;align-items:center;background:var(--bg-card);border:1px solid rgba(255,255,255,.08);border-radius:1rem;padding:1rem 1.5rem;min-width:110px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.stat-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:.3rem}.stat-value{font-size:1.4rem;font-weight:800;color:var(--primary-light)}.stat-coins{color:var(--secondary)}.results-buttons{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.garage-screen{background:linear-gradient(180deg,#0c3552 0%,var(--bg-dark) 100%);padding-top:4rem;position:relative}.garage-boat-list{display:flex;gap:.5rem;margin-bottom:1.5rem;flex-wrap:wrap;justify-content:center}.garage-boat-btn{width:52px;height:52px;border-radius:.75rem;background:var(--bg-card);border:2px solid rgba(255,255,255,.08);font-size:1.8rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.garage-boat-btn:hover{border-color:var(--primary)}.garage-boat-btn.active{border-color:var(--secondary);box-shadow:0 0 12px #f59e0b4d}.garage-details{max-width:450px;width:100%;background:var(--bg-card);border:1px solid rgba(255,255,255,.08);border-radius:1rem;padding:1.2rem}.garage-boat-header{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem;padding-bottom:.8rem;border-bottom:1px solid rgba(255,255,255,.06)}.garage-boat-emoji{font-size:2.5rem}.garage-boat-header h3{font-size:1.2rem;font-weight:800}.upgrade-list{display:flex;flex-direction:column;gap:.8rem}.upgrade-row{display:flex;align-items:center;gap:.8rem}.upgrade-info{flex:1}.upgrade-name{font-size:.85rem;font-weight:700;margin-bottom:.2rem;display:block}.upgrade-bar{display:flex;align-items:center;gap:.5rem}.upgrade-track{flex:1;height:8px;background:#ffffff0f;border-radius:4px;overflow:hidden}.upgrade-fill{height:100%;border-radius:4px;transition:width .3s}.upgrade-level{font-size:.7rem;font-weight:700;color:var(--text-dim);min-width:32px}.btn-upgrade{padding:.4rem .8rem;border:1px solid rgba(255,255,255,.15);border-radius:.5rem;background:#ffffff0a;color:var(--text);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s;min-width:80px}.btn-upgrade.affordable{border-color:var(--secondary);color:var(--secondary)}.btn-upgrade.affordable:hover{background:#f59e0b26}.btn-upgrade.maxed{color:var(--success);border-color:var(--success);cursor:default}.btn-upgrade:disabled:not(.maxed){opacity:.4;cursor:not-allowed}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes pulse{0%,to{box-shadow:0 0 #22c55e66}50%{box-shadow:0 0 0 10px #22c55e00}}@keyframes waveScroll{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes wobble{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.06)}}@keyframes hitFlash{0%{box-shadow:inset 0 0 60px #ef444466}to{box-shadow:none}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}@keyframes shieldPulse{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:.3}}@keyframes countdownPop{0%{transform:scale(2);opacity:0}60%{transform:scale(.9);opacity:1}to{transform:scale(1)}}@keyframes lapPop{0%{transform:scale(1.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes speedLineMove{0%{transform:translate(800px)}to{transform:translate(-100px)}}@keyframes starPop{0%{transform:scale(0) rotate(-180deg);opacity:0}60%{transform:scale(1.3) rotate(10deg)}to{transform:scale(1) rotate(0);opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:600px){.title-line1,.title-line2{font-size:2.2rem}.title-emoji{font-size:3rem}.screen-title{font-size:1.4rem}.boat-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:.6rem}.boat-card{padding:.6rem}.boat-card-emoji{font-size:1.8rem}.track-grid{grid-template-columns:repeat(2,1fr);gap:.6rem}.selected-info{flex-direction:column;text-align:center}.btn{padding:.75rem 1.5rem;font-size:1rem}.btn-play{font-size:1.2rem;padding:.9rem 2rem}.results-stats{gap:.75rem}.result-stat{padding:.75rem 1rem;min-width:90px}.stat-value{font-size:1.2rem}.position-emoji{font-size:3.5rem}.position-text{font-size:1.5rem}.countdown-number{font-size:4rem}.boost-btn{width:52px;height:52px;font-size:1.4rem;bottom:1.5rem;right:1.5rem}.garage-boat-btn{width:44px;height:44px;font-size:1.5rem}}@media(max-width:400px){.home-buttons,.results-buttons{flex-direction:column;align-items:center}.boat-grid{grid-template-columns:repeat(2,1fr)}}