body {
      font-family: sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      min-height: 100vh;
      padding: 0px 20px 20px;
      padding-top: 55px;
      background: #fdfdfd;
    }
    
            body {
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #FFF;
        }

    #puzzleHeading {
      font-size: 1.5rem;
      margin: 10px 0;
    }

    #grid {
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      grid-template-rows: repeat(9, 1fr);
      width: 100%;
      max-width: 360px;
      aspect-ratio: 1 / 1;
      margin: 10px 0 20px;
      border: 1px solid #000;
      background: #fafafa;
    }

    .cell {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: clamp(16px, 4vw, 20px);
      border: 0.5px solid #bbb;
      box-sizing: border-box;
      user-select: none;
      cursor: pointer;
      background-color: #fcfcfc;
    }

    .cell[data-bottom="true"] { border-bottom: 1px solid #000; }
    .cell[data-right="true"]  { border-right: 1px solid #000; }

    .cell[data-fixed="true"] {
      background: #e6e6e6;
      font-weight: bold;
      color: #444;
      cursor: default;
    }

    .cell.active {
      background: #eaf3ff;
    }

    .cell.correct {
      background: #d4edda;
      color: #155724;
    }

    .cell.incorrect {
      background: #f8d7da;
      color: #721c24;
    }

    .buttons-container {
      display: flex;
      gap: 10px;
      margin: 10px 0;
      flex-wrap: wrap;
      justify-content: center;
    }

    .buttons-container button {
      background-color: #a8cfff;
      color: #003a75;
      border: none;
      border-radius: 5px;
      padding: 5px 12px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .buttons-container button.active {
      background-color: #4285f4;
      color: white;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    .buttons-container button:hover:not(.active) {
      background-color: #bedcff;
    }

    .number-and-mode-buttons-container { /* New container for number and mode buttons */
      display: flex;
      flex-direction: column;
      align-items: center; /* Center horizontally */
      gap: 15px; /* Space between number buttons and mode buttons */
      margin-top: 10px;
    }

    .number-buttons {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .number-row {
      display: flex;
      justify-content: center;
      gap: 10px;
    }

    .number-buttons button {
      width: 40px;
      height: 40px;
      padding: 0;
      font-size: 18px;
      border-radius: 8px;
      background-color: #e3f1ff;
      color: #004080;
      border: 1px solid #b0d6ff;
      cursor: pointer;
      transition: background-color 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .number-buttons button:hover {
      background-color: #d0e8ff;
    }

    .number-buttons button:active {
      background-color: #bde0ff;
      transform: translateY(1px);
    }

    .number-buttons.candidate-mode button {
      font-size: 0;
      padding: 2px;
      line-height: 1;
    }

    .number-buttons.candidate-mode button::before {
      content: attr(data-original-number);
      position: absolute;
      font-size: 11px;
      color: #004080;
      white-space: nowrap;
    }

    .number-buttons.candidate-mode button[data-original-number="1"]::before { top: 3px; left: 3px; }
    .number-buttons.candidate-mode button[data-original-number="2"]::before { top: 3px; left: 50%; transform: translateX(-50%); }
    .number-buttons.candidate-mode button[data-original-number="3"]::before { top: 3px; right: 3px; left: auto; }
    .number-buttons.candidate-mode button[data-original-number="4"]::before { top: 50%; left: 3px; transform: translateY(-50%); }
    .number-buttons.candidate-mode button[data-original-number="5"]::before { top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .number-buttons.candidate-mode button[data-original-number="6"]::before { top: 50%; right: 3px; left: auto; transform: translateY(-50%); }
    .number-buttons.candidate-mode button[data-original-number="7"]::before { bottom: 3px; left: 3px; top: auto; }
    .number-buttons.candidate-mode button[data-original-number="8"]::before { bottom: 3px; left: 50%; top: auto; transform: translateX(-50%); }
    .number-buttons.candidate-mode button[data-original-number="9"]::before { bottom: 3px; right: 3px; top: auto; left: auto; }
    .number-buttons.candidate-mode button[data-original-number="✕"]::before {
      font-size: 18px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .candidate-grid {
      position: absolute;
      top: 2px;
      left: 2px;
      right: 2px;
      bottom: 2px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      font-size: 10px;
      line-height: 1;
      color: #888;
      pointer-events: none;
    }

    .candidate-grid span {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .candidate-grid span[data-num] {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #888;
    }

    .candidate-grid span.active-candidate {
      color: #333;
      font-weight: bold;
    }

    .mode-buttons-container { /* New container for "For Sure" and "Maybe" buttons */
      display: flex;
      gap: 10px;
      justify-content: center;
      width: 100%; /* Ensure it spans the width if needed */
    }

    .mode-toggle {
      background-color: #a8cfff;
      color: #003a75;
      border: none;
      border-radius: 8px;
      padding: 0;
      width: 70px;
      height: 40px;
      font-size: 13px;
      cursor: pointer;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .mode-toggle.active-mode {
      background-color: #4285f4;
      color: white;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .mode-toggle:hover:not(.active-mode) {
      background-color: #bedcff;
    }
    
    .top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color:#4285f4;
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  z-index: 1000;
}

.icon-group {
  display: flex;
  align-items: center;
  gap: 5px;
  
}

.icon-group-right {
  display: flex;
  align-items: center;
  padding-right: 10px;
  color: #FFF;
  font-weight: bold;
}

.menu-icon {
  font-size: 25px;
  color: #FFF;
  text-decoration: none;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  padding: 0;
  margin: 0;
  position: relative;
  top: -1px;
  font-weight: bold;
}

.title-link {
  text-decoration: none;
  color: #FFF;
  font-size: 16px;
  line-height: 1;
  font-weight: bold;
}


.button {
    width: 200px; /* Set a fixed width for uniform sizing */
    height: 40px; /* Ensure consistent height */
    margin: 0; /* Remove auto margin to keep everything aligned */
}
     

 /* Style the footer */
    footer {
      position: fixed;
      bottom: 0px;
      width: 100%;
      background-color: #FFFFFF;
      text-align: center;
      padding: 15px;
    }
    footer a {
      text-decoration: none;
      color: black;
      margin: 0 5px;
    }
    footer a:hover {
      color: #0073e6; /* Change link color on hover */
    }