/* Reuse the 56px task header; the mode's clock must not add a layout row. */
.bonus-task.task-screen .task-top { grid-template-columns: 44px minmax(0, 1fr) auto; }
.bonus-task.task-screen .task-top h2 { grid-column: 2; grid-row: 1; font-size: 17px; }
.bonus-task.task-screen .bonus-clock {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  white-space: nowrap;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.bonus-task.task-screen .task-top progress { grid-column: 2 / 4; }
.bonus-result { width: min(100%, 480px); margin-inline: auto; text-align: center; }
.bonus-result .bonus-score { margin: 16px 0 8px; color: var(--accent); font-size: 64px; line-height: 1; font-weight: 800; }
.bonus-result button { min-height: 48px; }