body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}body{background-color:#121212;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;text-align:center;padding:2rem}.App{max-width:600px;margin:0 auto}h1{font-size:3rem}h2{font-size:2rem;color:#1db954}.login-btn,.quiz-btn,.restart-btn{background-color:#1db954;color:#fff;border:none;padding:15px 30px;border-radius:50px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:background-color .2s;text-decoration:none;display:inline-block;margin-top:2rem}.login-btn:hover,.quiz-btn:hover,.restart-btn:hover{background-color:#1ed760}.quiz-container{margin-top:2rem}.question-counter{font-size:1.2rem;margin-bottom:1rem}.results-container{margin-top:3rem}.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}.option-btn{background-color:#282828;border:1px solid #404040;color:#fff;padding:10px;border-radius:8px;font-size:1rem;cursor:pointer;transition:background-color .2s;display:flex;align-items:center;width:100%;box-sizing:border-box;overflow:hidden}.option-btn:hover{background-color:#383838}.option-btn:disabled{cursor:not-allowed;opacity:.7}.option-btn.correct{background-color:#28a745;border-color:#28a745;color:#fff}.option-btn.incorrect{background-color:#dc3545;border-color:#dc3545;color:#fff}.timer{font-size:1.5rem;font-weight:700;color:#1db954;margin:1.5rem auto;padding:10px;border:2px solid #1DB954;border-radius:50%;width:60px;height:60px;display:flex;align-items:center;justify-content:center}.score-container{margin:10px 0 2rem;min-height:2em}.score-wrapper{display:inline-block;position:relative}.score{font-size:1.5rem;font-weight:700;color:#1db954}.points-gained{position:absolute;top:0;left:100%;margin-left:10px;white-space:nowrap;font-size:1.5rem;font-weight:700;color:#28a745;animation:fadeInThenOut 2s forwards}@keyframes fadeInThenOut{0%{opacity:0;transform:translateY(10px)}15%{opacity:1;transform:translateY(0)}85%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}.combo-display-area{min-height:3rem;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.combo-indicator{color:#1db954;font-weight:700;font-size:1.6rem;text-shadow:2px 2px 4px rgba(0,0,0,.5);animation:combo-pop .3s ease-out}.combo-indicator.combo-hot{color:#ff9800}.combo-indicator.combo-max{color:#f44336}.combo-break-indicator{color:#dc3545;font-weight:700;font-size:1.6rem;animation:shake-and-fade 1s ease-out}@keyframes combo-pop{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes shake-and-fade{0%{transform:translate(0);opacity:1}10%{transform:translate(-10px)}20%{transform:translate(10px)}30%{transform:translate(-10px)}40%{transform:translate(10px)}50%{transform:translate(0)}70%{opacity:1}to{opacity:0;transform:translateY(20px)}}.highscore-text{font-size:1.2rem;color:#aaa;margin-top:-1rem;margin-bottom:2rem}.new-highscore-message{font-size:1.5rem;font-weight:700;color:#ffeb3b;text-shadow:2px 2px 4px rgba(0,0,0,.5);animation:new-highscore-pop .5s ease-out}@keyframes new-highscore-pop{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.secondary-btn{background-color:transparent;color:#aaa;border:1px solid #444;padding:10px 20px;border-radius:50px;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .2s;text-decoration:none;display:block;margin:1.5rem auto 0;width:200px}.secondary-btn:hover{background-color:#282828;color:#fff;border-color:#555}.option-img{width:50px;height:50px;object-fit:cover;border-radius:4px;margin-right:12px;flex-shrink:0}.option-text{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1}.song-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.artist-name{font-size:.9rem;color:#b3b3b3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 600px){body{padding:1rem .5rem}h1{font-size:2rem;margin-top:0}h2{font-size:1.5rem}.quiz-container,.results-container{margin-top:1rem}.options-grid{grid-template-columns:1fr;gap:.5rem;margin-top:1.5rem}.option-btn{padding:12px;font-size:1rem}.artist-name{font-size:.85rem}.timer{font-size:1.2rem;width:50px;height:50px;margin:1rem auto}.combo-indicator,.combo-break-indicator{font-size:1.2rem;margin-bottom:.5rem}.combo-display-area{min-height:2.5rem}}@media (min-width: 992px){.App{max-width:800px}h1{font-size:3.5rem}h2{font-size:2.5rem}.quiz-btn,.restart-btn{padding:20px 40px;font-size:1.5rem}.options-grid{gap:1.5rem}.option-btn{padding:15px}.option-img{width:60px;height:60px}.song-name{font-size:1.1rem}.artist-name{font-size:1rem}.score{font-size:1.8rem}.timer{font-size:1.8rem;width:70px;height:70px}.combo-indicator,.combo-break-indicator{font-size:1.8rem}}.playlist-summary{margin-top:3rem;border-top:1px solid #404040;padding-top:1.5rem}.playlist-title{margin-top:0;margin-bottom:1.5rem;color:#1db954;font-size:1.8rem}.results-song-list{list-style-type:none;padding:0;max-width:500px;margin:0 auto;text-align:left}.song-list-item a{display:flex;align-items:center;padding:.75rem;border-radius:8px;transition:background-color .2s;text-decoration:none;color:inherit}.song-list-item a:hover{background-color:#282828}.song-list-img{width:45px;height:45px;object-fit:cover;border-radius:4px;margin-right:15px;flex-shrink:0}.song-list-text{display:flex;flex-direction:column;justify-content:center;min-width:0}.compatibility-warning{background-color:#ffc107;color:#333;padding:.75rem 1.5rem;position:sticky;top:0;left:0;right:0;z-index:2000;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 5px #0003}.compatibility-warning p{margin:0;padding-right:1rem;font-size:.9rem;text-align:center;flex-grow:1}.warning-close-btn{background:none;border:none;font-size:1.75rem;line-height:1;color:#333;cursor:pointer;padding:0 .5rem;opacity:.7}.warning-close-btn:hover{opacity:1}.settings-btn{position:absolute;top:1.5rem;right:1.5rem;background:none;border:none;cursor:pointer;font-size:2rem;color:#fff;opacity:.6;transition:opacity .2s,transform .3s;z-index:100}.settings-btn:hover{opacity:1;transform:rotate(45deg)}.settings-btn:disabled{opacity:.3;cursor:not-allowed;transform:none}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:#282c34;padding:2rem;border-radius:10px;width:90%;max-width:500px;color:#fff;box-shadow:0 5px 15px #0000004d}.modal-content h2{margin-top:0;border-bottom:1px solid #444;padding-bottom:.5rem}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0}.form-grid label{text-align:right;align-self:center}.form-grid input{padding:.5rem;border-radius:5px;border:1px solid #555;background:#333;color:#fff;font-size:1rem}.modal-actions{display:flex;justify-content:flex-end;gap:1rem;margin-top:2rem}.main-content-wrapper{position:relative;max-width:900px;margin:0 auto;padding:1rem}