/* style.css */

:root {
  --selected-color: #ff8800;
}

body {
  margin: 0;
  font-family: sans-serif;
  background: #000;
  color: white;
  scrollbar-color: #333 #000;
}

#app {
  display: flex;
  flex-direction: column;
  /* height: 100vh; */
  scrollbar-color: #333 #000;
}

#word-display {
  text-align: center;
  font-size: 2em;
  padding: 0.5em;
  border-bottom: 1px solid #333;
  background: #111;
  /* user-select: none;  Removed to make text selectable */
}

/* Style for the link inside word-display */
#word-display a {
    color: var(--selected-color); /* Blue color for links */
    text-decoration: none; /* No underline by default */
    cursor: pointer; /* Indicate it's clickable */
    transition: color 0.2s ease;
}

#word-display a:hover {
    color: #ffffff;
    text-decoration: underline; /* Underline on hover */
}


#grid-container {
  /* display: flex;
  flex: 1;
  overflow-x: auto;
  scrollbar-color: #333 #000; */
  height: 100%; 
  border-bottom: 1px solid #333;
}

#letter-rows {
  display: flex;
  flex-direction: row;
  flex: 1;
  overflow-x: auto; /* Allow horizontal scrolling for letter columns */
  /* overflow-y: hidden; Prevent vertical scrolling */
}

.letter-column {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-right: 1px solid #333;
  flex-grow: 1;
  height: 611px;
}

.letter-tile {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #444;
  cursor: pointer;
  background: #555; /* Default gray background */
  color: white; /* Ensure text is visible on gray */
  font-size: 1.2em;
  user-select: none; /* Prevent text selection - KEEP this for tiles */
  transition: background-color 0.1s ease; /* Smooth hover effect */
  flex-grow: 1;
}

/* Specific styles */
.letter-tile.selected {
  background: var(--selected-color) !important; /* for selected */
}

.letter-tile:hover {
  background: #777; /* Lighter gray on hover */
}

.terminal {
  background: black !important; /* Black for terminal words */
  color: white; /* Ensure text is visible */
  font-weight: bold;
}

.deadend {
  background: black !important; /* Match background for dead ends */
  color: darkred; /* Indicate a dead end */
  height: 100% !important;
  flex: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  cursor: default; /* No pointer for dead ends */
}

#color-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 5px;
}

#color-container button {
  width: 15px;
  height: 10px;
  border-radius: 5%;
  border: none;
  cursor: pointer;
  margin: 5px;
}