body {
       font-family: Arial, sans-serif;
       display: flex;
       justify-content: center;
       background-color: #f0f0f0;
       margin: 0;
       overflow: hidden;
       touch-action: manipulation;
     }
     .container {
       text-align: center;
       max-width: 100%;
       width: 100%;
       padding: 10px;
       box-sizing: border-box;
     }
     h1 {
       color: #333;
       font-size: 2em;
       margin: 10px 0;
     }
     #board {
       display: grid;
       grid-template-columns: repeat(9, 40px);
       width: 366px; /* 9 * 40px + 2 * 2px (outer borders) + 2 * 1px (inner thick borders) */
       height: 366px;
       margin: 20px auto;
       border: 2px solid #333;
       background-color: #fff;
       box-sizing: border-box;
     }
     .cell {
       width: 40px;
       height: 40px;
       border: 1px solid #999;
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 1.2em;
       cursor: pointer;
       touch-action: manipulation;
       pointer-events: auto;
       user-select: none;
       box-sizing: border-box;
     }
     .cell.given {
       background-color: #e0e0e0;
       color: #000;
       font-weight: bold;
       pointer-events: none;
     }
     .cell.selected {
       background-color: #d0e8ff;
     }
     .cell.invalid {
       background-color: #ffcccc;
     }
     .cell:nth-child(3n) {
       border-right: 2px solid #333;
     }
     .cell:nth-child(n+19):nth-child(-n+27),
     .cell:nth-child(n+46):nth-child(-n+54) {
       border-bottom: 2px solid #333;
     }
     #keypad {
       display: grid;
       grid-template-columns: repeat(5, 1fr);
       gap: 5px;
       max-width: 300px;
       margin: 10px auto;
     }
     .key {
       padding: 10px;
       font-size: 1em;
       background-color: #333;
       color: #fff;
       border: none;
       border-radius: 5px;
       cursor: pointer;
       touch-action: manipulation;
     }
     #game-over {
       margin-top: 20px;
     }
     #game-over button {
       padding: 10px 20px;
       font-size: 1em;
       background-color: #333;
       color: #fff;
       border: none;
       border-radius: 5px;
       cursor: pointer;
       touch-action: manipulation;
     }
     #leaderboard {
       margin: 20px auto;
       border-collapse: collapse;
       width: 100%;
       max-width: 100%;
     }
     #leaderboard th, #leaderboard td {
       border: 1px solid #333;
       padding: 8px;
       font-size: 1em;
     }
     #leaderboard th {
       background-color: #333;
       color: #fff;
     }
     @media (max-width: 600px) {
       h1 {
         font-size: 1.5em;
       }
       #board {
         grid-template-columns: repeat(9, 30px);
         width: 276px; /* 9 * 30px + 2 * 2px + 2 * 1px */
         height: 276px;
       }
       .cell {
         width: 30px;
         height: 30px;
         font-size: 1em;
       }
       #keypad {
         max-width: 240px;
       }
       .key {
         font-size: 0.9em;
         padding: 8px;
       }
       #game-over button {
         font-size: 0.9em;
         padding: 8px 15px;
       }
       #leaderboard th, #leaderboard td {
         font-size: 0.9em;
         padding: 5px;
       }
     }