#sudoku-container{text-align:center;padding-top:20px;padding-bottom:20px;position:relative;max-width:400px;margin:auto}@media (min-width: 901px){#sudoku-grid{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);max-width:800px;width:100%;aspect-ratio:1;border:3px solid #333}#numbers-container{display:flex;flex-direction:column;justify-content:flex-start;padding-left:20px}.sudoku-cell{position:relative;width:calc(10vw - 6px);height:calc(10vw - 6px);max-width:60px;max-height:60px;display:flex;justify-content:center;align-items:center;border:1px solid #bbb;overflow:hidden;font-size:2.5rem;box-sizing:border-box}#sudoku-container{display:flex;justify-content:center;padding-top:20px;padding-bottom:20px}#number-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:-moz-fit-content;width:fit-content;margin-bottom:20px}.number-btn{width:100px;height:100px;font-size:3rem}#difficulty{padding-top:50px}.notes{position:absolute;left:5px;bottom:5px;font-size:.75em;color:#666;line-height:1}}@media (max-width: 900px){#sudoku-container{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:auto;width:100%;max-width:400px}#numbers-container{max-width:100%}#sudoku-grid{order:1;display:grid;grid-template-columns:repeat(9,1fr);width:90vw;height:90vw;max-width:600px;max-height:600px;margin:auto;border:3px solid #333}.sudoku-cell{position:relative;display:flex;justify-content:center;align-items:center;background-color:#fff;border:1px solid #ddd;font-size:16px;aspect-ratio:1}#number-pad{display:flex;justify-content:center;margin-top:20px;margin-bottom:20px}.number-btn{width:40px;height:40px;margin:0 5px;cursor:pointer}.notes{position:absolute;left:5px;bottom:5px;font-size:.9em;color:#666;line-height:1}}.sudoku-cell:nth-child(3n){border-right:3px solid #333}.sudoku-cell:nth-child(n+19):nth-child(-n+27),.sudoku-cell:nth-child(n+46):nth-child(-n+54){border-bottom:3px solid #333}.sudoku-cell.selected{background-color:#c0e0ff}.sudoku-cell:nth-last-child(-n+9){border-bottom:none}.sudoku-cell:nth-child(9n){border-right:none}#controls{display:flex;justify-content:center}.control-btn{margin:0 5px;width:106px}.number-btn{margin:0 5px;cursor:pointer;background-color:#f0f0f0;border:1px solid #ddd;border-radius:4px}.number-btn:hover{background-color:#e0e0e0}.control-btn{padding:10px 20px;margin:0 5px;cursor:pointer;background-color:#f0f0f0;border:1px solid #ddd;border-radius:4px}.control-btn:hover{background-color:#e0e0e0}.sudoku-cell.selected{background-color:#a0d0ef}.active-notes-btn{border:2px solid #007bff;box-shadow:0 0 5px #007bff}.user-filled.correct{font-weight:700;color:purple}.user-filled.incorrect{font-weight:700;color:red}.btn-timer{display:flex;align-items:center;justify-content:space-between;margin-top:15px;margin-left:35px;margin-right:35px;font-size:1.2rem}.pause-play{width:20px;cursor:pointer;margin-left:10px}#errors-counter{margin-right:auto}#difficulty{display:flex;justify-content:center;align-items:center;margin:20px 0}#difficulty-select{padding:10px;margin-right:10px;border-radius:5px;border:1px solid #ccc;background-color:#f9f9f9;cursor:pointer}#new-game{padding:10px 20px;border-radius:5px;border:none;background-color:#4caf50;color:#fff;cursor:pointer;transition:background-color .3s ease}#new-game:hover{background-color:#45a049}select{font-size:16px}@keyframes buttonClickAnimation{0%{background-color:#e0e0e0;box-shadow:0 0 5px #999}50%{background-color:#d0d0d0;box-shadow:0 0 10px #666}to{background-color:#e0e0e0;box-shadow:0 0 5px #999}}.button:active{animation:buttonClickAnimation .7s ease-out forwards}@media (max-width: 900px){#difficulty-select,#new-game{width:80%}}.modal{display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#0006}.modal-content{position:relative;background-color:#fefefe;margin:15% auto;padding:20px;border:1px solid #888;max-width:420px;text-align:center;border-radius:10px}.modal-content button{cursor:pointer;padding:10px 20px;margin-right:10px}.hidden-text{color:transparent!important;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:#fff!important}#start-image{position:absolute;z-index:10000;cursor:pointer;width:50px;height:50px;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:auto}.highlight-row,.highlight-column,.highlight-box{background-color:#dcf0ffb3}@keyframes flashError{0%,to{background-color:transparent}50%{background-color:#fcc}}.flash-error{animation:flashError 1s}.close-btn{position:absolute;top:10px;right:15px;font-size:25px;font-weight:700;cursor:pointer}