:root{--bg-color: #ffffff;--text-color: #333333;--card-bg: #f5f5f5;--border-color: #dddddd;--button-bg: #007bff;--button-text: #ffffff;--button-hover: #0056b3}[data-theme=dark]{--bg-color: #1a1a1a;--text-color: #e0e0e0;--card-bg: #2d2d2d;--border-color: #444444;--button-bg: #0d6efd;--button-text: #ffffff;--button-hover: #0b5ed7}body{font-family:sans-serif;margin:0;padding:20px;background-color:var(--bg-color);color:var(--text-color);transition:background-color .3s ease,color .3s ease}.theme-toggle{right:20px;top:20px;position:fixed;background-color:var(--button-bg);color:var(--button-text);border:none;justify-content:center;align-items:center;display:flex;cursor:pointer;font-size:14px;transition:background-color .3s ease;width:30px;height:30px;border-radius:15px;z-index:1001;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.theme-toggle:hover{background-color:var(--button-hover)}.mute-toggle{right:20px;top:60px;position:fixed;background-color:var(--button-bg);color:var(--button-text);border:none;justify-content:center;align-items:center;display:flex;cursor:pointer;font-size:14px;transition:background-color .3s ease;width:30px;height:30px;border-radius:15px;z-index:1001;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.mute-toggle:hover{background-color:var(--button-hover)}.next-track-btn{right:20px;top:100px;position:fixed;background-color:var(--button-bg);color:var(--button-text);border:none;justify-content:center;align-items:center;display:flex;cursor:pointer;font-size:14px;transition:background-color .3s ease;width:60px;height:30px;border-radius:15px;z-index:1001;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;display:none}.next-track-btn:hover{background-color:var(--button-hover)}.score-display{position:fixed;top:20px;left:20px;display:flex;gap:30px;font-size:18px;font-weight:700;color:var(--text-color);background-color:var(--card-bg);padding:10px 20px;border-radius:8px;border:2px solid var(--border-color);transition:background-color .3s ease,color .3s ease,border-color .3s ease;pointer-events:none}.score-display span{display:flex;align-items:center;gap:5px}@media(max-width:768px){.score-display{flex-direction:column;gap:8px;font-size:12px;padding:8px 12px;background-color:rgba(var(--card-bg-rgb),.7);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:.7;top:10px;left:10px}:root{--card-bg-rgb: 245, 245, 245}[data-theme=dark]{--card-bg-rgb: 45, 45, 45}}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:#0009;justify-content:center;align-items:center}.modal.show{display:flex}.modal-content{background-color:var(--card-bg);padding:40px;border-radius:16px;border:3px solid var(--border-color);text-align:center;min-width:300px;box-shadow:0 8px 32px #0000004d}.modal-content h2{margin:0 0 30px;color:var(--text-color);font-size:36px}.modal-stats{margin:20px 0 30px}.modal-stats p{font-size:20px;margin:10px 0;color:var(--text-color);font-weight:700}.play-again-btn{padding:15px 40px;font-size:18px;background-color:var(--button-bg);color:var(--button-text);border:none;border-radius:8px;cursor:pointer;font-weight:700;transition:background-color .3s ease}.play-again-btn:hover{background-color:var(--button-hover)}#playAgainBtn{background-color:#28a745}#playAgainBtn:hover{background-color:#218838}.share-btn{padding:10px 25px;font-size:14px;background-color:var(--button-bg);color:var(--button-text);border:none;border-radius:8px;cursor:pointer;font-weight:700;transition:background-color .3s ease}.share-btn:hover{background-color:var(--button-hover)}#shareBtn{padding:10px 25px;font-size:14px}.ripple-container{position:fixed;top:0;left:0;width:100vw;height:100vh;overflow:hidden;pointer-events:none;z-index:1}.game-container{position:fixed;top:0;left:0;width:100vw;height:100vh;overflow:hidden;z-index:2}.ripple{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(100,150,255,.8),rgba(50,100,200,.3),transparent);pointer-events:none;animation:ripple .5s ease-out forwards}.modal-emojis{margin-bottom:20px}.ball{position:absolute;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 30% 30%,gold,orange);cursor:pointer;transition:transform .1s ease;box-shadow:0 2px 8px #0000004d;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.ball:hover{transform:scale(1.1)}.ball:active{transform:scale(.95)}.miss-indicator{position:absolute;font-size:24px;pointer-events:none;animation:fadeOut .5s ease-out forwards;z-index:10}@keyframes shrinkBall{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes fadeOut{0%{opacity:.75}to{opacity:0}}@keyframes ripple{0%{width:0;height:0;opacity:.75}to{width:15vmax;height:15vmax;opacity:0}}@keyframes jiggle1{0%,to{transform:translate(0)}25%{transform:translate(2px,-2px)}50%{transform:translate(-2px,2px)}75%{transform:translate(2px,2px)}}@keyframes jiggle2{0%,to{transform:translate(0)}25%{transform:translate(-2px,2px)}50%{transform:translate(2px,-2px)}75%{transform:translate(-2px,-2px)}}@keyframes jiggle3{0%,to{transform:translate(0)}25%{transform:translate(2px,2px)}50%{transform:translate(-2px,-2px)}75%{transform:translate(-2px,2px)}}@keyframes jiggle4{0%,to{transform:translate(0)}25%{transform:translate(-2px,-2px)}50%{transform:translate(2px,2px)}75%{transform:translate(2px,-2px)}}
