/* Board container internal styling */
#board-container {
  flex-wrap: wrap;
  column-gap: clamp(15px, 3vw, 60px);
  row-gap: clamp(6px, 1.4vh, 16px);
  padding: clamp(5px, 1vh, 20px);
}

/* Word Group - represents a single word */
.word-group {
  --letter-box-size: 44px;
  --word-gap: 5px;
  display: flex;
  gap: var(--word-gap);
  flex-wrap: nowrap;
  justify-content: center;
  width: auto;
  max-width: 100%;
  flex: 0 1 auto;
}

/* Letter Box */
.letter-box {
  width: var(--letter-box-size);
  flex: 0 0 var(--letter-box-size);
  aspect-ratio: 1 / 1;
  min-width: 0;
  border: 2px solid #88888b;
  background-color: transparent;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.65rem, calc(var(--letter-box-size) * 0.55), 2rem);
  font-weight: 700;
  text-transform: uppercase;
  font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
  user-select: none;
}

.word-break-marker {
  width: var(--letter-box-size);
  flex: 0 0 var(--letter-box-size);
  aspect-ratio: 1 / 1;
  min-width: 0;
  color: #88888b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.65rem, calc(var(--letter-box-size) * 0.55), 2rem);
  font-weight: 800;
  font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
  user-select: none;
}

@media (max-width: 768px) {
  .letter-box,
  .word-break-marker {
    font-size: clamp(0.65rem, calc(var(--letter-box-size) * 0.55), 1.75rem);
  }
}

/* Pop animation when letter is added */
.letter-box.pop-in {
  animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  60% {
    transform: scale(1.08);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* State colors (Wordle-style) */
.letter-box.correct {
  background-color: #538d4e;
  border-color: #538d4e;
}

.letter-box.present {
  background-color: #b59f3b;
  border-color: #b59f3b;
}

.letter-box.absent {
  background-color: #3a3a3c;
  border-color: #3a3a3c;
}

/* Victory animation */
.letter-box.victory-pulse {
  animation: victoryPulse 1.5s ease-in-out infinite;
}

@keyframes victoryPulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(106, 170, 100, 0.7);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 0 20px 5px rgba(106, 170, 100, 0.4);
  }
}