body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}body{background:linear-gradient(135deg,#0a0a0f,#1a0f2e,#0f1a2e,#1e2a3a);color:#fff;font-family:Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;margin:0}.App,.puzzle-screen,body{min-height:100vh}.puzzle-screen{display:flex;flex-direction:column}@keyframes pulse{0%{box-shadow:0 0 15px #00ff004d}50%{box-shadow:0 0 30px #0f09}to{box-shadow:0 0 15px #00ff004d}}.navigation-header{align-items:center;background:linear-gradient(135deg,#0a0a1f,#1a0f2e,#0f1a2e);border-bottom:2px solid #0ff;box-shadow:0 2px 8px #00ffff4d,0 0 20px #00ffff1a;display:flex;justify-content:space-between;padding:15px 25px;position:sticky;top:0;z-index:100}.nav-back-btn{background:linear-gradient(45deg,#046,#08a);border:1px solid #0ad;border-radius:6px;box-shadow:0 0 10px #00aadd4d;color:#fff;cursor:pointer;font-size:14px;font-weight:700;padding:10px 20px;text-shadow:0 0 5px #fffc;transition:all .3s ease}.nav-back-btn:hover{background:linear-gradient(45deg,#08a,#0ad);box-shadow:0 0 15px #00aadd80;transform:translateY(-1px)}.nav-back-btn:active{transform:translateY(0)}.level-title{flex:1 1;text-align:center}.level-title h2{color:#0ff;font-size:1.5rem;font-weight:700;margin:0;text-shadow:0 0 10px #0ffc,0 0 20px #0ff6}.level-subtitle{color:#8cd;font-size:.9rem;font-style:italic;margin:2px 0 0;text-shadow:0 0 5px #8cd6}.nav-spacer{width:120px}@media (max-width:768px){.navigation-header{flex-wrap:wrap;padding:12px 15px}.level-title h2{font-size:1.2rem}.level-subtitle{font-size:.8rem}.nav-back-btn{font-size:13px;padding:8px 16px}.nav-spacer{width:80px}}.bach-puzzle-container{display:flex;flex-direction:column;min-height:100vh}.bach-puzzle{background:linear-gradient(135deg,#0a0a1f,#1a0f2e,#0f1a2e);border:1px solid #00ffff4d;border-radius:12px;box-shadow:0 4px 16px #00ffff4d,0 0 30px #00ffff1a;color:#fff;margin:0 auto;max-width:1400px;padding:20px}.playback-controls{align-items:center;display:flex;gap:30px;justify-content:center;margin-bottom:20px}.btn-mute,.btn-play,.btn-reset{background:#0ff3;border:2px solid #0ff;border-radius:8px;box-shadow:0 0 15px #00ffff4d;color:#0ff;cursor:pointer;font-size:14px;font-weight:700;height:40px;min-width:100px;text-shadow:0 0 5px #0ffc;transition:all .3s ease}.btn-mute:hover,.btn-play:hover,.btn-reset:hover:not(:disabled){background:#0ff6;box-shadow:0 0 25px #00ffff80;transform:scale(1.05)}.btn-reset:disabled{background:#00ffff0d;border-color:#00ffff4d;box-shadow:none;color:#00ffff80;cursor:not-allowed;opacity:.3;text-shadow:none}.timeline-container{background:#0014284d;border:1px solid #0ff6;border-radius:8px;box-shadow:0 0 20px #0ff3;margin-bottom:20px;overflow-x:auto}.timeline-header{background:#0028504d;border-bottom:1px solid #00ffff4d;padding:10px}.timeline-tracks{padding:10px}.timeline-track{background:#001e3c33;border:1px solid #00ffff4d;border-radius:6px;box-shadow:inset 0 0 20px #00ffff1a;margin-bottom:15px;min-height:360px;position:relative;transition:background-color .2s ease}.timeline-track.drop-hover{background:#00ffff4d;border-color:#0ff}.timeline-track{border-left:4px solid #0ff}.track-label{color:#0ff;font-size:12px;font-weight:700;left:10px;position:absolute;text-shadow:0 0 8px #0ffc;top:5px;z-index:1}.track-content{height:340px;margin-top:20px;position:relative}.beat-markers{height:15px;top:0}.beat-grid-lines,.beat-markers{left:0;position:absolute;right:0}.beat-grid-lines{bottom:0;pointer-events:none;top:20px;z-index:1}.beat-grid-line{background-color:#00ffff14;transition:opacity .2s ease}.beat-marker{border-radius:3px;color:#8b7355;font-size:8px;font-weight:700;margin-left:-10px;padding:2px 4px;position:absolute;text-align:center;top:0;transition:all .3s ease;width:20px}.beat-marker.active{background:#0ff3;box-shadow:0 0 10px #00ffff80;color:#0ff;text-shadow:0 0 8px #0ff;transform:scale(1.2)}.beat-drop-zone{border-radius:4px}.timeline-fragment{background:#d4af37e6;border:2px solid #d4af37;border-radius:6px;box-shadow:0 2px 4px #0003;cursor:grab;min-width:60px;padding:8px;transition:all .3s ease;-webkit-user-select:none;user-select:none}.timeline-fragment:hover{box-shadow:0 4px 8px #0000004d;transform:translateY(-2px)}.timeline-fragment:active{cursor:grabbing}.timeline-fragment.active{background:#0f03;border-color:#0f0}.timeline-fragment.inactive{background:#8b73554d;border-color:#8b7355;opacity:.6}.timeline-fragment[data-fragment=fragment_1]{background:#0ffc;border-color:#0ff;box-shadow:0 0 15px #0ff9,inset 0 0 10px #00ffff4d}.timeline-fragment[data-fragment=fragment_2]{background:#008b8bcc;border-color:#008b8b;box-shadow:0 0 15px #008b8b99,inset 0 0 10px #008b8b4d}.timeline-fragment[data-fragment=fragment_3]{background:#40e0d0cc;border-color:#40e0d0;box-shadow:0 0 15px #40e0d099,inset 0 0 10px #40e0d04d}.timeline-fragment[data-fragment=fragment_4]{background:#fffc;border-color:#fff;box-shadow:0 0 15px #fff9,inset 0 0 10px #ffffff4d}.timeline-fragment[data-fragment=fragment_1].inactive{background:#00ffff4d;box-shadow:0 0 8px #00ffff4d}.timeline-fragment[data-fragment=fragment_2].inactive{background:#008b8b4d;box-shadow:0 0 8px #008b8b4d}.timeline-fragment[data-fragment=fragment_3].inactive{background:#40e0d04d;box-shadow:0 0 8px #40e0d04d}.timeline-fragment[data-fragment=fragment_4].inactive{background:#ffffff4d;box-shadow:0 0 8px #ffffff4d}.fragment-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:4px}.fragment-label{color:#1a1a2e;font-size:10px;font-weight:700}.fragment-toggle{cursor:pointer;font-size:12px}.fragment-notes{align-items:center;display:flex;gap:1px;justify-content:center;margin:2px 0}.note-indicator{color:#1a1a2e;font-size:8px;opacity:.8}.more-notes{color:#1a1a2e;font-size:8px;opacity:.6}.fragment-duration{color:#1a1a2e;font-size:7px;opacity:.7;text-align:center}.fragment-bank{background:#001e3c33;border:2px solid #0ff6;border-radius:8px;box-shadow:0 0 20px #0ff3;margin-top:30px;padding:15px;transition:all .3s ease}.fragment-bank.drop-hover{background:#0ff3;border-color:#0ff;box-shadow:0 0 30px #0ff6}.fragment-bank h3{color:#0ff;font-size:16px;margin:0 0 15px;text-align:center;text-shadow:0 0 10px #0ffc}.fragments-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.fragment-item{align-items:center;background:#8b735533;border:2px solid #8b7355;border-radius:8px;cursor:grab;display:flex;justify-content:space-between;padding:15px;transition:all .3s ease;-webkit-user-select:none;user-select:none}.fragment-item:hover{background:#8b73554d;transform:translateY(-2px)}.fragment-item:active{cursor:grabbing}.fragment-item.active{background:#00ff001a;border-color:#0f0}.fragment-item.inactive{background:#8b73551a;border-color:#8b7355;opacity:.6}.fragment-name{color:#e8d5b7;font-size:13px;font-weight:700}.fragment-status{font-size:18px}.solution-hints{flex-direction:column;gap:8px}.hints-grid,.solution-hints{align-items:center;display:flex}.hints-grid{gap:12px}.hint{align-items:center;display:flex;flex-direction:column;gap:4px}.hint,.hint-light{transition:all .3s ease}.hint-light{border:1px solid #ffffff4d;border-radius:50%;height:12px;position:relative;width:12px}.hint-label{color:#fff9;font-size:9px;font-weight:700;margin-top:2px;text-shadow:0 0 3px #0ff6}.hint.correct .hint-light{animation:pulse-correct 2s infinite;background:#0f0;border-color:#0f0;box-shadow:0 0 10px #0f0c,0 0 20px #0f06,inset 0 0 5px #ffffff4d}.hint.correct .hint-label{color:#0f0;text-shadow:0 0 5px #0f0c}.hint.partial .hint-light{animation:pulse-partial 2s infinite;background:#fff;border-color:#fff;box-shadow:0 0 10px #fffc,0 0 20px #fff6,inset 0 0 5px #c8c8c84d}.hint.partial .hint-label{color:#fff;text-shadow:0 0 5px #fffc}.hint.inactive .hint-light{background:#64646433;border-color:#9696964d;box-shadow:0 0 3px #64646433}@keyframes pulse-correct{0%,to{box-shadow:0 0 10px #0f0c,0 0 20px #0f06,inset 0 0 5px #ffffff4d}50%{box-shadow:0 0 15px #0f0,0 0 30px #0f09,inset 0 0 8px #ffffff80}}@keyframes pulse-partial{0%,to{box-shadow:0 0 10px #fffc,0 0 20px #fff6,inset 0 0 5px #c8c8c84d}50%{box-shadow:0 0 15px #fff,0 0 30px #fff9,inset 0 0 8px #c8c8c880}}.victory-celebration{align-items:center;animation:fadeIn .5s ease-in;background:#000c;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.victory-content{animation:victoryGlow 2s infinite alternate;background:linear-gradient(135deg,#0a0a1f,#1a0f2e,#0f1a2e);border:2px solid #0ff;border-radius:20px;box-shadow:0 0 50px #0ff9,0 0 100px #00ffff4d;max-width:500px;padding:40px;text-align:center}.victory-title{animation:titlePulse 3s infinite;color:#0ff;font-size:28px;font-weight:700;margin-bottom:15px;text-shadow:0 0 15px #0ff}.victory-subtitle{color:#40e0d0;font-size:18px;margin-bottom:20px;text-shadow:0 0 10px #40e0d0cc}.victory-message{color:#fff;font-size:14px;line-height:1.6;margin-bottom:25px;text-shadow:0 0 5px #ffffff80}.victory-actions{display:flex;flex-wrap:wrap;gap:15px;justify-content:center}.victory-btn{border:2px solid;border-radius:8px;cursor:pointer;font-size:16px;font-weight:700;min-width:140px;padding:12px 24px;text-shadow:0 0 8px #fffc;transition:all .3s ease}.victory-btn-primary{background:linear-gradient(45deg,#008b8b,#0ff);border-color:#0ff;box-shadow:0 0 15px #00ffff4d;color:#fff}.victory-btn-primary:hover{background:linear-gradient(45deg,#0ff,#fff);box-shadow:0 0 25px #0ff9;color:#012;text-shadow:0 0 8px #012c;transform:translateY(-2px)}.victory-btn-secondary{background:linear-gradient(45deg,#046,#08a);border-color:#08a;box-shadow:0 0 15px #0088aa4d;color:#fff}.victory-btn-secondary:hover{background:linear-gradient(45deg,#08a,#0ad);box-shadow:0 0 25px #0ad9;transform:translateY(-2px)}.victory-btn:active{transform:translateY(0)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes victoryGlow{0%{box-shadow:0 0 50px #0ff9,0 0 100px #00ffff4d}to{box-shadow:0 0 70px #0ffc,0 0 140px #00ffff80}}@keyframes titlePulse{0%,to{text-shadow:0 0 15px #0ff}50%{text-shadow:0 0 25px #0ff,0 0 40px #0ffc}}@media (max-width:768px){.fragments-list{grid-template-columns:1fr}.beat-slot{font-size:8px;min-height:60px}.fragment-chip{font-size:7px}.solution-hints{display:none}.victory-content{margin:20px;padding:30px 20px}.victory-title{font-size:22px}.victory-subtitle{font-size:16px}.victory-message{font-size:12px}}.welcome-screen{align-items:center;background:linear-gradient(135deg,#012,#024 25%,#0a1428 50%,#001833 75%,#000b16);display:flex;justify-content:center;min-height:100vh;overflow:hidden;position:relative}.welcome-content{max-width:800px;padding:40px;position:relative;text-align:center;z-index:10}.title-section{margin-bottom:40px}.game-title-large{animation:titleGlow 3s ease-in-out infinite alternate;color:#0ff;font-size:4rem;font-weight:700;letter-spacing:2px;margin-bottom:20px;text-shadow:0 0 10px #0ffc,0 0 20px #00ffff80,0 0 30px #00ffff4d}.game-subtitle-large{color:#6cd;font-size:1.5rem;font-style:italic;margin-bottom:20px;text-shadow:0 0 8px #6cd9}.story-preview{margin-bottom:50px}.flavor-text{color:#8cd;font-size:1.1rem;line-height:1.6;margin:0 auto;max-width:600px;text-shadow:0 0 5px #8cd6}.action-section{margin-bottom:40px}.begin-journey-btn{background:linear-gradient(45deg,#008b8b,#0ff);border:2px solid #0ff;border-radius:8px;box-shadow:0 0 15px #00ffff4d,inset 0 0 15px #ffffff1a;color:#fff;cursor:pointer;font-size:1.3rem;font-weight:700;overflow:hidden;padding:15px 40px;position:relative;text-shadow:0 0 8px #fffc;transition:all .3s ease}.begin-journey-btn:hover{background:linear-gradient(45deg,#0ff,#fff);box-shadow:0 0 25px #0ff9,inset 0 0 20px #fff3;color:#012;text-shadow:0 0 8px #012c;transform:translateY(-2px)}.begin-journey-btn:active{transform:translateY(0)}.background-effects{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.particle{animation:float 6s ease-in-out infinite;background:#0ff;border-radius:50%;box-shadow:0 0 10px #0ffc;height:4px;position:absolute;width:4px}.particle-1{animation-delay:0s;animation-duration:8s;left:15%;top:20%}.particle-2{animation-delay:-2s;animation-duration:6s;left:80%;top:60%}.particle-3{animation-delay:-4s;animation-duration:7s;left:20%;top:80%}.particle-4{animation-delay:-6s;animation-duration:9s;left:70%;top:30%}@keyframes titleGlow{0%{text-shadow:0 0 10px #0ffc,0 0 20px #00ffff80,0 0 30px #00ffff4d}to{text-shadow:0 0 15px #0ff,0 0 25px #00ffffb3,0 0 35px #00ffff80}}@keyframes float{0%,to{opacity:.3;transform:translateY(0) translateX(0)}25%{opacity:.7;transform:translateY(-20px) translateX(10px)}50%{opacity:1;transform:translateY(-40px) translateX(-5px)}75%{opacity:.7;transform:translateY(-20px) translateX(-10px)}}@media (max-width:768px){.game-title-large{font-size:2.5rem}.game-subtitle-large{font-size:1.2rem}.flavor-text{font-size:1rem}.welcome-content{padding:20px}}.level-selector{background:linear-gradient(135deg,#012,#024 25%,#0a1428 50%,#001833 75%,#000b16);min-height:100vh;padding:20px}.level-selector-content{margin:0 auto;max-width:1200px}.level-selector-header{margin-bottom:40px;position:relative;text-align:center}.back-btn{background:linear-gradient(45deg,#046,#08a);border:1px solid #0ff;border-radius:6px;box-shadow:0 0 10px #00ffff4d;color:#fff;cursor:pointer;font-size:1rem;left:0;padding:10px 20px;position:absolute;text-shadow:0 0 5px #fffc;top:0;transition:all .3s ease}.back-btn:hover{background:linear-gradient(45deg,#08a,#0ff);box-shadow:0 0 15px #00ffff80;transform:translateY(-1px)}.selector-title{color:#0ff;font-size:2.5rem;font-weight:700;letter-spacing:1px;margin-bottom:15px;text-shadow:0 0 10px #0ffc,0 0 20px #00ffff80}.selector-subtitle{color:#8cd;font-size:1.2rem;font-style:italic;text-shadow:0 0 5px #8cd6}.levels-grid{grid-gap:25px;display:grid;gap:25px;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));margin-top:40px}.level-card{background:linear-gradient(135deg,#002850cc,#003c6499);border:2px solid #046;border-radius:12px;overflow:hidden;padding:25px;position:relative;transition:all .3s ease}.level-card:before{background:linear-gradient(45deg,#0000 30%,#00ffff1a 50%,#0000 70%);bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease}.level-card.level-available{border-color:#008b8b;cursor:pointer}.level-card.level-available:hover{border-color:#0ff;box-shadow:0 0 20px #00ffff4d;transform:translateY(-3px)}.level-card.level-available:hover:before{opacity:1}.level-card.level-completed{border-color:#0f8;box-shadow:0 0 15px #0f83;cursor:pointer}.level-card.level-completed:hover{border-color:#0fa;box-shadow:0 0 25px #0fa6;transform:translateY(-3px)}.level-card.level-locked{border-color:#335;cursor:not-allowed;opacity:.5}.level-card-content{position:relative;z-index:2}.level-header{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:15px}.level-name{color:#fff;flex:1 1;font-size:1.4rem;font-weight:700;margin:0;text-shadow:0 0 8px #fff9}.level-status-indicator{margin-left:10px}.status-icon{display:inline-block;font-size:1.2rem}.level-completed .status-icon{color:#0f8;text-shadow:0 0 8px #0f8c}.level-locked .status-icon{color:#668}.level-description{color:#acd;font-size:1rem;line-height:1.4;margin-bottom:20px;text-shadow:0 0 3px #acd6}.level-info{grid-gap:15px;display:grid;gap:15px;grid-template-columns:1fr 1fr 1fr;margin-bottom:15px}.info-item{text-align:center}.info-label{color:#6ac;display:block;font-size:.9rem;margin-bottom:5px;text-shadow:0 0 3px #6ac6}.info-value{color:#fff;display:block;font-size:1.1rem;font-weight:700;text-shadow:0 0 5px #fff9}.locked-message{color:#89a;font-size:.9rem;font-style:italic;margin-top:10px;text-align:center;text-shadow:0 0 3px #89a6}@media (max-width:768px){.level-selector{padding:15px}.selector-title{font-size:2rem}.selector-subtitle{font-size:1rem}.levels-grid{gap:20px;grid-template-columns:1fr}.level-card{padding:20px}.level-info{gap:10px;grid-template-columns:1fr}.back-btn{margin-bottom:20px;position:static}}
/*# sourceMappingURL=main.8930457f.css.map*/