body {
        font-family: Arial, sans-serif;
        text-align: center;
        margin: 30px;
      }
      .game-grid {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-bottom: 20px;
      }
      .column {
        width: 250px;
      }
      .finished {
  background-color: #d4edda; /* light green */
  border-color: #28a745;     /* green border */
  color: #155724;            /* dark green text */
  font-style: italic;        /* optional: makes it feel 'done' */
  pointer-events: none;      /* makes the box unclickable */
}
      .label {
        font-weight: bold;
        margin-bottom: 5px;
      }
      .box {
        border: 2px solid #444;
        padding: 10px;
        min-height: 80px;
        cursor: pointer;
        background-color: white;
      }
      .disabled {
        background-color: #ccc;
        pointer-events: none;
      }
      #prompt {
        font-weight: bold;
        margin-bottom: 10px;
      }
      #score-display {
        margin: 10px 0;
      }
      #intro-box {
        border: 3px solid #444;
        padding: 30px;
        margin: 40px auto;
        width: 60%;
        font-size: 1.5em;
        font-weight: bold;
        background-color: #f0f0f0;
        cursor: pointer;
      }
      #end-controls {
        display: none;
        margin-top: 20px;
      }
      #quit-box {
        display: none;
        border: 2px solid #888;
        padding: 10px 30px;
        margin: 30px auto;
        width: 200px;
        cursor: pointer;
        background-color: #f0f0f0;
        font-weight: bold;
        color: #666;
      }
      #quit-box:hover {
        background-color: #e0e0e0;
      }
      #currentWordDisplay {
        text-align: center;
        font-size: 24px; /* adjust size as you like */
        margin-top: 10px; /* spacing below the prompt */
        font-weight: bold; /* optional emphasis */
      }
      #arrow-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
}

.arrow {
  font-size: 48px;       /* big arrow */
  cursor: pointer;
  flex: 1;               /* match width of columns */
  text-align: center;
  color: #444;
}

.arrow:hover {
  color: #007bff;        /* highlight on hover */
}
#arrow-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
}


.arrow {
  font-size: 48px;       /* big arrow */
  cursor: pointer;
  flex: 1;               /* same width as columns */
  text-align: center;
  color: #444;
}

.arrow:hover {
  color: #007bff;        /* highlight on hover */
}