.wordle-grid {
  display: grid;
  gap: 8px;
  width: min(90vw, 320px);
}

.wordle-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.wordle-cell {
  height: clamp(48px, 12vw, 62px);
  border: 2px solid var(--border);
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: clamp(1.3rem, 5vw, 1.8rem);
  font-weight: 800;
  text-transform: uppercase;
  transition: background 0.3s ease, transform 0.1s ease, border-color 0.2s ease;
}

.wordle-cell.filled {
  border-color: var(--text-muted);
  animation: pop-in 0.1s ease;
}

@keyframes pop-in {
  from { transform: scale(0.7); }
  to { transform: scale(1); }
}

.wordle-cell.absent {
  background: color-mix(in srgb, var(--text-muted) 35%, var(--surface));
  border-color: transparent;
  color: var(--text);
}

.wordle-cell.present {
  background: var(--warning);
  border-color: transparent;
  color: #1a1c24;
}

.wordle-cell.correct {
  background: var(--accent);
  border-color: transparent;
  color: #06281d;
}

.wordle-cell.wobble {
  animation: wobble 0.4s ease;
}

@keyframes wobble {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Active cell cursor */
.wordle-cell.active {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 2px var(--primary);
  position: relative;
}

.wordle-cell.active::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 30%;
  right: 30%;
  height: 4px;
  border-radius: 2px;
  background: var(--primary);
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ===== On-screen keyboard ===== */
.wordle-keyboard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 24px;
  width: min(96vw, 440px);
}

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

.key {
  flex: 1;
  height: clamp(40px, 10vw, 54px);
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-weight: 700;
  font-size: clamp(0.8rem, 3vw, 1rem);
  text-transform: uppercase;
  color: var(--text);
  transition: transform 0.08s ease, background 0.2s ease;
  touch-action: manipulation;
}

.key:hover {
  background: color-mix(in srgb, var(--border) 60%, var(--surface-2));
}

.key:active {
  transform: scale(0.93);
}

.key.enter,
.key.backspace {
  flex: 1.6;
  font-size: clamp(0.7rem, 2.6vw, 0.85rem);
  color: var(--text);
}

.key.absent {
  background: color-mix(in srgb, var(--text-muted) 40%, var(--surface-2));
  border-color: transparent;
  color: var(--text);
}

.key.present {
  background: var(--warning);
  border-color: transparent;
  color: #1a1c24;
}

.key.correct {
  background: var(--accent);
  border-color: transparent;
  color: #06281d;
}

@media (max-width: 420px) {
  .key-row { gap: 3px; }
  .key.enter, .key.backspace { flex: 1.4; }
}