/* Relations gameplay: heading, rule chip, tool buttons. */

.relation-heading {
  padding: var(--space-2) 0 var(--space-3);
}

.relation-heading h1 {
  margin: 0;
  font-size: var(--text-h2);
  line-height: 1.25;
}

.relation-heading .relation-task {
  margin: var(--space-1) 0 0;
  color: var(--ink-2);
  font-size: var(--text-body);
  line-height: 1.4;
}

.relation-heading .relation-task b {
  color: var(--ink);
}

.relation-heading .relation-rule {
  width: fit-content;
  max-width: 100%;
  margin: var(--space-2) 0 0;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--good-bg);
  color: var(--good-text);
  font-size: var(--text-small);
  font-weight: 500;
}

.relation-hint {
  font-size: var(--text-small);
}

.relation-actions {
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.relation-actions .soft-btn {
  min-height: 56px;
}

.hint-button {
  color: var(--lilac-text);
}

/* Short screens: the board gets the space; the heading and buttons tighten. */
@media (max-height: 760px) {
  .relation-heading {
    padding: 0 0 var(--space-2);
  }

  .relation-heading h1 {
    font-size: var(--text-title);
  }

  .relation-heading .relation-task {
    font-size: var(--text-small);
  }

  .relation-heading .relation-rule {
    margin-top: var(--space-1);
    font-size: var(--text-caption);
  }

  .relation-actions {
    margin-top: var(--space-2);
  }

  .relation-actions .soft-btn {
    min-height: 48px;
  }
}

/* Very short screens (small phones with browser bars): drop the level name, keep the task. */
@media (max-height: 640px) {
  .relation-heading h1 {
    display: none;
  }

  .relation-actions .soft-btn {
    min-height: 44px;
  }
}