.grid-container {
           display: grid;
           grid-template-columns: repeat(var(--grid-size, 5), 1fr);
           grid-template-rows: repeat(var(--grid-size, 5), 1fr);
           gap: 2px;
           width: 100%;
           max-width: 400px; /* Maxbredd för korsordet */
           aspect-ratio: 1 / 1;


           font-family: 'Helvetica Neue', Arial, sans-serif;
                      -webkit-touch-callout: none; /* iOS Safari */
                      -webkit-user-select: none; /* Safari */
                      -khtml-user-select: none; /* Konqueror HTML */
                      -moz-user-select: none; /* Old versions of Firefox */
                      -ms-user-select: none; /* Internet Explorer/Edge */
                      user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */


       }
       .cell {
           position: relative;
           width: 100%;
           height: 100%;
           background-color: white;
           border: 1px solid #9ca3af; /* gray-400 */
       }
       .cell.black {
           background-color: #111827; /* gray-900 */
           border: none;
       }
       .cell input {
           width: 100%;
           height: 100%;
           text-align: center;
           font-size: clamp(1rem, 5vw, 1.5rem);
           font-weight: bold;
           text-transform: uppercase;
           border: none;
           background-color: transparent;
           padding: 0;
           margin: 0;
           caret-color: transparent; /* Dölj blinkande markör */
       }
       .cell input:focus {
           outline: none;
       }
       .cell.highlight {
           background-color: #e0f2fe; /* sky-100 */
       }
       .cell.selected {
           background-color: #fef08a; /* yellow-200 */
       }
       .cell .number {
           position: absolute;
           top: 2px;
           left: 2px;
           font-size: clamp(0.5rem, 2vw, 0.75rem);
           font-weight: normal;
           color: #4b5563; /* gray-600 */
       }
       .clue.active {
           background-color: #fef08a; /* yellow-200 */
       }
       .cell.correct {
           background-color: #dcfce7; /* green-100 */
           transition: background-color 0.5s ease-in-out;
       }
