:root{--bg-primary: #f8f9fa;--bg-secondary: #f0f0f0;--text-primary: #333;--border-color: #ccc;--shadow-color: rgba(0, 0, 0, 0.2);--accent-color: #66bb6a;--danger-color: #f44336;--danger-color-dark: #d32f2f;--disabled-color: #e8e8e8;--disabled-text: #666;--cell-size: clamp(32px, 9vw, 50px);--ball-size: calc(var(--cell-size) * 0.75);--ball-offset: calc((var(--cell-size) - var(--ball-size)) / 2)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes slideIn{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOut{from{transform:translateY(0);opacity:1}to{transform:translateY(20px);opacity:0}}@keyframes dropIn{0%{opacity:0;transform:translateY(-50px) scale(0.9)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes scaleIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleOut{from{transform:scale(1);opacity:1}to{transform:scale(0.9);opacity:0}}@keyframes pulse{0%{transform:scale(0.8);opacity:.7}50%{transform:scale(1.2);opacity:1}100%{transform:scale(0.8);opacity:.7}}@keyframes jumpBall{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.1)}100%{transform:translateY(0) scale(1)}}@keyframes selectedBallJump{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.1)}}@keyframes lineCompleteFlash{0%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.15);filter:brightness(1.5)}100%{transform:scale(1);filter:brightness(1)}}@keyframes lineCompleteDisappear{0%{transform:scale(1);opacity:1}75%{transform:scale(1.2);opacity:.5}100%{transform:scale(0);opacity:0}}@keyframes pathAppear{0%{background-color:#e8e8e8}100%{background-color:#c8e6ff}}@keyframes darkPathAppear{0%{background-color:#353535}100%{background-color:#1e2a3a}}@keyframes scoreIn{0%{opacity:0;transform:scale(0.5)}50%{opacity:1;transform:scale(1.2)}100%{transform:scale(1)}}html,body{margin:0;padding:0;height:100%;width:100%;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;background-color:#f8f9fa;transition:background-color .3s ease;transition:color .3s ease}html.dark-theme,body.dark-theme{background-color:#121212;color:#e0e0e0}#root{height:100%;min-height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}*{box-sizing:border-box}
:root{--bg-primary: #f8f9fa;--bg-secondary: #f0f0f0;--text-primary: #333;--border-color: #ccc;--shadow-color: rgba(0, 0, 0, 0.2);--accent-color: #66bb6a;--danger-color: #f44336;--danger-color-dark: #d32f2f;--disabled-color: #e8e8e8;--disabled-text: #666;--cell-size: clamp(32px, 9vw, 50px);--ball-size: calc(var(--cell-size) * 0.75);--ball-offset: calc((var(--cell-size) - var(--ball-size)) / 2)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes slideIn{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOut{from{transform:translateY(0);opacity:1}to{transform:translateY(20px);opacity:0}}@keyframes dropIn{0%{opacity:0;transform:translateY(-50px) scale(0.9)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes scaleIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleOut{from{transform:scale(1);opacity:1}to{transform:scale(0.9);opacity:0}}@keyframes pulse{0%{transform:scale(0.8);opacity:.7}50%{transform:scale(1.2);opacity:1}100%{transform:scale(0.8);opacity:.7}}@keyframes jumpBall{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.1)}100%{transform:translateY(0) scale(1)}}@keyframes selectedBallJump{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.1)}}@keyframes lineCompleteFlash{0%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.15);filter:brightness(1.5)}100%{transform:scale(1);filter:brightness(1)}}@keyframes lineCompleteDisappear{0%{transform:scale(1);opacity:1}75%{transform:scale(1.2);opacity:.5}100%{transform:scale(0);opacity:0}}@keyframes pathAppear{0%{background-color:#e8e8e8}100%{background-color:#c8e6ff}}@keyframes darkPathAppear{0%{background-color:#353535}100%{background-color:#1e2a3a}}@keyframes scoreIn{0%{opacity:0;transform:scale(0.5)}50%{opacity:1;transform:scale(1.2)}100%{transform:scale(1)}}.cell{width:var(--cell-size);height:var(--cell-size);border:1px solid #aaa;display:flex;justify-content:center;align-items:center;cursor:pointer;background-color:#e8e8e8;position:relative;transition:background-color .2s ease}.cell:hover{background-color:#ccc}.cell:hover .ball-inner{transform:scale(1.05)}.cell.selected{background-color:#c8e6ff}.cell.selected .ball-inner{animation:selectedBallJump .8s ease-in-out infinite;box-shadow:0 0 10px hsla(0,0%,100%,.8),inset -3px -3px 5px rgba(0,0,0,.3)}.cell.ball{position:relative}.cell.path{background-color:#c8e6ff;transition:background-color .3s ease}.cell.path-step-1{animation:pathAppear .3s ease-in-out forwards;animation-delay:.05s}.cell.path-step-1 .path-dot{animation-delay:.1s}.cell.path-step-2{animation:pathAppear .3s ease-in-out forwards;animation-delay:.1s}.cell.path-step-2 .path-dot{animation-delay:.2s}.cell.path-step-3{animation:pathAppear .3s ease-in-out forwards;animation-delay:.15s}.cell.path-step-3 .path-dot{animation-delay:.3s}.cell.path-step-4{animation:pathAppear .3s ease-in-out forwards;animation-delay:.2s}.cell.path-step-4 .path-dot{animation-delay:.4s}.cell.path-step-5{animation:pathAppear .3s ease-in-out forwards;animation-delay:.25s}.cell.path-step-5 .path-dot{animation-delay:.5s}.cell.path-step-6{animation:pathAppear .3s ease-in-out forwards;animation-delay:.3s}.cell.path-step-6 .path-dot{animation-delay:.6s}.cell.path-step-7{animation:pathAppear .3s ease-in-out forwards;animation-delay:.35s}.cell.path-step-7 .path-dot{animation-delay:.7s}.cell.path-step-8{animation:pathAppear .3s ease-in-out forwards;animation-delay:.4s}.cell.path-step-8 .path-dot{animation-delay:.8s}.cell.path-step-9{animation:pathAppear .3s ease-in-out forwards;animation-delay:.45s}.cell.path-step-9 .path-dot{animation-delay:.9s}.cell.path-step-10{animation:pathAppear .3s ease-in-out forwards;animation-delay:.5s}.cell.path-step-10 .path-dot{animation-delay:1s}.cell.line-complete .ball-inner{animation:lineCompleteFlash .5s ease-in-out 2,lineCompleteDisappear .8s ease-in-out 1s forwards}.cell.line-pos-1 .ball-inner{animation-delay:0s,1s}.cell.line-pos-2 .ball-inner{animation-delay:.1s,1.1s}.cell.line-pos-3 .ball-inner{animation-delay:.2s,1.2s}.cell.line-pos-4 .ball-inner{animation-delay:.3s,1.3s}.cell.line-pos-5 .ball-inner{animation-delay:.4s,1.4s}.cell.line-pos-6 .ball-inner{animation-delay:.5s,1.5s}.cell.line-pos-7 .ball-inner{animation-delay:.6s,1.6s}.cell.line-pos-8 .ball-inner{animation-delay:.7s,1.7s}.cell.line-pos-9 .ball-inner{animation-delay:.8s,1.8s}.ball-inner{width:var(--ball-size);height:var(--ball-size);border-radius:50%;box-shadow:inset -3px -3px 5px rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.3);transition:transform .2s ease}.next-ball .ball-inner{width:100%;height:100%;max-width:100%;max-height:100%}.ball-red .ball-inner{background:radial-gradient(circle at 30% 30%, #ff6b6b, #d00)}.ball-red-inner{background:radial-gradient(circle at 30% 30%, #ff6b6b, #d00)}.ball-blue .ball-inner{background:radial-gradient(circle at 30% 30%, #6b9aff, #0044d0)}.ball-blue-inner{background:radial-gradient(circle at 30% 30%, #6b9aff, #0044d0)}.ball-green .ball-inner{background:radial-gradient(circle at 30% 30%, #6bff9a, #00d044)}.ball-green-inner{background:radial-gradient(circle at 30% 30%, #6bff9a, #00d044)}.ball-yellow .ball-inner{background:radial-gradient(circle at 30% 30%, #fff06b, #d0ac00)}.ball-yellow-inner{background:radial-gradient(circle at 30% 30%, #fff06b, #d0ac00)}.ball-purple .ball-inner{background:radial-gradient(circle at 30% 30%, #d26bff, #7700d0)}.ball-purple-inner{background:radial-gradient(circle at 30% 30%, #d26bff, #7700d0)}.ball-cyan .ball-inner{background:radial-gradient(circle at 30% 30%, #6bffff, #00a0d0)}.ball-cyan-inner{background:radial-gradient(circle at 30% 30%, #6bffff, #00a0d0)}.ball-orange .ball-inner{background:radial-gradient(circle at 30% 30%, #ffa06b, #d06000)}.ball-orange-inner{background:radial-gradient(circle at 30% 30%, #ffa06b, #d06000)}.path-dot{width:10px;height:10px;border-radius:50%;background-color:#b3d9ff;animation:pulse 1s ease-in-out infinite}.ball-animated .ball-inner{animation:moveAlongPath .5s ease-out forwards}.moving-ball{position:absolute;border-radius:50%;z-index:9999;transition:left .25s ease-in-out,top .25s ease-in-out;box-shadow:0 4px 15px rgba(0,0,0,.3);pointer-events:none}.moving-ball .ball-inner{width:100%;height:100%;border-radius:50%;box-shadow:inset -3px -3px 5px rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.3);position:relative}.moving-ball.jumping{z-index:9999;box-shadow:none !important}.moving-ball.jumping .ball-inner{animation:jumpBall .3s ease-out forwards;box-shadow:none !important}
:root{--bg-primary: #f8f9fa;--bg-secondary: #f0f0f0;--text-primary: #333;--border-color: #ccc;--shadow-color: rgba(0, 0, 0, 0.2);--accent-color: #66bb6a;--danger-color: #f44336;--danger-color-dark: #d32f2f;--disabled-color: #e8e8e8;--disabled-text: #666;--cell-size: clamp(32px, 9vw, 50px);--ball-size: calc(var(--cell-size) * 0.75);--ball-offset: calc((var(--cell-size) - var(--ball-size)) / 2)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes slideIn{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOut{from{transform:translateY(0);opacity:1}to{transform:translateY(20px);opacity:0}}@keyframes dropIn{0%{opacity:0;transform:translateY(-50px) scale(0.9)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes scaleIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleOut{from{transform:scale(1);opacity:1}to{transform:scale(0.9);opacity:0}}@keyframes pulse{0%{transform:scale(0.8);opacity:.7}50%{transform:scale(1.2);opacity:1}100%{transform:scale(0.8);opacity:.7}}@keyframes jumpBall{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.1)}100%{transform:translateY(0) scale(1)}}@keyframes selectedBallJump{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.1)}}@keyframes lineCompleteFlash{0%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.15);filter:brightness(1.5)}100%{transform:scale(1);filter:brightness(1)}}@keyframes lineCompleteDisappear{0%{transform:scale(1);opacity:1}75%{transform:scale(1.2);opacity:.5}100%{transform:scale(0);opacity:0}}@keyframes pathAppear{0%{background-color:#e8e8e8}100%{background-color:#c8e6ff}}@keyframes darkPathAppear{0%{background-color:#353535}100%{background-color:#1e2a3a}}@keyframes scoreIn{0%{opacity:0;transform:scale(0.5)}50%{opacity:1;transform:scale(1.2)}100%{transform:scale(1)}}.board{display:flex;flex-direction:column;justify-content:center;align-items:center;border:2px solid #444;border-radius:8px;background-color:#f0f0f0;margin:10px auto;box-shadow:0 4px 15px rgba(0,0,0,.3);overflow:hidden;max-width:100%;transform-origin:center}.board-row{display:flex;flex-direction:row;justify-content:center;align-items:center}@media screen and (max-width: 480px){.board{margin:5px auto;border-width:1px;transform:none}}@media screen and (min-width: 768px){.board{margin:15px auto}}@media screen and (min-width: 1200px){.board{margin:20px auto}}
:root{--bg-primary: #f8f9fa;--bg-secondary: #f0f0f0;--text-primary: #333;--border-color: #ccc;--shadow-color: rgba(0, 0, 0, 0.2);--accent-color: #66bb6a;--danger-color: #f44336;--danger-color-dark: #d32f2f;--disabled-color: #e8e8e8;--disabled-text: #666;--cell-size: clamp(32px, 9vw, 50px);--ball-size: calc(var(--cell-size) * 0.75);--ball-offset: calc((var(--cell-size) - var(--ball-size)) / 2)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes slideIn{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOut{from{transform:translateY(0);opacity:1}to{transform:translateY(20px);opacity:0}}@keyframes dropIn{0%{opacity:0;transform:translateY(-50px) scale(0.9)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes scaleIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleOut{from{transform:scale(1);opacity:1}to{transform:scale(0.9);opacity:0}}@keyframes pulse{0%{transform:scale(0.8);opacity:.7}50%{transform:scale(1.2);opacity:1}100%{transform:scale(0.8);opacity:.7}}@keyframes jumpBall{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.1)}100%{transform:translateY(0) scale(1)}}@keyframes selectedBallJump{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.1)}}@keyframes lineCompleteFlash{0%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.15);filter:brightness(1.5)}100%{transform:scale(1);filter:brightness(1)}}@keyframes lineCompleteDisappear{0%{transform:scale(1);opacity:1}75%{transform:scale(1.2);opacity:.5}100%{transform:scale(0);opacity:0}}@keyframes pathAppear{0%{background-color:#e8e8e8}100%{background-color:#c8e6ff}}@keyframes darkPathAppear{0%{background-color:#353535}100%{background-color:#1e2a3a}}@keyframes scoreIn{0%{opacity:0;transform:scale(0.5)}50%{opacity:1;transform:scale(1.2)}100%{transform:scale(1)}}.dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;z-index:1000;background-color:rgba(0,0,0,.7);backdrop-filter:blur(3px);animation:fadeIn .2s ease-out forwards}.dialog-container{background-color:#fff;width:90%;max-width:350px;overflow:hidden;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.4);animation:scaleIn .2s ease-out forwards}.dialog-header{padding:15px 20px;padding:15px 20px;background-color:#4caf50;color:#fff;text-align:center}.dialog-header h3{margin:0;font-size:18px}.dialog-content{padding:20px}.dialog-content p{margin:0;font-size:16px;line-height:1.5;color:#333}.dialog-actions{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding:10px 20px 20px;gap:10px}.dialog-button{padding:8px 16px;border-radius:4px;font-weight:bold;cursor:pointer;border:none;font-size:14px;transition:all .2s ease}.cancel-button{padding:8px 16px;border-radius:4px;font-weight:bold;cursor:pointer;border:none;font-size:14px;transition:all .2s ease;background-color:#f0f0f0;color:#333}.cancel-button:hover{background-color:#e0e0e0}.confirm-button{padding:8px 16px;border-radius:4px;font-weight:bold;cursor:pointer;border:none;font-size:14px;transition:all .2s ease;background-color:var(--danger-color, #f44336);color:#fff}.confirm-button:hover{background-color:var(--danger-color-dark, #d32f2f);transform:translateY(-1px)}
:root{--bg-primary: #f8f9fa;--bg-secondary: #f0f0f0;--text-primary: #333;--border-color: #ccc;--shadow-color: rgba(0, 0, 0, 0.2);--accent-color: #66bb6a;--danger-color: #f44336;--danger-color-dark: #d32f2f;--disabled-color: #e8e8e8;--disabled-text: #666;--cell-size: clamp(32px, 9vw, 50px);--ball-size: calc(var(--cell-size) * 0.75);--ball-offset: calc((var(--cell-size) - var(--ball-size)) / 2)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes slideIn{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOut{from{transform:translateY(0);opacity:1}to{transform:translateY(20px);opacity:0}}@keyframes dropIn{0%{opacity:0;transform:translateY(-50px) scale(0.9)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes scaleIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleOut{from{transform:scale(1);opacity:1}to{transform:scale(0.9);opacity:0}}@keyframes pulse{0%{transform:scale(0.8);opacity:.7}50%{transform:scale(1.2);opacity:1}100%{transform:scale(0.8);opacity:.7}}@keyframes jumpBall{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.1)}100%{transform:translateY(0) scale(1)}}@keyframes selectedBallJump{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.1)}}@keyframes lineCompleteFlash{0%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.15);filter:brightness(1.5)}100%{transform:scale(1);filter:brightness(1)}}@keyframes lineCompleteDisappear{0%{transform:scale(1);opacity:1}75%{transform:scale(1.2);opacity:.5}100%{transform:scale(0);opacity:0}}@keyframes pathAppear{0%{background-color:#e8e8e8}100%{background-color:#c8e6ff}}@keyframes darkPathAppear{0%{background-color:#353535}100%{background-color:#1e2a3a}}@keyframes scoreIn{0%{opacity:0;transform:scale(0.5)}50%{opacity:1;transform:scale(1.2)}100%{transform:scale(1)}}.game-over-overlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;z-index:1000;background-color:rgba(0,0,0,.8);backdrop-filter:blur(5px);animation:fadeIn .4s ease-out forwards}.game-over-container{background-color:#fff;width:90%;max-width:400px;overflow:hidden;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.4);animation:dropIn .5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;transform-origin:center top}.game-over-header{padding:20px;padding:15px 20px;background-color:#f44336;color:#fff;text-align:center}.game-over-header h2{margin:0;font-size:28px;text-transform:uppercase;letter-spacing:2px;text-shadow:0 1px 3px rgba(0,0,0,.3);animation:pulse 2s ease-in-out infinite}@media screen and (max-width: 480px){.game-over-header h2{font-size:24px}}.game-over-content{padding:30px 20px;display:flex;flex-direction:column;justify-content:center;align-items:center}.final-score{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.score-label{font-size:18px;color:#666;margin-bottom:5px}.score-value{font-size:48px;font-weight:bold;color:#333;animation:scoreIn .8s ease-out forwards}@media screen and (max-width: 480px){.score-value{font-size:40px}}.score-message{text-align:center;font-size:16px;color:#666;line-height:1.5;margin-bottom:20px;padding:0 10px}.game-over-actions{padding:0 20px 25px;display:flex;justify-content:center;align-items:center}.play-again-button{background-color:#4caf50;color:#fff;border:none;padding:12px 24px;font-size:18px;font-weight:bold;border-radius:4px;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px var(--shadow-color, rgba(0, 0, 0, 0.2))}.play-again-button:hover{background-color:#45a049;transform:translateY(-2px);box-shadow:0 2px 6px var(--shadow-color, rgba(0, 0, 0, 0.2))}.play-again-button:active{transform:translateY(0);box-shadow:0 2px 4px var(--shadow-color, rgba(0, 0, 0, 0.1))}
:root{--bg-primary: #f8f9fa;--bg-secondary: #f0f0f0;--text-primary: #333;--border-color: #ccc;--shadow-color: rgba(0, 0, 0, 0.2);--accent-color: #66bb6a;--danger-color: #f44336;--danger-color-dark: #d32f2f;--disabled-color: #e8e8e8;--disabled-text: #666;--cell-size: clamp(32px, 9vw, 50px);--ball-size: calc(var(--cell-size) * 0.75);--ball-offset: calc((var(--cell-size) - var(--ball-size)) / 2)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes slideIn{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOut{from{transform:translateY(0);opacity:1}to{transform:translateY(20px);opacity:0}}@keyframes dropIn{0%{opacity:0;transform:translateY(-50px) scale(0.9)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes scaleIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleOut{from{transform:scale(1);opacity:1}to{transform:scale(0.9);opacity:0}}@keyframes pulse{0%{transform:scale(0.8);opacity:.7}50%{transform:scale(1.2);opacity:1}100%{transform:scale(0.8);opacity:.7}}@keyframes jumpBall{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.1)}100%{transform:translateY(0) scale(1)}}@keyframes selectedBallJump{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.1)}}@keyframes lineCompleteFlash{0%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.15);filter:brightness(1.5)}100%{transform:scale(1);filter:brightness(1)}}@keyframes lineCompleteDisappear{0%{transform:scale(1);opacity:1}75%{transform:scale(1.2);opacity:.5}100%{transform:scale(0);opacity:0}}@keyframes pathAppear{0%{background-color:#e8e8e8}100%{background-color:#c8e6ff}}@keyframes darkPathAppear{0%{background-color:#353535}100%{background-color:#1e2a3a}}@keyframes scoreIn{0%{opacity:0;transform:scale(0.5)}50%{opacity:1;transform:scale(1.2)}100%{transform:scale(1)}}.overlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;z-index:1000;background-color:rgba(0,0,0,.8);backdrop-filter:blur(5px)}.help-dialog{width:90%;max-width:500px;overflow:hidden;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.4);max-height:85vh;overflow-y:auto}.help-dialog .dialog-content{padding:15px 20px}.help-dialog .dialog-content h3{margin-top:15px;margin-bottom:8px;color:var(--accent-color, #2196F3)}.help-dialog .dialog-content ul{text-align:left;margin:0;padding-left:20px}.help-dialog .dialog-content ul li{margin-bottom:8px;line-height:1.4}.help-dialog-header{padding:15px 20px;background-color:#2196f3;color:#fff;text-align:center}.help-dialog-header h2{margin:0;font-size:1.5rem}.dialog-actions{padding:15px 20px;display:flex;justify-content:center;align-items:center;border-top:1px solid var(--border-color, #aaa)}.primary-button{padding:8px 16px;border-radius:4px;font-weight:bold;cursor:pointer;border:none;font-size:14px;transition:all .2s ease;background-color:var(--accent-color, #2196F3);color:#fff;padding:8px 30px}.primary-button:hover{background-color:rgb(12.8461538462,138.0961538462,237.6538461538);transform:translateY(-1px)}.primary-button:active{transform:translateY(0)}.dark-theme .help-dialog{background-color:#222}.dark-theme .help-dialog-header{background-color:#1976d2}.dark-theme .dialog-content{color:#e0e0e0}.dark-theme .dialog-content h3{color:#61dafb}.dark-theme .dialog-actions{border-top-color:#444}.dark-theme .primary-button{background-color:#1976d2}.dark-theme .primary-button:hover{background-color:#1565c0}
:root{--bg-primary: #f8f9fa;--bg-secondary: #f0f0f0;--text-primary: #333;--border-color: #ccc;--shadow-color: rgba(0, 0, 0, 0.2);--accent-color: #66bb6a;--danger-color: #f44336;--danger-color-dark: #d32f2f;--disabled-color: #e8e8e8;--disabled-text: #666;--cell-size: clamp(32px, 9vw, 50px);--ball-size: calc(var(--cell-size) * 0.75);--ball-offset: calc((var(--cell-size) - var(--ball-size)) / 2)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes slideIn{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOut{from{transform:translateY(0);opacity:1}to{transform:translateY(20px);opacity:0}}@keyframes dropIn{0%{opacity:0;transform:translateY(-50px) scale(0.9)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes scaleIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleOut{from{transform:scale(1);opacity:1}to{transform:scale(0.9);opacity:0}}@keyframes pulse{0%{transform:scale(0.8);opacity:.7}50%{transform:scale(1.2);opacity:1}100%{transform:scale(0.8);opacity:.7}}@keyframes jumpBall{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.1)}100%{transform:translateY(0) scale(1)}}@keyframes selectedBallJump{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.1)}}@keyframes lineCompleteFlash{0%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.15);filter:brightness(1.5)}100%{transform:scale(1);filter:brightness(1)}}@keyframes lineCompleteDisappear{0%{transform:scale(1);opacity:1}75%{transform:scale(1.2);opacity:.5}100%{transform:scale(0);opacity:0}}@keyframes pathAppear{0%{background-color:#e8e8e8}100%{background-color:#c8e6ff}}@keyframes darkPathAppear{0%{background-color:#353535}100%{background-color:#1e2a3a}}@keyframes scoreIn{0%{opacity:0;transform:scale(0.5)}50%{opacity:1;transform:scale(1.2)}100%{transform:scale(1)}}.game{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:clamp(8px,2vw,20px);font-family:"Arial",sans-serif;max-width:100%;width:clamp(350px,90vw,700px);margin:0 auto;position:relative;border-radius:12px;box-shadow:0 2px 4px var(--shadow-color, rgba(0, 0, 0, 0.1));background-color:var(--bg-primary, #fff)}.game-info{display:flex;flex-direction:row;justify-content:space-between;align-items:start;width:100%;margin-bottom:clamp(5px,2vw,10px);gap:clamp(8px,2vw,16px);max-width:100%;background-color:var(--bg-secondary, #f0f0f0);border-radius:8px;border:1px solid var(--border-color, #ccc);box-shadow:0 2px 6px var(--shadow-color, rgba(0, 0, 0, 0.2));padding:clamp(6px,1.5vw,10px)}.game-bottom{width:100%;display:flex;justify-content:center;align-items:center;margin-top:clamp(5px,2vw,10px);gap:10px}@media screen and (max-width: 480px){.game{padding:10px}.game-info{flex-direction:row;justify-content:space-between;align-items:center;gap:4px}}.game-content{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:calc(9*var(--cell-size) + 4px);margin:0 auto}.score-container{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:20px}.score,.high-score{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:clamp(4px,1vw,12px);background-color:rgba(0,0,0,0);border:none;border-radius:0;box-shadow:none;flex:0 0 22%;margin-top:8px}@media screen and (max-width: 480px){.score,.high-score{width:auto;max-width:none;margin:0;flex-basis:28%;padding:4px}.score-label,.high-score-label{font-size:12px;margin-bottom:2px}.score-value,.high-score-value{font-size:12px}}.score-label,.high-score-label{font-weight:bold;font-size:clamp(12px,2vw,16px);color:var(--text-primary, #333);margin-bottom:5px}.score-value,.high-score-value{font-size:clamp(18px,4vw,24px);font-weight:bold}.score-value{color:var(--text-primary, #333)}.high-score-value{color:var(--text-primary, #333)}.reset-button{padding:8px 16px;border-radius:4px;font-weight:bold;cursor:pointer;border:none;font-size:14px;transition:all .2s ease;background-color:var(--danger-color, #f44336);color:#fff;padding:8px 24px;text-align:center;font-size:clamp(12px,2vw,16px);margin-top:10px}.reset-button:hover{background-color:var(--danger-color-dark, #d32f2f);transform:translateY(-1px)}.reset-button:disabled{background-color:var(--disabled-color, #e8e8e8);color:var(--disabled-text, #666);cursor:not-allowed;transform:none}.help-button{padding:8px 16px;border-radius:4px;font-weight:bold;cursor:pointer;border:none;font-size:14px;transition:all .2s ease;background-color:var(--accent-color, #2196F3);color:#fff;padding:8px 24px;text-align:center;font-size:clamp(12px,2vw,16px);margin-top:10px}.help-button:hover{background-color:rgb(12.8461538462,138.0961538462,237.6538461538);transform:translateY(-1px)}.help-button:active{transform:translateY(0)}.board-container{position:relative;margin:0 auto;width:100%;display:flex;justify-content:center;align-items:center;transform-origin:center;min-width:calc(9*var(--cell-size) + 4px);margin-bottom:0}
:root{--bg-primary: #f8f9fa;--bg-secondary: #f0f0f0;--text-primary: #333;--border-color: #ccc;--shadow-color: rgba(0, 0, 0, 0.2);--accent-color: #66bb6a;--danger-color: #f44336;--danger-color-dark: #d32f2f;--disabled-color: #e8e8e8;--disabled-text: #666;--cell-size: clamp(32px, 9vw, 50px);--ball-size: calc(var(--cell-size) * 0.75);--ball-offset: calc((var(--cell-size) - var(--ball-size)) / 2)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes slideIn{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOut{from{transform:translateY(0);opacity:1}to{transform:translateY(20px);opacity:0}}@keyframes dropIn{0%{opacity:0;transform:translateY(-50px) scale(0.9)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes scaleIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleOut{from{transform:scale(1);opacity:1}to{transform:scale(0.9);opacity:0}}@keyframes pulse{0%{transform:scale(0.8);opacity:.7}50%{transform:scale(1.2);opacity:1}100%{transform:scale(0.8);opacity:.7}}@keyframes jumpBall{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.1)}100%{transform:translateY(0) scale(1)}}@keyframes selectedBallJump{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.1)}}@keyframes lineCompleteFlash{0%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.15);filter:brightness(1.5)}100%{transform:scale(1);filter:brightness(1)}}@keyframes lineCompleteDisappear{0%{transform:scale(1);opacity:1}75%{transform:scale(1.2);opacity:.5}100%{transform:scale(0);opacity:0}}@keyframes pathAppear{0%{background-color:#e8e8e8}100%{background-color:#c8e6ff}}@keyframes darkPathAppear{0%{background-color:#353535}100%{background-color:#1e2a3a}}@keyframes scoreIn{0%{opacity:0;transform:scale(0.5)}50%{opacity:1;transform:scale(1.2)}100%{transform:scale(1)}}.next-balls-panel{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:clamp(6px,1.5vw,10px);background-color:hsla(0,0%,100%,.1);border-radius:4px;border:none;box-shadow:none;flex:1 1 auto}@media screen and (max-width: 480px){.next-balls-panel{width:auto;max-width:none;margin:0;padding:4px;flex:0 1 auto;border-radius:4px}}.next-balls-title{font-weight:bold;margin-bottom:3px;font-size:clamp(12px,2vw,16px);color:#333}@media screen and (max-width: 480px){.next-balls-title{font-size:12px;margin-bottom:2px}}.next-balls-container{display:flex;justify-content:center;align-items:center;gap:clamp(4px,1vw,8px);padding:3px;background-color:rgba(0,0,0,0)}@media screen and (max-width: 480px){.next-balls-container{gap:3px;padding:3px}}.next-ball{width:clamp(25px,5vw,35px);height:clamp(25px,5vw,35px);display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:rgba(0,0,0,0);transition:transform .2s ease}@media screen and (max-width: 480px){.next-ball{width:20px;height:20px}}.next-ball:hover .ball-inner{transform:scale(1.1)}.next-ball .ball-inner{width:100%;height:100%;max-width:100%;max-height:100%}@media screen and (max-width: 480px){.next-ball .ball-inner{width:100%;height:100%}}
:root{--bg-primary: #f8f9fa;--bg-secondary: #f0f0f0;--text-primary: #333;--border-color: #ccc;--shadow-color: rgba(0, 0, 0, 0.2);--accent-color: #66bb6a;--danger-color: #f44336;--danger-color-dark: #d32f2f;--disabled-color: #e8e8e8;--disabled-text: #666;--cell-size: clamp(32px, 9vw, 50px);--ball-size: calc(var(--cell-size) * 0.75);--ball-offset: calc((var(--cell-size) - var(--ball-size)) / 2)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes slideIn{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOut{from{transform:translateY(0);opacity:1}to{transform:translateY(20px);opacity:0}}@keyframes dropIn{0%{opacity:0;transform:translateY(-50px) scale(0.9)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes scaleIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleOut{from{transform:scale(1);opacity:1}to{transform:scale(0.9);opacity:0}}@keyframes pulse{0%{transform:scale(0.8);opacity:.7}50%{transform:scale(1.2);opacity:1}100%{transform:scale(0.8);opacity:.7}}@keyframes jumpBall{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.1)}100%{transform:translateY(0) scale(1)}}@keyframes selectedBallJump{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.1)}}@keyframes lineCompleteFlash{0%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.15);filter:brightness(1.5)}100%{transform:scale(1);filter:brightness(1)}}@keyframes lineCompleteDisappear{0%{transform:scale(1);opacity:1}75%{transform:scale(1.2);opacity:.5}100%{transform:scale(0);opacity:0}}@keyframes pathAppear{0%{background-color:#e8e8e8}100%{background-color:#c8e6ff}}@keyframes darkPathAppear{0%{background-color:#353535}100%{background-color:#1e2a3a}}@keyframes scoreIn{0%{opacity:0;transform:scale(0.5)}50%{opacity:1;transform:scale(1.2)}100%{transform:scale(1)}}.theme-toggle{display:flex;flex-direction:row;justify-content:center;align-items:center;align-items:center;margin-left:20px}.theme-label{margin-right:8px;font-size:14px;color:#e0e0e0;font-weight:500}.theme-toggle-btn{background:none;border:1px solid #ccc;border-radius:50%;padding:6px 12px;font-size:18px;cursor:pointer;transition:all .2s ease;display:flex;justify-content:center;align-items:center;background-color:hsla(0,0%,100%,.1);box-shadow:0 2px 6px var(--shadow-color, rgba(0, 0, 0, 0.2))}.theme-toggle-btn:hover{background-color:hsla(0,0%,100%,.2);transform:translateY(-1px)}.theme-toggle-btn:active{transform:translateY(1px)}.dark-theme .theme-label{color:#e0e0e0}.dark-theme .theme-toggle-btn{border-color:#555;background-color:rgba(0,0,0,.3)}.dark-theme .theme-toggle-btn:hover{background-color:hsla(0,0%,100%,.1)}
:root{--bg-primary: #f8f9fa;--bg-secondary: #f0f0f0;--text-primary: #333;--border-color: #ccc;--shadow-color: rgba(0, 0, 0, 0.2);--accent-color: #66bb6a;--danger-color: #f44336;--danger-color-dark: #d32f2f;--disabled-color: #e8e8e8;--disabled-text: #666;--cell-size: clamp(32px, 9vw, 50px);--ball-size: calc(var(--cell-size) * 0.75);--ball-offset: calc((var(--cell-size) - var(--ball-size)) / 2)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes slideIn{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOut{from{transform:translateY(0);opacity:1}to{transform:translateY(20px);opacity:0}}@keyframes dropIn{0%{opacity:0;transform:translateY(-50px) scale(0.9)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes scaleIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleOut{from{transform:scale(1);opacity:1}to{transform:scale(0.9);opacity:0}}@keyframes pulse{0%{transform:scale(0.8);opacity:.7}50%{transform:scale(1.2);opacity:1}100%{transform:scale(0.8);opacity:.7}}@keyframes jumpBall{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.1)}100%{transform:translateY(0) scale(1)}}@keyframes selectedBallJump{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.1)}}@keyframes lineCompleteFlash{0%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.15);filter:brightness(1.5)}100%{transform:scale(1);filter:brightness(1)}}@keyframes lineCompleteDisappear{0%{transform:scale(1);opacity:1}75%{transform:scale(1.2);opacity:.5}100%{transform:scale(0);opacity:0}}@keyframes pathAppear{0%{background-color:#e8e8e8}100%{background-color:#c8e6ff}}@keyframes darkPathAppear{0%{background-color:#353535}100%{background-color:#1e2a3a}}@keyframes scoreIn{0%{opacity:0;transform:scale(0.5)}50%{opacity:1;transform:scale(1.2)}100%{transform:scale(1)}}.consent-overlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;z-index:1000;background-color:rgba(0,0,0,.8);backdrop-filter:blur(5px);z-index:1001;animation:fadeIn .3s ease-out forwards}.consent-overlay.closing{animation:fadeOut .3s ease-in forwards}.consent-container{background-color:#fff;width:90%;max-width:480px;overflow:hidden;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.4);animation:slideIn .4s ease-out forwards}.consent-container.closing{animation:slideOut .3s ease-in forwards}.consent-header{padding:16px 20px;padding:15px 20px;background-color:#2196f3;color:#fff;text-align:center}.consent-header h3{margin:0;font-size:20px}.consent-content{padding:20px;font-size:15px;line-height:1.5;color:#555}.consent-content p{margin:0 0 15px 0}.consent-content p:last-child{margin-bottom:0}.consent-actions{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding:15px 20px;gap:12px;border-top:1px solid #e0e0e0}.consent-button{padding:8px 16px;border-radius:4px;font-weight:bold;cursor:pointer;border:none;font-size:14px;transition:all .2s ease;padding:10px 16px;font-weight:500}.decline-button{background-color:#f5f5f5;color:#666}.decline-button:hover{background-color:#e0e0e0}.accept-button{background-color:#2196f3;color:#fff}.accept-button:hover{background-color:#1976d2}
.language-selector{position:relative;margin-left:20px;z-index:100}.language-button{background-color:rgba(0,0,0,0);border:1px solid #ddd;border-radius:4px;padding:6px 12px;cursor:pointer;font-size:.9em;color:inherit;display:flex;align-items:center}.language-button:hover{background-color:hsla(0,0%,100%,.1)}.language-button:focus{outline:none;box-shadow:0 0 0 2px rgba(66,153,225,.5)}.language-button.asian-script{font-size:1em;font-weight:500}.language-button .flag-image{width:20px;height:15px;margin-right:10px;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.1);object-fit:cover}.flag-box{display:inline-block;margin-right:10px;width:32px;height:22px;font-size:.7em;font-weight:bold;text-align:center;line-height:22px;color:#fff;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.2);text-transform:uppercase;position:relative;overflow:hidden}.flag-box.flag-en{background-color:#00247d;color:#fff}.flag-box.flag-en::before,.flag-box.flag-en::after{content:"";position:absolute;width:100%;height:100%;top:0;left:0}.flag-box.flag-en::before{background:linear-gradient(to bottom right, transparent calc(50% - 2px), white calc(50% - 1px), white calc(50% + 1px), transparent calc(50% + 2px)),linear-gradient(to bottom left, transparent calc(50% - 2px), white calc(50% - 1px), white calc(50% + 1px), transparent calc(50% + 2px))}.flag-box.flag-en::after{background:linear-gradient(to right, transparent calc(50% - 3px), #cf142b calc(50% - 3px), #cf142b calc(50% + 3px), transparent calc(50% + 3px)),linear-gradient(to bottom, transparent calc(50% - 3px), #cf142b calc(50% - 3px), #cf142b calc(50% + 3px), transparent calc(50% + 3px)),linear-gradient(to bottom right, transparent calc(50% - 1px), #cf142b calc(50% - 0px), #cf142b calc(50% + 0px), transparent calc(50% + 1px)),linear-gradient(to bottom left, transparent calc(50% - 1px), #cf142b calc(50% - 0px), #cf142b calc(50% + 0px), transparent calc(50% + 1px))}.flag-box.flag-ru{background:linear-gradient(180deg, #fff 33%, #0039a6 33%, #0039a6 66%, #d52b1e 66%);color:#0039a6;text-shadow:0 0 2px hsla(0,0%,100%,.5)}.flag-box.flag-es{background:linear-gradient(180deg, #c60b1e 25%, #ffc400 25%, #ffc400 75%, #c60b1e 75%)}.flag-box.flag-de{background:linear-gradient(180deg, #000 33%, #dd0000 33%, #dd0000 66%, #ffce00 66%)}.flag-box.flag-pl{background:linear-gradient(180deg, #fff 50%, #dc143c 50%);color:crimson;text-shadow:0 0 2px hsla(0,0%,100%,.5)}.flag-box.flag-zh{background:#de2910}.flag-box.flag-zh::before{content:"★";position:absolute;left:3px;top:0;font-size:10px;color:#ffde00}.flag-box.flag-ja{background:#fff;border:1px solid #ddd;color:#333}.flag-box.flag-ja::before{content:"";position:absolute;width:12px;height:12px;background:#bc002d;border-radius:50%;left:50%;top:50%;transform:translate(-50%, -50%)}.language-dropdown{position:absolute;top:100%;right:0;margin-top:4px;min-width:160px;max-height:300px;overflow-y:auto;background-color:#fff;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15);overflow:hidden;z-index:1000;animation:fadeIn .2s ease-out}@media(prefers-color-scheme: dark){.language-dropdown{background-color:#333;border:1px solid #555}}.language-option{width:100%;padding:8px 12px;text-align:left;background:none;border:none;cursor:pointer;transition:background-color .2s;font-size:.9em;display:flex;align-items:center}.language-option:hover{background-color:#f5f5f5}@media(prefers-color-scheme: dark){.language-option:hover{background-color:#444}}.language-option.active{background-color:#e6e6e6;font-weight:bold}@media(prefers-color-scheme: dark){.language-option.active{background-color:#555}}.language-option.asian-script{font-size:1em;font-weight:500;padding-top:6px;padding-bottom:6px}.language-option .flag-image{width:20px;height:15px;margin-right:10px;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.1);object-fit:cover}.language-option .language-name{flex:1}@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
:root{--bg-primary: #f8f9fa;--bg-secondary: #f0f0f0;--text-primary: #333;--border-color: #ccc;--shadow-color: rgba(0, 0, 0, 0.2);--accent-color: #66bb6a;--danger-color: #f44336;--danger-color-dark: #d32f2f;--disabled-color: #e8e8e8;--disabled-text: #666;--cell-size: clamp(32px, 9vw, 50px);--ball-size: calc(var(--cell-size) * 0.75);--ball-offset: calc((var(--cell-size) - var(--ball-size)) / 2)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes slideIn{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOut{from{transform:translateY(0);opacity:1}to{transform:translateY(20px);opacity:0}}@keyframes dropIn{0%{opacity:0;transform:translateY(-50px) scale(0.9)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes scaleIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleOut{from{transform:scale(1);opacity:1}to{transform:scale(0.9);opacity:0}}@keyframes pulse{0%{transform:scale(0.8);opacity:.7}50%{transform:scale(1.2);opacity:1}100%{transform:scale(0.8);opacity:.7}}@keyframes jumpBall{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.1)}100%{transform:translateY(0) scale(1)}}@keyframes selectedBallJump{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.1)}}@keyframes lineCompleteFlash{0%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.15);filter:brightness(1.5)}100%{transform:scale(1);filter:brightness(1)}}@keyframes lineCompleteDisappear{0%{transform:scale(1);opacity:1}75%{transform:scale(1.2);opacity:.5}100%{transform:scale(0);opacity:0}}@keyframes pathAppear{0%{background-color:#e8e8e8}100%{background-color:#c8e6ff}}@keyframes darkPathAppear{0%{background-color:#353535}100%{background-color:#1e2a3a}}@keyframes scoreIn{0%{opacity:0;transform:scale(0.5)}50%{opacity:1;transform:scale(1.2)}100%{transform:scale(1)}}.App{text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;background-color:#f8f9fa}.App-logo{height:40vmin;pointer-events:none}@media(prefers-reduced-motion: no-preference){.App-logo{animation:App-logo-spin infinite 20s linear}}.App-header{width:100%;background-color:#282c34;padding:clamp(10px,3vw,20px);color:#fff;display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100;box-shadow:0 4px 15px rgba(0,0,0,.3)}.App-header h1{margin:0;font-size:clamp(1.5rem,5vw,2rem);text-shadow:0 1px 3px rgba(0,0,0,.3)}.App-footer{width:100%;background-color:#282c34;padding:clamp(5px,2vw,10px);color:#fff;font-size:clamp(.8rem,2vw,.9rem);box-shadow:0 2px 4px var(--shadow-color, rgba(0, 0, 0, 0.1))}.App-footer .email-link{color:#61dafb;text-decoration:none}.App-footer .email-link:hover{text-decoration:underline;color:rgb(171.6111111111,235.4722222222,252.8888888889)}.App-link{color:#61dafb}.header-right{display:flex;flex-direction:row;justify-content:center;align-items:center}main{flex:1;padding:clamp(10px,3vw,30px);display:flex;justify-content:center;align-items:center;min-height:80vh;background-image:radial-gradient(circle at center, rgba(255, 255, 255, 0.8) 0%, rgba(240, 240, 240, 0.3) 100%)}@keyframes App-logo-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}body,.App,.App-header,.App-footer,.game,.board,.cell,.next-balls-panel,.score,.game-over{transition:background-color .3s ease;transition:color .3s ease;transition:border-color .3s ease}@media screen and (max-width: 480px){.App-header{padding:10px}.main{padding:10px}}
:root{--bg-primary: #f8f9fa;--bg-secondary: #f0f0f0;--text-primary: #333;--border-color: #ccc;--shadow-color: rgba(0, 0, 0, 0.2);--accent-color: #66bb6a;--danger-color: #f44336;--danger-color-dark: #d32f2f;--disabled-color: #e8e8e8;--disabled-text: #666;--cell-size: clamp(32px, 9vw, 50px);--ball-size: calc(var(--cell-size) * 0.75);--ball-offset: calc((var(--cell-size) - var(--ball-size)) / 2)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes slideIn{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOut{from{transform:translateY(0);opacity:1}to{transform:translateY(20px);opacity:0}}@keyframes dropIn{0%{opacity:0;transform:translateY(-50px) scale(0.9)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes scaleIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleOut{from{transform:scale(1);opacity:1}to{transform:scale(0.9);opacity:0}}@keyframes pulse{0%{transform:scale(0.8);opacity:.7}50%{transform:scale(1.2);opacity:1}100%{transform:scale(0.8);opacity:.7}}@keyframes jumpBall{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.1)}100%{transform:translateY(0) scale(1)}}@keyframes selectedBallJump{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.1)}}@keyframes lineCompleteFlash{0%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.15);filter:brightness(1.5)}100%{transform:scale(1);filter:brightness(1)}}@keyframes lineCompleteDisappear{0%{transform:scale(1);opacity:1}75%{transform:scale(1.2);opacity:.5}100%{transform:scale(0);opacity:0}}@keyframes pathAppear{0%{background-color:#e8e8e8}100%{background-color:#c8e6ff}}@keyframes darkPathAppear{0%{background-color:#353535}100%{background-color:#1e2a3a}}@keyframes scoreIn{0%{opacity:0;transform:scale(0.5)}50%{opacity:1;transform:scale(1.2)}100%{transform:scale(1)}}body.dark-theme,.dark-theme{--bg-primary: #121212;--bg-secondary: #2d2d2d;--text-primary: #e0e0e0;--border-color: #444;--shadow-color: rgba(0, 0, 0, 0.3);--accent-color: #66bb6a;--danger-color: #f44336;--danger-color-dark: #d32f2f;--disabled-color: #444;--disabled-text: #666;background-color:var(--bg-primary);color:var(--text-primary)}body.dark-theme .App,.dark-theme .App{background-color:var(--bg-primary)}body.dark-theme .App-header,body.dark-theme .App-footer,.dark-theme .App-header,.dark-theme .App-footer{background-color:#1e1e1e;color:var(--text-primary)}body.dark-theme main,.dark-theme main{background-color:var(--bg-primary);background-image:radial-gradient(circle at center, rgba(34, 34, 34, 0.8) 0%, rgba(18, 18, 18, 0.3) 100%)}body.dark-theme .game,.dark-theme .game{background-color:var(--bg-secondary);box-shadow:0 4px 15px rgba(0,0,0,.3)}body.dark-theme .game-info,.dark-theme .game-info{background-color:var(--bg-secondary);border-color:var(--border-color);box-shadow:0 2px 6px var(--shadow-color, rgba(0, 0, 0, 0.2))}body.dark-theme .board,.dark-theme .board{background-color:#2d2d2d;border-color:var(--border-color);box-shadow:0 4px 15px rgba(0,0,0,.3)}body.dark-theme .board-row,.dark-theme .board-row{background-color:#2d2d2d}body.dark-theme .cell,.dark-theme .cell{background-color:#353535;border-color:var(--border-color)}body.dark-theme .cell:hover,.dark-theme .cell:hover{background-color:#444}body.dark-theme .cell.selected,.dark-theme .cell.selected{background-color:#1a3a5a}body.dark-theme .cell.path,.dark-theme .cell.path{background-color:#1e2a3a}body.dark-theme .cell.path-step-1,body.dark-theme .cell.path-step-2,body.dark-theme .cell.path-step-3,body.dark-theme .cell.path-step-4,body.dark-theme .cell.path-step-5,body.dark-theme .cell.path-step-6,body.dark-theme .cell.path-step-7,body.dark-theme .cell.path-step-8,body.dark-theme .cell.path-step-9,body.dark-theme .cell.path-step-10,.dark-theme .cell.path-step-1,.dark-theme .cell.path-step-2,.dark-theme .cell.path-step-3,.dark-theme .cell.path-step-4,.dark-theme .cell.path-step-5,.dark-theme .cell.path-step-6,.dark-theme .cell.path-step-7,.dark-theme .cell.path-step-8,.dark-theme .cell.path-step-9,.dark-theme .cell.path-step-10{animation-name:darkPathAppear}body.dark-theme .path-dot,.dark-theme .path-dot{background-color:#405a77}@keyframes darkPathAppear{0%{background-color:#353535}100%{background-color:#1e2a3a}}body.dark-theme .next-balls-panel,.dark-theme .next-balls-panel{background-color:hsla(0,0%,100%,.1);border-color:rgba(0,0,0,0);box-shadow:none}body.dark-theme .next-balls-title,.dark-theme .next-balls-title{color:var(--text-primary)}body.dark-theme .game-over-container,.dark-theme .game-over-container{background-color:#222}body.dark-theme .game-over-header,.dark-theme .game-over-header{background-color:#d32f2f}body.dark-theme .score-label,.dark-theme .score-label{color:#aaa}body.dark-theme .score-value,.dark-theme .score-value{color:#e0e0e0}body.dark-theme .score-message,.dark-theme .score-message{color:#bbb}body.dark-theme .moving-ball,.dark-theme .moving-ball{filter:brightness(0.95)}body.dark-theme .consent-container,.dark-theme .consent-container{background-color:#333}body.dark-theme .consent-header,.dark-theme .consent-header{background-color:#1565c0}body.dark-theme .consent-content,.dark-theme .consent-content{color:#ccc}body.dark-theme .consent-actions,.dark-theme .consent-actions{border-top-color:#444}body.dark-theme .decline-button,.dark-theme .decline-button{background-color:#444;color:#bbb}body.dark-theme .decline-button:hover,.dark-theme .decline-button:hover{background-color:#555}body.dark-theme .accept-button,.dark-theme .accept-button{background-color:#1976d2}body.dark-theme .accept-button:hover,.dark-theme .accept-button:hover{background-color:#1565c0}body.dark-theme .dialog-container,.dark-theme .dialog-container{background-color:#222}body.dark-theme .dialog-header,.dark-theme .dialog-header{background-color:#1e6329}body.dark-theme .dialog-content p,.dark-theme .dialog-content p{color:#e0e0e0}body.dark-theme .cancel-button,.dark-theme .cancel-button{background-color:#333;color:#e0e0e0}body.dark-theme .cancel-button:hover,.dark-theme .cancel-button:hover{background-color:#444}

/*# sourceMappingURL=main.1767ea6e79cb0498aac6.css.map*/