/* === WORDLE GAME STYLES === */

/* Game Layout */
#game-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

/* Board Area */
#board {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.row {
  display: flex;
  gap: 6px;
}

/* The Tiles */
.tile {
  width: 58px;
  height: 58px;
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* Modern "Card" Look */
  background: var(--panel);
  border: 2px solid var(--border-strong);
  color: var(--text);
  
  font-size: 2rem;
  font-weight: 800;
  text-transform: uppercase;
  user-select: none;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

/* Typing State (Active) */
.tile[data-state="tbd"] {
  border-color: var(--text-muted);
  animation: pop 0.1s ease;
}

/* Result States */
.tile[data-state="correct"] { 
  background: var(--success); 
  border-color: var(--success); 
  color: #0f172a; /* Dark text for contrast */
}

.tile[data-state="present"] { 
  background: var(--warn); 
  border-color: var(--warn); 
  color: #0f172a; 
}

.tile[data-state="absent"] { 
  background: var(--border); 
  border-color: var(--border); 
  color: var(--text-muted); 
}

/* Keyboard */
#keyboard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 500px;
}

.key-row {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.key {
  flex: 1;
  height: 54px;
  display: flex;
  justify-content: center;
  align-items: center;
  
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text);
  
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  text-transform: uppercase;
  user-select: none;
  transition: transform var(--transition-fast);
}

.key:hover {
  transform: translateY(-2px);
  border-color: var(--border-hover);
}

.key:active { transform: translateY(0); }

/* Key Colors */
.key[data-state="correct"] { background: var(--success); border-color: var(--success); color: #0f172a; }
.key[data-state="present"] { background: var(--warn); border-color: var(--warn); color: #0f172a; }
.key[data-state="absent"]  { opacity: 0.5; }

/* Animation */
@keyframes pop {
  50% { transform: scale(1.1); }
}

/* Mobile Adjustments */
@media (max-width: 480px) {
  .tile { width: 50px; height: 50px; font-size: 1.75rem; }
  .key { height: 48px; font-size: 0.8rem; }
  .row { gap: 4px; }
  .key-row { gap: 4px; }
}