* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #121213;
  color: #fff;
  min-height: 100vh;
  display: grid;
  place-items: center;
}
.app { width: min(95vw, 520px); padding: 16px; }
h1 { margin: 0; font-size: 2rem; text-align: center; }
header p { text-align: center; color: #cfcfcf; margin-top: 8px; }
#status { min-height: 24px; text-align: center; margin: 10px 0; color: #f0f0f0; }
.board { display: grid; gap: 6px; margin: 12px 0 18px; }
.row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tile {
  aspect-ratio: 1;
  border: 2px solid #3a3a3c;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
}
.tile.filled { border-color: #565758; }
.tile.correct { background: #538d4e; border-color: #538d4e; }
.tile.present { background: #b59f3b; border-color: #b59f3b; }
.tile.absent { background: #3a3a3c; border-color: #3a3a3c; }
.keyboard { display: grid; gap: 8px; }
.key-row { display: grid; gap: 6px; grid-template-columns: repeat(20, 1fr); }
.key {
  grid-column: span 2;
  min-height: 44px;
  border: 0;
  border-radius: 4px;
  background: #818384;
  color: white;
  font-weight: 700;
  cursor: pointer;
}
.key.wide { grid-column: span 3; font-size: 0.75rem; }
.key.correct { background: #538d4e; }
.key.present { background: #b59f3b; }
.key.absent { background: #3a3a3c; }
.actions { display: flex; justify-content: center; margin-top: 14px; }
.actions button {
  background: #538d4e;
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}
.stats { margin-top: 12px; text-align: center; color: #ddd; font-size: 0.95rem; }