.tile {
  width: var(--tile-size);
  height: var(--tile-size);
  border: var(--tile-border-width) solid var(--color-tile-border);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--tile-font-size);
  font-weight: 700;
  text-transform: uppercase;
  user-select: none;
  line-height: 1;
  background: var(--color-surface, transparent);
}

.tile.filled {
  border-color: var(--color-tile-filled-border);
  animation: pop 100ms ease;
}

.tile.correct {
  background: var(--color-correct);
  border-color: var(--color-correct);
  color: #fff;
}

.tile.present {
  background: var(--color-present);
  border-color: var(--color-present);
  color: #fff;
}

.tile.absent {
  background: var(--color-absent);
  border-color: var(--color-absent);
  color: #fff;
}

.key {
  flex: 1 1 0;
  min-width: 0;
  height: var(--key-height);
  padding: 0 2px;
  border: none;
  border-radius: 4px;
  background: var(--color-key);
  color: var(--color-key-text);
  font-size: clamp(0.65rem, 2.8vw, 0.85rem);
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  touch-action: manipulation;
  font-family: inherit;
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
}

.key.wide {
  flex: 1.35 1 0;
  font-size: clamp(0.6rem, 2.2vw, 0.75rem);
}

.key:hover {
  opacity: 0.85;
}

.key.correct {
  background: var(--color-correct);
  color: #fff;
}

.key.present {
  background: var(--color-present);
  color: #fff;
}

.key.absent {
  background: var(--color-absent);
  color: #fff;
}

/* Help modal examples */
.help-text {
  line-height: 1.6;
  margin-bottom: 16px;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.help-text p {
  margin-bottom: 8px;
}

.help-example {
  margin: 12px 0;
}

.help-example-row {
  display: flex;
  gap: var(--tile-gap);
  margin-bottom: 8px;
}

.help-example-row .tile {
  width: var(--help-tile-size);
  height: var(--help-tile-size);
  font-size: var(--help-tile-font-size);
}

.help-example-row .tile:not(.correct):not(.present):not(.absent) {
  border-color: var(--color-tile-border);
  background: var(--color-surface, transparent);
  color: var(--color-text);
}

.help-caption {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}

.help-caption .hl-correct {
  color: var(--color-correct);
  font-weight: 700;
}

.help-caption .hl-present {
  color: var(--color-present);
  font-weight: 700;
}

.help-caption .hl-absent {
  color: var(--color-text);
  font-weight: 700;
}